I trying to use the vue-datepicker (https://vue3datepicker.com/installation/) with no success
First I create one class on my \plugins directory: ('\plugins\vue-datepicker.js')
import Datepicker from '#vuepic/vue-datepicker';
export default defineNuxtPlugin(nuxtApp => {
nuxtApp.vueApp.use(Datepicker)
})
then I try to use in my app
<Datepicker />
but I got this erro:
runtime-core.esm-bundler.js:38 [Vue warn]: Failed to resolve component: DatePicker
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
Related
I want to use vue2-editor (and some other packages) in my project, but use them local inside component or two. I followed this thread How to use plugin in only one component using Nuxt.js? but the solution doesn't help me, I see the following error
[Vue warn]: Failed to mount component: template or render function not defined.
Please suggest what I am missing?
Template:
<template>
<div>
<client-only>
<vue-editor v-model="newIdea.description" />
</client-only>
</div>
</template>
Components:
components: {
[process.client && 'VueEditor']: () => import('vue2-editor')
}
Is this somehow related that I should import {VueEditor} from 'vue2-editor' and not directly 'vue2-editor'?
I also tried to add .default but it didn't help.
Bottom line that import {VueEditor} from 'vue2-editor' is working and [process.client && 'VueEditor']: () => import('vue2-editor') is not (all the rest code is same, so definitely something wrong with the second import, but what? Or maybe I missed something?)
Why aren't the props being passed to the component in InventorySectionGroupItemComponent
https://codesandbox.io/s/cgvbc
?
There's a warning:
[Vue warn]: Failed to mount component: template or render function not defined.
found in
---> <InventorySectionGroupItemComponent>
<InventorySectionGroupComponent> at /src/components/InventorySectionGroupC.vue
<InventorySectionComponent> at /src/components/InventorySectionC.vue
<ChromePage> at /src/components/ChromePage.vue
<App> at /src/App.vue
<Root>
vue hates long component names (correct me if I'm wrong)(Updated sandbox).
The component name has nothing to do with the error. The problem is InventorySectionGroupC.vue incorrectly registers VueGridLayout:
import VueGridLayout from 'vue-grid-layout';
export default {
name: "InventorySectionGroupComponent",
components: {
VueGridLayout, // incorrect registration
},
}
vue-grid-layout's installation guide shows how to register the components:
import VueGridLayout from 'vue-grid-layout'
export default {
components: {
GridLayout: VueGridLayout.GridLayout,
GridItem: VueGridLayout.GridItem,
}
}
As a side note, grid-layout and grid-item are actually used in InventorySectionC.vue
(not InventorySectionGroupC.vue), so their component registration should be moved into that component.
demo
I have a problem migrating to moment on Vuejs.
After running npm install vue-moment and adding to my script:
<script>
const moment = require('vue-moment');
...
</script>
I added this into my <template> :
<h1>{{moment('2017-12-20 11:00').fromNow()}}</h1>
And I get this error:
[Vue warn]: Error in render: "TypeError: _vm.moment is not a function"
You can use it globally as #red-X said, but you can add it only on your component:
import moment from 'moment'
export default {
data: () => ({
moment: moment
})
}
And then you can access it in your HTML template.
But i recommand you to use computed vars for using this kind of code, and to not have logic in your html template, just render computed vars inside your templates for readability.
And with this solution, you don't need to have moment library available globally or in your component, just the import.
Here it's an example :
import moment from 'moment'
export default {
computed: {
distanceFromNow() {
return moment('2017-12-20 11:00').fromNow()
}
}
}
And in your template :
<template>
<div>
{{ distanceFromNow }}
</div>
</template>
import * as momentTemp from 'moment';
const moment = momentTemp["default"];
Did you add the 'moment' attribute to the lifecycle 'methods',forExample:
methods:{
moment,
function a(){},
}
Did you add moment to the global Vue object like this:
const moment = require('vue-moment');
Vue.use(moment)
Just adding it to the local scope of a component will not make it available for use in the template. Everything referenced in the template is taken from the component itself.
I intall https://github.com/praveenpuglia/vuetify-daterange-picker in my currently vue app with vuetify i follow the docs. but it get me an error.
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
//in main.js
//and in my component
//package.json
//error
From link you provided:
// If you want to register this as a global component then
// in main.js
import VDateRange from 'vuetify-daterange-picker';
import 'vuetify-daterange-picker/dist/vuetify-daterange-picker.css';
Vue.use(VDateRange);
And in your components you can use VDateRange with name v-date-range:
<template>
<div>
<v-date-range :options="dateRangeOptions" #input="onDateRangeChange"></v-date-range>
</div>
</template>
I would like to create Side Panel as a reusable component in Framework7 with VueJS. Here is my code..
Card.vue
<f7-card>
<f7-card-header>Card header content</f7-card-header>
<f7-card-content><img src="https://wiki.videolan.org/images/Ubuntu-logo.png"></img></f7-card-content>
<f7-card-footer>Card footer content</f7-card-footer>
</f7-card>
Now i registered as a component like below,
import Vue from 'vue'
export default [
{
path: '/card/',
component: require('./Card')
},
]
In later vues i imported as,
import Card from './Card.vue'
and i try to access in another vues like,
Now i'm getting an error like
[Vue warn]: Unknown custom element: - did you register the
component correctly? For recursive components, make sure to provide
the "name" option.
Can anyone help me where have i mistaken?
Thanks,
It's not really clear from your code exactly what you are doing, but the error you are getting happens when you try to use a component as a child of another component without registering it in the parent's components setting like this:
<script>
import Card from './Card.vue'
export default {
data () {
return {
somedata: 'some value'
}
},
components: {Card: Card}, // <- you're missing this
// etc...
}
</script>
You can also register components globally. More here: https://v2.vuejs.org/v2/guide/components.html#Local-Registration
Are you showing us all of Card.vue? For a valid single-file vue component, I would expect to see <template>, <script> and <style> elements. The render function will be generated from whatever you put in the <template> element.
Make sure that the component that you want to reuse is wrapped inside a template tag
As follows
<template>
<div>
<component data/>
<div/>
<template/>
Then register it inside the parent
Like so
export default {
name: "Card",
components: {
Card
},
};