Webpack: Add vue-router

[rob-balfre]

Can we add vue-router to this template please? Seems like an unusual omission.

[chrisvfritz]

@rob-balfre We're currently working on a more modular build process that will allow people to opt in or out of certain features, such as tests and eslint, when creating a new project. I think that would be a great time to add optional vue-router integration as well. 👍

[rob-balfre]

@chrisvfritz That sounds great.

[KevinNTH]

Hi,
As the vue-router is not integrated in the template yet, how can I manage to do this by myself ?
If you have some clues to give to me, it would be nice. Thanks !

[chrisvfritz]

@KevinNTH I recommend checking out the examples and the docs.

[KevinNTH]

@chrisvfritz : Thanks a lot !!! Advanced exemple solves my problem !

[TheDutchCoder]

While on this topic (no need to open a new issue for this I think): it would be nice if the steps would also include modules like Vuex (Flux) or Revue (Redux) for state management, as well as Vue Resource.

Is there a list somewhere that contains what is planned for the modules? Maybe people could contribute there ;)

[KrishnaPG]

Not sure how to make the router work with this. Tried the code from the router documentation and it is throwing error Unknown custom element: <router-link> and Unknown custom element: <router-view>

Did like below:

var router = new VueRouter({
    history: false,
    root: '/',
    routes: [
        { path: '/', component: Index },
        { path: '/person', component: Person },
    ]
});

var pageApp = new Vue({
    el: 'app',
    render: h => h(App),
    router: router,
});

App.vue

<template>
    <main class="container body">
        <div class="main_container">
            <tag-sidebar></tag-sidebar>
            <router-view></router-view>
            <tag-footer></tag-footer>
        </div>
    </main>
</template>

Sidebar.vue

<ul class="nav child_menu">
        <li><router-link to="/person">Person</router-link></li>
</ul>

How to make it work correctly?

On some forums there is suggestion to use router.start, but if I use that it is throwing error start is not a valid method of router

[KrishnaPG]

The problem boils down to this. Would be great if someone could help.

I am getting the errors with the vue-router if I use <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.js"></script> in the html page directly (and not use the import Vue inside main.js).

However, if I remove the CDN script tag and use rather use the import Vue from 'vue' inside the main.js then the same above code is working fine without problem.

To double check, I have compared the content from the CDN with the local node_module Vue content, and they are same. Loading order is also same.

Why is this behavior? How to take advantage of the CDN hosted vue in such cases?

[chrisvfritz]

@KrishnaPG Those are usage/support questions, while the issues are reserved solely for bug reports and feature requests. I recommend posting your question on either the forum or the Gitter chat.

[kazupon]

Close (vie-router already included)