posva / vue-coerce-props

Coerce props to whatever you want

VueCoerceProps

Transform/Coerce props values to whatever you want

Installation

npm install vue-coerce-props

Install the mixin globally or locally:

// main.js
import CoercePropsMixin from 'vue-coerce-props'

Vue.mixin(CoercePropsMixin)

// MyComponent.vue
import CoercePropsMixin from 'vue-coerce-props'

export default {
  // other options
  mixins: [CoercePropsMixin],
}

Usage

To coerce a prop, add a coerce function to any prop:

const SpaceTrimmer = {
  props: {
    text: {
      type: String,
      // this function is called by VueCoerceProps
      coerce: text => text.trim(),
    },
    style: {
      type: String,
      coerce(style) {
        // you can access the context as in a computed property
        // NEVER use this.$coerced here as it would create an infinite loop
        // if you use things coming from data, you may consider using
        // a computed property instead
        return this.possibleValues.includes(style) ? style : 'default'
      },
    },
  },
}

VueCoerceProps will inject a computed property named $coerced containing every single coerced prop:

<p>
  <span>Original value: {{ text }}</span>
  <span>Coerced value: {{ $coerced.text }}</span>
</p>

FAQ

• Q: Why not passing component props as second argument? A: That would make every coerce value depend on every prop. At the end $coerced is just a computed property

License

MIT

vue-coerce-props's Issues

An in-range update of vue is breaking the build 🚨

The devDependency vue was updated from 2.5.18 to 2.5.19.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

vue is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ ci/circleci: Your tests failed on CircleCI (Details).

---

Release Notes for v2.5.19

Bug Fixes

• ssr: should not warn for custom directives that do not have ssr implementation 780dac5, closes #9167
• vdom: remove unnecessary sameVnode condition 0d4b35f, closes #9168

Reverts

• fix(sfc): avoid deindent when pad option is specified (#7647) 5d721a4, closes #7647

Commits

The new version differs by 6 commits.

• 628c1b7 build: release 2.5.19
• c38a81b build: build 2.5.19
• 0d4b35f fix(vdom): remove unnecessary sameVnode condition
• 5d721a4 revert: fix(sfc): avoid deindent when pad option is specified (#7647)
• 780dac5 fix(ssr): should not warn for custom directives that do not have ssr implementation
• a89384c test(ssr): add basic directives test (#9166)

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

An in-range update of vue-template-compiler is breaking the build 🚨

The devDependency vue-template-compiler was updated from 2.5.18 to 2.5.19.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

vue-template-compiler is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ ci/circleci: Your tests failed on CircleCI (Details).

---

Release Notes for v2.5.19

Bug Fixes

• ssr: should not warn for custom directives that do not have ssr implementation 780dac5, closes #9167
• vdom: remove unnecessary sameVnode condition 0d4b35f, closes #9168

Reverts

• fix(sfc): avoid deindent when pad option is specified (#7647) 5d721a4, closes #7647

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

An in-range update of vue is breaking the build 🚨

The devDependency vue was updated from 2.5.17 to 2.5.18.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

vue is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ ci/circleci: Your tests failed on CircleCI (Details).

---

Release Notes for v2.5.18

Includes everything in 2.5.18-beta.0

Bug Fixes

• compiler: fix codegen for v-for component inside template 1b4a8a0, closes #9142
• ssr: fix ssr template publicPath generation f077ed1, closes #9145
• fix keyName checking for space and delete in IE11 (#9150) 0ed0aad, closes #9150 #9112
• transition-group: fix activeInstance regression 8a2dbf5, closes #9151
• types: correct scopedSlot types (#9131) 448ba65, closes #9131 #8946
• types: type support for advanced async components (#8438) dfaf9e2, closes #8438

Commits

The new version differs by 164 commits ahead by 164, behind by 4.

• dadc918 build: release 2.5.18
• eb81ec2 build: build 2.5.18
• dfaf9e2 fix(types): type support for advanced async components (#8438)
• 8a2dbf5 fix(transition-group): fix activeInstance regression
• 0ed0aad fix: fix keyName checking for space and delete in IE11 (#9150)
• f077ed1 fix(ssr): fix ssr template publicPath generation
• 93850f4 chore: fix sponsor link
• 1b4a8a0 fix(compiler): fix codegen for v-for component inside template
• 448ba65 fix(types): correct scopedSlot types (#9131)
• 0d7fb73 chore: update sponsors/backers [ci skip]
• e8031b4 build: release v2.5.18-beta.0
• fe194dd build: build v2.5.18-beta.0
• 3078352 fix(ssr): resolve server directives the same as on client (#9129)
• aca17b4 ci: add regression test for popular libraries in Vue.js ecosystem (#8608)
• e4b1b57 fix(ssr): adjust call stack size defer threshold

There are 164 commits in total.

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

An in-range update of vue-template-compiler is breaking the build 🚨

The devDependency vue-template-compiler was updated from 2.5.17 to 2.5.18.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

vue-template-compiler is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ ci/circleci: Your tests failed on CircleCI (Details).

---

Release Notes for v2.5.18

Includes everything in 2.5.18-beta.0

Bug Fixes

• compiler: fix codegen for v-for component inside template 1b4a8a0, closes #9142
• ssr: fix ssr template publicPath generation f077ed1, closes #9145
• fix keyName checking for space and delete in IE11 (#9150) 0ed0aad, closes #9150 #9112
• transition-group: fix activeInstance regression 8a2dbf5, closes #9151
• types: correct scopedSlot types (#9131) 448ba65, closes #9131 #8946
• types: type support for advanced async components (#8438) dfaf9e2, closes #8438

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

I am usig type-based props declarations in my vue3 project , but I want to introduce this feature , do you have any good idea

I declare props like this

const props = defineProps<{
  foo: string
}>()

The only way I can think of is to change it to something like this

const props = defineProps({
  foo: {
      type: String as PropTyep<string>,
      coerce: ()=>{}
    }
})

But this doesn't fit tyepscript well