A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.


#Vue-Cli Template for Larvel + Webpack + Hotreload (HMR)

I had a really tough time getting my workflow rocking between Laravel and VueJS projects. I found myself building my VueJS projects independently in the Webpack dev server and then weirdly porting it into my Laravel projects. This was especially painful on existing projects where I was just trying to add a new component to the project.

I love Evan's approach and setup that you get with vue-cli. I'm sure there are many ways to do this but this is how I get started when building components that are going to live and communicate with a Laravel application. It allows me to build in real time, maintain Vue's data-store state' and just have less headaches all around.

This vue-cli template will hopefully help you get off the ground with your VueJS projects. Certainly, any feedback is greatly appreciated.


You will need the following installed - If you're new I'll try and walk you through this so give it a go.


  • Laravel Command Line Installer
  • Vue Dev-tools extension for Chrome

##Install Laravel

I won't go into all the steps to make this happen Laravel Install Docs but essentially, here are the steps I take with Homestead.

laravel new superproject (or whatever your project name is)

##Configure Laravel

I then create a database for this project and edit the .env file to point to the database by changing DB_DATABASE=homestead to DB_DATABASE=superdatabaseformyproject

##Configure Host Machine

Edit your host file so you can render the site:

sudo vi /etc/hosts

And add the following superproject.app

Edit your Homestead.yaml

vi ~/.homestead/Homestead.yaml

Add the following to your list of sites:

    - map: superproject.app
      to: /home/vagrant/Code/superproject/public

Finally provision the site with Vagrant from your Homestead directory (most likely ~/Homestead) with this command

vagrant provision

##Install Laravel NPM Dependencies

