Issue:
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
Test.vue:
<template>
<p>test</p>
</template>
<script>
//also tried export default
module.exports = {
name: "test"
}
</script>
<style scoped>
</style>
app.js:
Vue.component('test', require('./components/Test'));
const app = new Vue({
el: '#app',
...
});
And my usage inside blade template:
<test></test>
What's wrong?
I have some other components which work without errors. They were made ~half year ago, probably npm update messed things up, but I'm not sure.
Can you try to import component and add it like this :
import Test from './components/Test';
const app = new Vue({
el: '#app',
components: {
Test
},
...
});
Youre problem seems to be related to this : Components registration
Related
I have installed Vuetify as they recommend on their website and added it to my app.js.
require('./bootstrap');
import vuetify from './plugins/vuetify';
window.app = new Vue({
vuetify,
el: '#app',
components: {
},
data: {
},
methods: {
}
});
However i'm still getting errors when attempting to use the component's such as v-switch within the app element and also within other components.
Error:
Unknown custom element: <v-switch> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
I've trying to solve this problem for the last 2 hours and can't find the solution. I created a new project with Vue cli and installed Vuetify with npm.
My files are like this
App.vue
<template>
<v-app id="app">
<HelloWorld/>
</v-app>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue';
export default {
name: 'App',
components: {
HelloWorld
},
data: () => ({
//
}),
};
</script>
main.js
import Vue from 'vue'
import Vuetify from './plugins/vuetify';
import App from './App.vue'
Vue.config.productionTip = false
Vue.use(Vuetify);
new Vue({
render: h => h(App)
}).$mount('#app')
HelloWorld.vue
<template>
<v-tabs>
<v-tab>Item One</v-tab>
<v-tab>Item Two</v-tab>
<v-tab>Item Three</v-tab>
</v-tabs>
</template>
<script>
export default {
name: 'HelloWorld',
}
</script>
The error I get is:
**[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide
the "name" option.
found in
---> at components/HelloWorld.vue
at App.vue
**
I also tried to use any component directly in the vue.app and get the same problem. Before posting here I lookup to at least 10 different posts, and I read that I should call vuetify before the new Vue but that didn't solve the problem. I dont know if there is something missing or I just cant see the problem.
Thanks for reading my post
I suspect the problem is with <v-tabs>. I'm not very familiar with vuetify. Shouldn't this component be imported and registered (like any other component would be?).
EDIT
Oh I think you need to pass Vuetify
new Vue({
Vuetify,
}).$mount('#app')
They have a getting started doc here:
https://vuetifyjs.com/en/getting-started/quick-start
Try to setup your project in the same way.
try to follow the quick start documentation in Vuetify.
import vuetify from '#/plugins/vuetify'
new Vue({
vuetify,
}).$mount('#app')
your import path is '#/plugins/vuetify' instead of './plugins/vuetify'
and add the vuetify into your Vue({ }).$mount('#app') as shown above.
Hope it help
I'm trying to create a custom component for some repetitive html. But the component won't show and I get this error:
[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
found in
---> <Child>
<VApp>
<App> at src/App.vue
<Root>
My main.js:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import vuetify from './plugins/vuetify'
Vue.config.productionTip = false
Vue.component('child', {
props: ['text'],
template: `<div>{{ text }}<div>`
});
new Vue({
router,
vuetify,
render: h => h(App)
}).$mount('#app')
My App.vue:
<template>
<v-app>
<child :text="message"></child>
<Navbar/>
<v-content>
<router-view></router-view>
</v-content>
<Footer/>
</v-app>
</template>
<script>
import styles from './app.css'
import Navbar from '#/components/Navbar'
import Footer from '#/components/Footer'
export default {
name: 'App',
components: { Navbar, Footer },
computed: {
theme(){
return (this.$vuetify.theme.dark) ? 'dark' : 'light'
},
},
data: () => ({
//
}),
};
</script>
What is going on? How to define a custom component?
My question "has mostly code"; so, my thoughts on vue.js: I notice that there are quite a few different ways or styles to build vue.js applications. I wish their examples would give more context on where to put the example code, I'm a seasoned developer, but new to web dev and js, and find that a lack of examples on the vue.js site really makes it hard to learn this framework.
Try this:
1- create a component in a separate .vue file
2- register it globally in main.js
3- then call it in any component directly.
1.
<template><div>{{ text }}<div></template>
<script>
export default{
props:['text']
},
</script>
2. in main.js
//...
Vue.component('child-component',require('./path/to/chaild/compoent').default);
//...
3 Now you can call it in any component because it is registered globally.
<template>
<div>
<child-component text='some text to pass as prop.'/>
//...
</div>
</template>
//...
I use Vue 2 in CLI mode with webpack-simple. I have following files:
main.js:
import Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router';
import Routes from './routes';
Vue.use('VueRouter');
const router = new VueRouter({
routes: Routes,
});
new Vue({
el: '#app',
render: h => h(App),
router: router,
});
App.vue:
<template>
<div>
<router-view></router-view>
</div>
</template>
<script>
import Loader from './Loader.vue';
export default {
name: 'app',
}
</script>
<style lang="scss">
</style>
routes.js:
import Game from './components/Game.vue';
import Login from './components/Login.vue';
export default [
{ path: '/', component: Game, name: "Game" },
{ path: '/login', component: Login, name: "Login" },
]
Game.vue and Login.vue looks the same:
<template>
<div>
Game
</div>
</template>
<script>
export default {
name: 'game',
}
</script>
<style lang="scss">
div {
border: 1px solid red;
width: 100px;
height: 100px;
}
</style>
unfortunately starting a file gives me an error:
[Vue warn]: Unknown custom element: - did you register
the component correctly? For recursive components, make sure to
provide the "name" option.
Also router-view tag is not changed to proper html. I use vue router for the first time. It' been installed via npm in version 3.0.1
Any advice?
You need to do the following:
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
Ref: https://router.vuejs.org/en/installation.html
new Vue({
el: "#app",
router: router,
render: h => h(App),
})
Hope it will help you
Change:
Vue.use('VueRouter');
To:
Vue.use(VueRouter);
i dont know if its related to your problem or not but you have to use the VueRouter variable "Vue.use(VueRouter)" not a string "Vue.use('VueRouter')";
I had a similar issue, running the commands below fixed it for me.
npm install
npm install vue-router
npm run dev
I had encountered a similar issue while working with Vue js and laravel.
Running these commands below solved it:
npm install vue-router
npm run dev
Make sure before creating routes and using the VueRouter you need to tell Vue.js that you are using VueRouter. Try this before using the VueRouter:
import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);
.....
const routes = [{
path: '/', component: Home, name: "Home"
......
}]
Good Luck
I guess the problem is occurring due to you are passing the vue-router as string in your example.
Use this instead:
import VueRouter from 'vue-router';
and then register it using Vue.use() like this :
Vue.use(VueRouter);
and as you are using es6 style import, you can also use es6 style object shorthand for router.
const router = new VueRouter({
routes: Routes,
});
new Vue({
el: '#app',
render: h => h(App),
router,
});
In my app, I have a template for things like Invoice, Email etc. I'd like the user to be able to edit these templates by dragging and dropping elements. I'm currently using vue-loader along with webpack to pre-compile my vue files into pure JS.
Is it possible to load a vue template from the database on the fly? I've seen this post but this isn't using vue-loader so I'm not sure how to override the template on my component via the code. Something like:
created: function () {
this.$template = '<html><p>Loaded from the DB!</p></html>'
}
would be useful. Is this possible?
Edit: I've tried the following but I get an error Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.:
created: function () {
document.body.innerHTML = '<html><p>I AM FROM THE DB {{total}}</p></html>'
}
This would need to be modified to pass in the templates from your database, but this works in a very simple single file component. Obviously you will want to customize, but this demonstrates the concept.
Dynamic.vue
<script>
export default {
props:["template"],
data(){
return {
message:"hello"
}
},
created(){
this.$options.template = this.template
}
}
</script>
App.vue
<template>
<div>
<dynamic
v-for="template, index of templates"
:template="template" :key="index">
</dynamic>
</div>
</template>
<script>
import Vue from "vue"
import Dynamic from "./Dynamic.vue"
export default {
name: 'app',
data () {
return {
templates: [
"<h1>{{message}}</h1>",
"<h4>{{message}}</h4>"
]
}
},
components:{
Dynamic
}
}
</script>
main.js
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App)
})