I have below 2 components in vue.js and using in Laravel 5.8
Here is app.js file.
require('./bootstrap');
import VeeValidate from 'vee-validate';
window.Vue = require('vue');
Vue.use(VeeValidate);
Vue.component('profile', require('./components/Account/Profile.vue').default);
Vue.component('change-password', require('./components/Account/changepassword.vue'));
const app = new Vue({
el: '#app'
});
Below is the code in change password component.
<template>
<div>
</div>
</template>
When I build the code using npm run dev.
I get the below error: Failed to mount component: template or render
function not defined in <ChangePassword> <Root>
When I remove the change component reference from app.js and re build using npm run dev then everthing work.
Am I missing anything?
First your change password component is empty and then there is no export default script that exports your component for use
It worked with this Vue.component('change-password', require('./components/Account/changepassword.vue').default);
Instead of this:
Vue.component('change-password', require('./components/Account/changepassword.vue'));
Related
This is my very beginning with Vue with Symfony. Problem is nothing is displayed in my page, I was expecting Hello to be print. I did all my configurations. I have created folder vue
Inside vue I have following 2 files.
App.vue
<template>
<div id="app">
<h1>Hello</h1>
</div>
</template>
index.js
import Vue from "vue";
import App from "./App";
new Vue({
components: { App },
template: "<App/>"
}).$mount("#app");
I have in my webpack.config.js
.addEntry('app', './assets/vue/index.js')
I did anything wrong here ?
You are mounting the Vue instance to something existing in the DOM with id app. But the component inside App.vue also contains a div with id app. Try to mount to anything else on the page that Symfony creates (you can't mount on body or html). I'm sure that page does not contain anything with id app.
vue#2.6.10
vuetify#2.2.25
I have the following code.
Plugin of Vuetify:
$ cat src/plugins/vuetify.js
import Vue from "vue";
import Vuetify from "vuetify/lib";
Vue.use(Vuetify);
export default new Vuetify({
theme: {
dark: false
}
});
Import and activate it:
$ cat src/main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import vuetify from './plugins/vuetify';
<some irrelevant code and imports reducted>
new Vue({
vuetify,
router,
store,
render: h => h(App)
}).$mount('#app')
Root App HTML code (irrelevant code reducted):
$ cat src/App.vue
<template lang="pug">
#app
component(:is="layout")
router-view /
</template>
And finally I use it in one of pages:
$ cat src/layouts/PrivateLayout.vue
<template lang="pug">
div
v-app
...
router-view
</template>
And this is what I see in the console of DevTools:
Unknown custom element: <v-app> - did you register the component correctly?
Does anybody have an idea what happens? I've read already all the similar question (there are tons) but none of the answers helped.
SOLUTION
Thanks to #morphatic the solution was either:
Import every element manually
or install package that imports everything automaticallty: npm install --save vuetify-loader
Second way, obviously will increase the size as you import redundant things. But it's easier.
This is a sneaky one! Your project structure looks correct to me. The only part that is different from most of the Vuetify apps I've seen is this part:
<template lang="pug">
#app
component(:is="layout")
router-view /
</template>
Even though you appear to have registered all of the Vuetify components globally, when you use dynamic components (<component :is="layout">), my guess is that the build system is doing some sort of lazy loading or late binding which causes <v-app> not to be loaded in time to be recognized. This is mentioned as a special case in the Vuetify docs.
I think there are a couple of things you can try:
Don't load your layout with a dynamic component
Explicitly import VApp to make sure it's there before you need it
I'm sorry I can't be more specific as I haven't solved this particular problem before, but I'm pretty sure that's what's causing it.
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 have created a new project using vue-cli 'vue init webpack-simple my-app' command. In that fresh installation copy, I'm trying to import vue-router in the App.vue component that was created by default. But it is giving me an error: 'Uncaught ReferenceError: Vue is not defined'. If I import the vue again in App.vue, then the app is working fine. But I already imported the vue in main.js, so why do I need to import it again in App.js? Is there any way I can use the imported vue from main.js? Here is my code:
main.js:
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App)
})
App.vue:
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
import Vue from 'vue'; //**why I need to import it again? I already imported it in main.js
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import QuestionOne from './components/QuestionOneTemplate';
const routes = [
{ path: '/', name: 'QuestionOne', component: QuestionOne },
];
const router = new VueRouter({
routes
});
window.router = router;
export default {
router,
name: 'app',
data () {
return {
}
}
}
</script>
<style lang="scss">
</style>
Is there any way i can use the imported vue from main.js?
No, you need to import it in every file that uses Vue. The imports/requires are how things get hooked up. Rest assured, each import will be the same singleton instance.
You can get to the router from a Vue component's javascript using this.$router and this.$route without an import, or inside a template, using simply $router and $route
Not recommended, but you can assign Vue to a global in main.js, and use the global without importing.
main.js
import Vue from 'vue';
global.MyVue = Vue
App.vue
import VueRouter from 'vue-router';
MyVue.use(VueRouter);
Why
This is how ES6 links things up. Consider it wiring. If there were more than 1 Vue lib available, how would the linker know which to use? What if another library defined a variable or function called Vue? Perhaps a lib uses its own internal Vue for an event bus or other feature.
Other Thoughts
The explicit import also makes IDE autocompletion and syntax highlighting work better. Some IDEs can add the imports automatically, and that makes life easier.
did you try this ?
import Vue from 'vue'
import VueRouter from 'vue-router'
then use
Vue.use(VueRouter)
because the error message means you need to import vue first to use vue-router
You did the right thing and you don't have to worry about importing Vue in multiple files. When you are shipping your application and build it for production, you will have only one "Vue import". If you take a look at dist folder and your bundled .js files you will notice that Vue is imported only once.
I have a project on Vue.js with Typescript and when I run dev server (prod build too) it returns error in console:
ERROR Failed to compile with 1 errors
This relative module was not found:
*./app.vue in ./src/main.ts
I alredy tried to checkout previous project commits, update global and local packages, clone and build project on other machines, delete and reinstall packages, delete package-lock.json, create new project via vue cli and add project files on new configuration - and nothing was changed. Same error. Very strange for me.
Here is my main.ts
import Vue from 'vue';
import App from './app.vue';
import router from './router';
import store from './store';
Vue.config.productionTip = false;
new Vue({
router,
store,
render: (h) => h(App)
}).$mount('#app');
And here App.vue
<template>
<div id="app" class="container-fluid">
<header-component></header-component>
<main id="content" class="content row">
<transition name="fade">
<router-view/>
</transition>
</main>
<footer-component></footer-component>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import HeaderComponent from './components/header/header.component';
import FooterComponent from './components/footer/footer.component';
#Component({
components: {
HeaderComponent,
FooterComponent
}
})
export default class App extends Vue {}
</script>
<style lang="scss">
#import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
#import "../node_modules/font-awesome/css/font-awesome.min.css";
#import "../node_modules/vue2-animate/dist/vue2-animate.min.css";
#import "./styles/main.scss";
</style>
Thanks in advance for help.
It was a spelling error. I changed
import App from './app.vue';
to
import App from './App.vue';
and it fix the error.
Thanx to Derek for help
It could also be, because your node_modules, is not at the root of the project.
If you installed your nuxt project using Yarn try deleting the node_modules and then installing using npm i instead. There are some hooks that will not be run by yarn when installing your dependencies for nuxt.