Navigate to your projects root Laravel directory (probably ~/Code/superproject) . Update your package.json with the following:

  "private": true,
  "devDependencies": {
    "babel-core": "^6.7.7",
    "gulp": "^3.9.1",
    "laravel-elixir-browsersync2": "^0.1.0",
    "laravel-elixir-webpack": "^1.0.1"
  "dependencies": {
    "bootstrap-sass": "^3.0.0",
    "laravel-elixir": "^5.0.0",
    // "laravel-elixir-webpack-ex": "0.0.4" // This has been removed pending some pull requests for both webpack config overrides and known bugs in the defined version of webpack-stream. For now use the fork below
    "laravel-elixir-webpack-ex": "dolbex/laravel-elixir-webpack-ex"

and run the following:

npm install

Update your gulpfile.js with the following and be sure to scan it real quick and change any settings based on what you called your vue js project and what your server address is.

 | Elixir Asset Management
 | Elixir provides a clean, fluent API for defining some basic Gulp tasks
 | for your Laravel application. By default, we are compiling the Sass
 | file for our application, as well as publishing vendor resources.

// Just making paths a little shorter
var jsAssetsPath = './resources/assets/js'

// Requirements
var elixir = require('laravel-elixir');
var gulp = require('gulp');


// Elixir extension to clean up for multiple Vue projects
elixir.extend('buildVueProject', function(mix, projectName, entryPath, configPath) {

  var project = {}
  project[projectName] = entryPath
  mix.webpack(project, require(configPath), elixir.config.publicPath);


elixir(function(mix) {
    if(elixir.config.production) {
            jsAssetsPath + '/my-vue-project/build/webpack.prod.conf.js'

        // Let's let elixer take care of the hashing
    } else {
            proxy           : "superproject.app:8000/",
            logPrefix       : "Super Project",
            logConnections  : false,
            reloadOnRestart : false,
            notify          : false

##Create new Vue-CLI project using this template

Ok, so at this point we could go to http://localhost:8000 and see the Laravel 5 welcome screen. Great. Now, let's get some awesome Vue JS in there!

Head to (and you probably have to make this directory on a new project) ~/Code/superproject/resources/assets/js/

Bang out this command and change my-vue-project to whatever your Vue JS project name is. Remember, this is the component or widget that is going to live within your laravel app. It could be a map, slider, game, or, maybe it's the entire site accessing Laravel API endpoints you are going to make.

vue init dolbex/webpack-laravel my-vue-project

Call the directory that was just made (in my case my-vue-project) and run:

npm install

##Inserting your Vue JS app in your blade template

So, let's assume you've followed my steps and are working from a fresh Laravel installation. I'm going to crack open ~/Code/superproject/resources/views/welcome.blade.php and replace the body with:

Laravel 5

Laravel 5

All that we've done here is add the which will be the container for our Vue JS root component and a script tag that is pointing to a server that isn't running yet. What is that?! That will be our webpack server. So, let's get that up and running.

Pretend we're developing

Ok, so we're going to have three servers running at the same time. Homestead is already running. Let's start the other two. Remember, these are run on your machine outside of Homestead. I open a new terminal tab (I use Total Terminal) for each of these.


If you're not already there go to on your main machine (again, not Homestead): ~/Code/superproject/resources/assets/js/vue-example and run npm run dev

Now, if all you're working on is your Vue app you could go to http://superproject.app:8000 and see the Vue logo next to the Laravel 5 logo. If you open an editor and edit ~/Code/superproject/resources/js/vue-example/src/App.vue and make a change you should see it live update in the browser.

You can test this by installing Vue Dev Tools extension for Chrome and pressing the button. You'll see on the App component has a 'test' property that will change from false to true (I had some redraw issues on dev tools. Just click another component and click back - this is something I need to figure out). Now change something in your {project-root}/resources/assets/js/vue-example/src/App.js file and the display will update but the state of the app will remain.

Elixir / Browsersync

Ok, but what if we want to take this a little further and live-update blade stuff as well? Not a problem.

Open another terminal and head to your project root and run gulp

This should open a new browser. What should be happening is that when you update any .php files (like a Blade file) Browsersync will inject updates into the browser. When you update your Vue application webpack will do the same.


So, what about when you're ready to go to production? Elixir and Laravel-Elixir-Webpack-Ex make this easy and you're all setup to go. If you want you can edit the names of your javascript by editing your gulpfile.js

From the root of your project:

gulp --production

Add the following to the welcome.blade.php just before the :


Add this in the :



These are using elixir for cache busting so you don't have to worry about cache on the server or in the client.

Adding in SASS Node Dependencies

If you want to add in something like bourbon / neat (a sass library) to your project you'll need to edit the webpack.base.conf.js file inside your vue js project.

In the case of bourbon / neat add the following requirements to the top of the file.

var projectRoot = path.resolve(__dirname, '../')

var bourbon = require('bourbon').includePaths;
var neat = require('bourbon-neat').includePaths;

module.exports = {

Then add the sassloader section in the module:

  resolveLoader: {
    fallback: [path.join(__dirname, '../node_modules')]
  sassLoader: {
      includePaths: [bourbon, neat]
  module: {

Don't forget to restart your webpack dev server when you're done editing the config file.

Feedback / Questions

Certainly, I am not a webpack / elixir professional yet so I am certainly open to any feedback that folks have concerning these technologies. Please post any feedback to the issues and I'll see if I can give you a hand.


  • How to integrate this with laravel 5.3

    How to integrate this with laravel 5.3

    Since laravel 5.3 comes with vue 2 already set up in the resources files. How would we go about getting the development features added in this template? and will this template be updated to laravel 5.3 with vue 2 ? Thanks!

    opened by bogdandevlpr 2
  • I have integrated elixir browserify vueify, Must I do step by step install laravel node_modules again?

    I have integrated elixir browserify vueify, Must I do step by step install laravel node_modules again?

    Hi, It is great i find your job. My question is: I have done a lot to make laravel build system to work.(The main module are : - "laravel-elixir-vueify": "^1.0.3",

    • "laravel-elixir": "^4.0.0", )

    Must I re-install again based on your package.json for backend? What is the difference between the laravel official package.json you have made? If I only run npm install in the resources/assets/js/vueapp directory, does that will work? I find it is a painful job everytime i run npm install command.


    opened by cnweibo 1
  • where can i house my old webpack.config.js?

    where can i house my old webpack.config.js?

    before im not using this... all my config in my loaders are in webpack.config.js

    now i dont see here a webpack.config.js

    are all loaders included by default?

    i have a package that i will use ,


    more or less i wont cater the default because there is piece of code for scss

    themeLoader: {
        themes: ['./resources/assets/sass/theme.scss', './node_modules/vuestrap/theme/bootstrap.scss'],

    i think that is the only thing i need to add ... since it is a external package...

    i think other is as is... looking forward for your reply...

    Also i need to know where would i install these other dependencies....

    inside my laravel root, or in resources/assets/js/projectname?

    your reply is much appreciated

    opened by rjcaya 1
  • if im going to npm install a component... Where would i Install..

    if im going to npm install a component... Where would i Install..

    Im puzzle a bit coz how can i install a package for example vuestrap...

    there are 2 node_modules folder altogether..

    one in the root folder of laravel

    2nd is on the root folder of vue project....


    opened by rjcaya 1
  • im working my way around in webpack and laravel and vue..

    im working my way around in webpack and laravel and vue..

    Like you ive been so messed up in my workflow, right now im using vue loader , but until i see vue-cli i cant think of a way to integrate it... but at last...

    Ive see this , need to try this thanks!

    opened by rjcaya 1
Gary Williams
Gary Williams
A Laravel REST API backend with React/Redux, hot module reloading in development and route-level code splitting

React Laravel Boilerplate This is the boilerplate that I personally use for getting projects off the ground quickly using my favourite stack of techno

Carwyn Stephen 174 Jan 6, 2023
Laravel 8 + React + Typescript + React Router v4 + Hot Module Reloading

Laravel React Typescript Boilerplate An opinionated boilerplate based on Laravel 8.*, React 16 and Typescript empowering you to get off the ground qui

George Cameron 56 Dec 16, 2022
Build a full-featured administrative interface in ten minutes

⛵ laravel-admin is administrative interface builder for laravel which can help you build CRUD backends just with few lines of code. Documentation | 中文

Song 10.7k Dec 30, 2022
Laravel React Webpack Starter Kit

About Laravel Laravel React Webpack Starter Kit This starter kit is designed to get you up and running with with react.js with Laravel, built on top o

Biju Nakarmi 32 Nov 24, 2022
The power of webpack, distilled for the rest of us.

Introduction Laravel Mix provides a clean, fluent API for defining basic webpack build steps for your applications. Mix supports several common CSS an

Laravel Mix 5.2k Jan 4, 2023
A script to help setup Laravel project with common packages and configurations

About Snap Snap allow developer to create scaffold Laravel project. Installation Clone this repository in your user home directory. cd ~ git clone htt

Nasrul Hazim Bin Mohamad 3 Jan 4, 2022
Setup Docker Para Projetos Laravel

Setup Docker Para Projetos Laravel

EspecializaTi 9 Sep 13, 2022
An opinionated Laravel setup using my favourite tools

Opinionated Laravel Template This is a template I use when starting a new Laravel project. It is opinionated and uses the conventions I prefer to work

Luke Downing 42 Nov 26, 2022
Laravel 8 boilerplate in docker-compose with Treafik and SSL setup and github workflow ready for CI/CD pipeline

Laravel8 boilerplate Laravel 8 boilerplate in docker-compose with Treafik and SSL setup with .github workflow ready To start the containers in prod en

Tej Dahal 5 Jul 9, 2022
Use this skeleton application to quickly setup and start working on a new Slim Framework 4 application

Slim Framework 4 Skeleton Application Use this skeleton application to quickly setup and start working on a new Slim Framework 4 application. This app

Slim Framework 1.5k Dec 25, 2022
A seamless django like admin panel setup for Laravel. Simple, non-cms table manager for admins.

Seamless Admin Panel A seamless Django-like admin panel setup for Laravel. Simple, non-cms table manager for admins. Installation steps Require the Pa

Advaith A J 15 Jan 2, 2023
This template repository is a boilerplate setup for a PHP application

PHP_Docker Repository Template What is this ? This template repository is a boilerplate setup for a PHP application. Its current version ships with PH

Kevin Richard 0 Jul 16, 2022
A lightweight full-stack component layer that doesn't dictate your front-end framework

Airwire A lightweight full-stack component layer that doesn't dictate your front-end framework Demo Introduction Airwire is a thin layer between your

ARCHTECH 199 Nov 23, 2022
This is a laravel Auth Starter Kit, with full user/admin authentication with both session and token auth

About Auth Starter It's a Laravel 8 authentication markdown that will help you to understand and grasp all the underlying functionality for Session an

Sami Alateya 10 Aug 3, 2022
:elephant: A Laravel 6 SPA boilerplate with a users CRUD using Vue.js 2.6, GraphQL, Bootstrap 4, TypeScript, Sass, and Pug.

Laravel Vue Boilerplate A Laravel 6 Single Page Application boilerplate using Vue.js 2.6, GraphQL, Bootstrap 4, TypeScript, Sass and Pug with: A users

Alefe Souza 533 Jan 3, 2023
Laravel Vue SPA, Bulma themed. For demo login use `[email protected]` & `password` -

Laravel Enso Hit the ground running when building your new Laravel SPA project with boilerplate and extra functionality out of the box! click on the p

Laravel Enso 1k Jan 3, 2023
Laravel and Vue js CRUD

Laravel and Vue js PhoneBook app In this project I have done a simple CRUD using Laravel and Vue Js. Here I have used : Vue router Sweetalert2 Resourc

AR Shahin 4 Jun 11, 2022
High scalable boilerplate for Laravel - Vue using laravel-mix.

Why use this ? This boilerplate make developer easier to make monolith Laravel project which integrated with Vue.js and vue-router as default front-en

Carvel Saputra Martaloho 5 Sep 21, 2022