Add validation decorators

[marcin-stasiak]

Consider adding decorators for validation for example: https://www.npmjs.com/package/vuelidate-property-decorators

[atinux]

cc @husayt what do you think of this?

[husayt]

Here we mainly add decorators specific to core nuxt features e.g. router, vuex, vue-meta. Decorators for other libraries can easily be added separately. @marcin-stasiak I suggest to add that separtely. I am very conscious that this library is already doing too much.

@atinux going forward this library will shape depending on vue 3 related changes in next versions of vue-class-component and nuxt. Can I have access to nuxt-next for vue3 to give it a try as Vue Class Component v8 is already available in beta,

[TrayHard]

Here we mainly add decorators specific to core nuxt features e.g. router, vuex, vue-meta. Decorators for other libraries can easily be added separately. @marcin-stasiak I suggest to add that separtely. I am very conscious that this library is already doing too much.

@Atinux going forward this library will shape depending on vue 3 related changes in next versions of vue-class-component and nuxt. Can I have access to nuxt-next for vue3 to give it a try as Vue Class Component v8 is already available in beta,

I tried to use one of such "other libraries" - vuelidate-property-decorators with nuxt, but it fails. It gets me an error:

SyntaxError
Unexpected token 'export'

I have these in package.json:

// dependencies:
"vue-property-decorator": "9.1.2",
"vuelidate-property-decorators": "^1.0.28"
"@vuelidate/validators": "^2.0.0-alpha.14",

And this in the file where I'm trying to use it:

<template>
    ....
    <s-input
        v-model="$v.search.$model"
        placeholder="..."
        clearable
        @focus="handleSearchActiveChange"
        @blur="handleSearchActiveChange"
    />
    ....
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import { Validate } from 'vuelidate-property-decorators'
import { required } from '@vuelidate/validators'

...

@Component({ ... })
export default class HeaderMain extends Vue {
    @Validate({ required })
    search = null
    ...
}
</script>

And once I comment { Validate } import and decorator from search - the error is gone, while required works okay and i can even render it in the template, so the problem is related exactly to import from vuelidate-property-decorator. So it seems it's not that simple :(

[grandmasteralexandr]

@TrayHard

I tried to use one of such "other libraries" - vuelidate-property-decorators with nuxt, but it fails. It gets me an error:

SyntaxError
Unexpected token 'export'

this helped me add in nuxt.config.js build: { transpile: ['vuelidate'], },