Level 2
Now, I am using module.export instead of export default it works!
Oct 6, 2016
8
Level 2
Using Vue Router with .vue component files
Hi there, I have a problem when using router components as .vue files. Explanation below:
I use these dependencies:
"vue": "^2.0.1",
"vue-router": "^2.0.0",
"laravel-elixir-vue-2": "^0.2.0"
Everyhing is ok when I define router like below:
const router = new VueRouter({
routes: [
{ path: '/', component: {
template: '<div>Home</div>',
created() {
console.log('a')
}
} },
{ path: '/pricing', component: {
template: '<div>Pricing</div>',
created() {
console.log('b')
}
} }
]
});
But when I tried to seperate components in .vue files, scripts in vue files are not compiling. Like below:
import Home from './routes/Home.vue';
import Pricing from './routes/Pricing.vue';
const router = new VueRouter({
routes: [
{ path: '/', component: Home },
{ path: '/pricing', component: Pricing }
]
});
Home.vue:
<template>
<div>
Home
</div>
</template>
<script>
export default{
data(){
return {
user: 'asd'
}
},
created() {
console.log('a')
}
}
</script>
Level 3
My current setup:
bootstrap.js:
[...]
window.Vue = require('vue');
window.VueRouter = require('vue-router');
window.VueResource = require('vue-resource');
[...]
router.js:
module.exports = {
routes: [
{ path: '/api', component: require('./components/ApiManager.vue') }
]
};
app.js:
require('./bootstrap.js');
import { routes } from './router.js';
const router = new VueRouter({ routes });
const app = new Vue({router}).$mount('#app');
I don't know if it's the best approach, but it works and keep things clean...
1 like
Level 3
@gbdematos how does the contents of your #app div look like? I can't get my router-view to be recognized by Vue.
Level 3
@perkola my #app just has: <main-app></main-app> in it. My "MainApp" component has the content of the page, with links and a router-view in there. But that's a specific case, you could just have the router-view tag (and links of course) in the #app div.
What errors are you getting?
Level 3
@gbdematos I had export default {...} instead of module.exports = {...} in my component but It works now. Do you have any idea why the ES6 syntax export default does not work? It used to work before I upgraded to Vue 2.0 :/
Level 10
Hi!
export default{}
works fine with me. I changed
[...]
window.Vue = require('vue');
[...]
to
[...]
window.Vue = require('vue/dist/vue.js');
[...]
in my bootstrap.js file and using .vue files afterwards worked perfectly.
Level 1
I have a cleaner and straightforward solution.
This is the original main.js I got from the webpack (or webpack-simple) template project:
import Vue from 'vue';
import App from './App';
new Vue({
el: '#app',
template: '<App/>',
components: { App },
});
To include vue-router in this mix is very simple:
import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './App';
import Foo from './Foo';
const routes = [
{ path: '/', component: App },
{ path: '/foo', component: Foo },
];
Vue.use(VueRouter); // This makes all the magic hapen and Vue recognizes the router-view and router-link
const router = new VueRouter({
routes,
});
new Vue({
el: '#app',
router,
});
In my index.html file, where the main Vue script is being loaded, I have the following:
<body>
<div id="app">
<router-view></router-view>
</div>
</body>
Just like the index.html, in the .vue components just spawn the router-link:
<template>
<div>
<h1>Hello</h1>
<router-link to="/">Go back</router-link>
</div>
</template>
<script>
export default {
name: 'foo',
};
</script>
It works like a charm.
I hope it helps. :)
1 like
Level 8
One can also do
import Vue from 'vue';
import VueRouter from 'vue-router';
const routes = [
{ path: '/', component: require('./App')},
{ path: '/foo', component: require('./Foo')},
];
Vue.use(VueRouter); // This makes all the magic hapen and Vue recognizes the router-view and router-link
const router = new VueRouter({
routes,
});
new Vue({
el: '#app',
router,
});
This saves you for annoying naming of includes.
Please or to participate in this conversation.