Laravel with webpack , VueJs and Vue-route

Question

I refereed so many tutorials related webpack , VueJs and Vue-Route but all tutorials are individual. I was searching for tutorials that explain/show Laravel with Webpack , VueJs and Vue-route together but bad luck.

Individually , I worked with webpack , VueJs for html template not with Vue-route.

My project requirement is :

Use Lumen for back-end (APIs)
Use Laravel , VueJs and Vue-Route for front side (Web)
Use WebPack for .Js , .css , .sass And Images type (bundal.js, you know wnat I mean)

What I have done so far :

Set up Lumen platform for Apis
Set up laravel for front

Now , I need/want to set up webpack , VueJs and Vue-route with laravel framework. At this point I'm confuse.

I have few questions related my confusion.

How to set up webpack with Laravel.
How to use VueJs and Vue-route with Laravel Route.

For above 2 questions my mind is blank. what to do next and how to do? Don't have any idea.

So if any one can explain how to work with Laravel , Webpack , VueJs and Vue-Route with example it would be grate.

QaMar ALi · Accepted Answer · 2018-03-08 21:12:50Z

well when you install a new laravel application laravel already comes with webpack installed and with easy to use laravel-mix installed..

All you have to do is on server side in laravel go to your routes file catch all the urls and let it handle by the vue just like this.

 Route::get('{any}', function () {
    return view('index');
})->where('any' , ".*");

now your every request is going to serve the index.blade.php page and the vue-router will handle the url and serve the specifig component for that route

then go to your cmd install the dependencies like npm install vue-router -save etc

after installing your desired dependencies.

i am asuming probably you already know how to use vue router on its own go to app.js file write all your vue and vue-router code here for example

    import Vue from 'vue';

    window.axios = require('axios');    
   Vue.prototype.$http = axios;

  import VueRouter from 'vue-router'
  import home from './components/pages/home.vue'
  import App from './App.vue'

  Vue.use(VueRouter);

 let routes = [
    {
        path :'/',
        name :'home',
        component : home
    },
]

let Router =  new VueRouter({
    routes : routes,
    mode : 'history'
})


    const app = new Vue({
        el : '#app',
        router : Router,
        render : h => h(App)
    });

at the end run npm run dev script in the cmd. serve the generated js file to the index.blade.php the page your server serves on every request

as we are supplying the el : #app to the vue to make a div with an id of #app in the index.blade.php and you are good to go

Roland · Accepted Answer · 2018-03-08 21:27:18Z

0

So if you have Lumen for backend and everything is ok...then use Lumen and Vue.js separately.It would be great and has some advantages.

Leave Lumen as it is and create a new vue.js application.Then install vue-router and you are done.

answered Mar 8, 2018 at 21:27

Roland

28.1k9 gold badges108 silver badges103 bronze badges

Collectives™ on Stack Overflow

Laravel with webpack , VueJs and Vue-route

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related