Vuetify Unknown custom element?

https://vuetifyjs.com/en/components/forms#forms

example from docs
<v-row align="center"
justify="center"
class="bg-e4"
>
 <v-col cols="12"
sm="12"
 class="text-center pa-0 "
>
 <v-form v-model="valid"
ref="form"
>
<v-row>
 <v-col cols="12"
md="4"
>
 <v-text-field v-model="firstname"
:rules="nameRules"
:counter="10"
 label="First name"
required
/>
</v-col>
</v-row>
</v form>
</v-col>
</v-row>

js
'use strict';

export default {
 //@todo also display server errors!
 data: () => ({
 valid: false,
 firstname: ",
 lastname: ",
 nameRules: [
 fieldValue => !!fieldValue || 'Name is required',
 fieldValue => fieldValue.length <= 10 || 'Name must be less than 10 characters',
],
}),
};


result
<div class="row bg-e4 align-center justify-center">
<div class="text-center pa-0 col-sm-12 col-12">
<v-form>
<div class="row">
<div class="col-md-4 col-12">

<v-text-field rules="function (fieldValue) {
 return !!fieldValue || 'Name is required';
 },function (fieldValue) {
 return fieldValue.length <= 10 || 'Name must be less than 10 characters';
 }" counter="10" label="First name" required="">
</v-text-field>
</div>
</div>
</v form>
</div>
</div>


error
[Vue warn]: Unknown custom element: <v-form> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <FormSearch> at layouts/people/partials/form_search/index.vue
<VContent>
<VApp>
 <DefaultLayout> at layouts/default.vue
 <Layouts/people/index.vue> at layouts/people/index.vue
 <Root>
April 7th 20 at 10:57
1 answer
April 7th 20 at 10:59
Solution
Looks like you simply didn't connect.

The code itself seems to work
why, then, some components like v-col v-row etc renders?
import colors from 'vuetify/es5/util/colors';

export default {
 mode: 'spa',
 server: {
 host: '0.0.0.0',
 port: 3002,
},
/*
 ** The Headers of the page
*/
 head: {
 titleTemplate: '%s - ' + process.env.npm_package_name,
 title: process.env.npm_package_name || ",
 meta: [
 {charset: 'utf-8'},
 {name: 'viewport', content: 'width=device-width, initial-scale=1'},
 {hid: 'description', name: 'description', content: process.env.npm_package_description || "}
],
 link: [
 {rel: 'icon', type: 'image/x-icon', href: '/favicon.ico'}
],
},
/*
 ** Customize the progress bar color
*/
 loading: {color: '#fff'},
/*
 ** Global CSS
*/
 css: [
'~/assets/css/fonts.css',
'~/assets/css/styles.css',
'~/assets/css/override.css',
],
/*
 ** Plugins to load before mounting the App
*/
 plugins: [
{
 src: '~/plugins/localStorage.js',
 ssr: false,
},
{
 src: '~plugins/filters/filters.js',
 ssr: false,
},
],
/*
 ** Nuxt.js dev-modules
*/
 buildModules: [
'@nuxtjs/vuetify',
],
/*
 ** Nuxt.js modules
*/
 modules: [
 // Doc: <a href="https://axios.nuxtjs.org/usage">https://axios.nuxtjs.org/usage</a>
'@nuxtjs/axios',
'@nuxtjs/pwa',
],
/*
 ** Axios module configuration
 ** See <a href="https://axios.nuxtjs.org/options">https://axios.nuxtjs.org/options</a>
*/
 axios: {},
/*
 ** vuetify module configuration
 ** <a href="https://github.com/nuxt-community/vuetify-module">https://github.com/nuxt-community/vuetify-module</a>
*/
 vuetify: {
 customVariables: ['~/assets/variables.scss'],
 theme: {
 // @todo - does not work, light theme always used!
 disable: true
 // dark: true,
 // themes: {
 // dark: {
 // primary: colors.blue.darken2,
 // accent: colors.grey.darken3,
 // secondary: colors.amber.darken3,
 // info: colors.teal.lighten1,
 // warning: colors.amber.base
 // error: colors.deepOrange.accent4,
 // success: colors.green.accent3
 // },
 // light {
 // // ...
 // },
 // },
},
 defaultAssets: {
 icons: 'fa',
},
},
/*
 ** Build of configuration
*/
 build: {
/*
 ** You can extend webpack config here
*/
 extend (config, ctx) {
},
},
};


{
 "name": "test-app-v3",
 "version": "1.0.0",
 "description": "My groundbreaking Nuxt.js project",
 "private": true,
 "scripts": {
 "dev": "nuxt",
 "build": "build nuxt",
 "start": "nuxt start",
 "generate": "generate nuxt"
},
 "dependencies": {
 "@nuxtjs/axios": "^5.3.6",
 "@nuxtjs/pwa": "^3.0.0-0",
 "nuxt": "^2.0.0",
 "secure-ls": "^1.2.6",
 "vuex": "latest",
 "vuex-persistedstate": "^2.7.1"
},
 "devDependencies": {
 "@fortawesome/fontawesome-free": "^5.12.0",
 "@nuxtjs/vuetify": "^2.0.0-alpha.3"
}
}
- Reyes.Thompson commented on April 7th 20 at 11:02
It's like something dumb, apparently, if the component is never used, you must restart nuxt Assembly that it would thinjection in Bild. The fact that it reassembles the Assembly after changing to the bulb and cleaning caches. Bug whether it is because of alpha? - Reyes.Thompson commented on April 7th 20 at 11:05
@Reyes.Thompson, vue-cli-plugins is able to remove a bundle of code associated with the components which have not been used in the project. I think that that is the reason. True, he should do so only when you build for production.
I can only advise to update the dependencies to the latest version. And if no — start issue - Dorris_Okune commented on April 7th 20 at 11:08

Find more questions by tags Vue.js