Custom Laravel-Vue Configuration

Custom Laravel-Vue Config

Vue comes prepackaged with Laravel, ever wondered how to “customly” set it up? This is for you, I hope it’s helpful.

1. As expected, the first step is to create a new laravel project. To do this, you may, or may not need to have laravel installed to in your computer. If you don’t have laravel installed, you’ll simply have to run composer create-project laravel/laravel project-name on your command line to create a new project. Having done this, navigate to the project directory and run npm install to install all node packages present in the package.json file, one of which is Vue.

2. Next step will be to install the vue-router. To do this, run npm install vue-router. While this installs, you may want to organize and restructure your resources/assets/js/ folder directory.

3. Navigate to resources/assets/js/components folder where you’ll find an example.vue file. You might want to delete this file or keep it and simply make modifications to it, your choice, but I prefer to delete and start on a clean slate. Create a new file (or modify your example.vue as the case may be) and call it whatever you choose. Have it at the back of your mind that this file will serve as the root of your Vue app, for the sake of this short tutorial, I’ll call mine “root”. You can just add your template tag to the file for now.

4. Navigate to the app.js file which you’ll find on the same level with the resources/assets/js/components folder. Look for a line that looks like what I have below.

Vue.component(‘example’, require(‘./components/Example.vue’));

Modify the parameters (name and route) passed in appropriately. The first parameter (name) can be any name you choose, while the next parameter is the path to the root component we created, which is “root.vue”. So we have,

Vue.component(‘root’, require(‘./components/root.vue’));

5. Next, proceed to the resources/views folder where you’ll be creating some sort of bridge between your laravel and vue. You can go ahead and delete the welcome.blade.php file found there, then proceed to make a new blade file which in my case I’ll call home.blade.php. After creating and adding basic html initialization lines to the file, I have something like this

<!doctype html><html lang=”{{ app()->getLocale() }}”><head><meta charset=”utf-8"><meta http-equiv=”X-UA-Compatible” content=”IE=edge”><meta name=”viewport” content=”width=device-width, initial-scale=1"><title>Laravel-Vue Tuts</title></head><body></body></html>

6. Proceed to create a div within your body tag and make the id equal to “app”. Within this div, call the vue root component by the name you created in step 4; one called root.

7. The next step is to create a script tag where you’ll be requiring the trans-compiled js file stored in the public/js directory.

<!doctype html><html lang=”{{ app()->getLocale() }}”><head><meta charset=”utf-8"><meta http-equiv=”X-UA-Compatible” content=”IE=edge”><meta name=”viewport” content=”width=device-width, initial-scale=1"><title>Laravel</title></head><body>    <div id=”app”>        <root></root>    </div></body><script src=”{{mix(‘js/app.js’)}}”></script></html>

8. Next up, setup “Routers”.

Return to resources/assets folder and create a js file which you can call router.js. This file will act as your vue-router index.

Proceed to import both vue and vue-router within the file, after which you should add the Vue.use(“Router-Name”) line before proceeding to create and export your array of routes. In the end the file should like this

import Vue from ‘vue’import Router from ‘vue-router’Vue.use(Router)const routes = [    {       //route details    }]export default new Router({   mode: ‘history’,   routes})

Having concluded this, you should return to your resources/assets/components/root.vue file and add the <router-view /> component to return pages based on the route.

It should look this way now.

<template>   <div>      <router-view></router-view>   </div></template>

Proceed to the app.js file still on the same level with your router.js where you’ll be registering the router. All you’ll have to do is import the router file and pass it on to app. The file should now look like this afterwards.

/*** First we will load all of this project’s JavaScript dependencies which* includes Vue and other libraries. It is a great starting point when* building robust, powerful web applications using Vue and Laravel.*/require(‘./bootstrap’);window.Vue = require(‘vue’);/*** Next, we will create a fresh Vue application instance and attach it to* the page. Then, you may begin adding components to this application* or customize the JavaScript scaffolding to fit your unique needs.*/Vue.component(‘root’, require(‘./components/root.vue’));import router from ‘./router’const app = new Vue({   el: ‘#app’,   router});

With this done, we’re nearing a close. All we have left is to configure the laravel router to route unregistered paths to the vue router instead of blocking it. To do this, navigate to routes/web.php and add a new route that looks like this (It’s best kept beneath other routes in this file).

Route::any(‘{slug}’, function () {   return view(‘home’);});

What we’re basically doing is telling the laravel router that once a user navigates to any route that it doesn’t have registered in the web.php file, it should forward it to the vue-router through the bridge we created in the home.blade.php file.

With all these done, you can celebrate; you have successfully setup laravel-vue!!!

All you may want to do now is just start the app by running php artisan serve and npm run watch to track and compile changes to your vue files.

If this was helpful, I’ll appreciate your comments.

Software developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store