Hi there. Here are the steps I followed to speed up the process of building a Vue.js app powered by Laravel. The objective: Set up and run a new dev environment right away. I am using Homestead, which is a popular Vagrant box that comes with all you need to create modern PHP apps, so I will assume that you’ve already installed and set up Homestead on your local computer as well.

Without any further ado, let’s get started!

1. Add a New Entry in /etc/hosts

The 192.168.10.10 IP address is already set up in my Homestead/Homestead.yaml file by default (this is why I’m referring to it when adding an entry in my /etc/hosts file).

192.168.10.10 acme.local

2. Add a New Site to Your Homestead Environment

Edit the Homestead/Homestead.yaml file, and map the acme.local domain to your new website — be a little patient, we still have to create a new project in the next step.

sites:
- map: acme.local
to: /home/vagrant/projects/acme/public

3. Create a Laravel Project

First of all run the Homestead machine:

vagrant up

Wait a few seconds till it is up, then ssh and cd the projects folder:

vagrant ssh
cd projects

Create the project:

composer create-project --prefer-dist laravel/laravel acme

After completing this step you should be able to access your new website by typing http://acme.local in the address bar of your favourite browser.

Figure 1. Laravel welcome page

4. Install Laravel Mix

Laravel Mix is an awesome Webpack wrapper that makes your life easier as a developer, just install and forget about the nuts and bolts of Webpack.

cd acme
npm install

Assets are transpiled like this:

npm run dev

Or like this, if you want Webpack to dynamically recompile assets when detecting changes.

npm run watch

5. Set up a Minimal Vue App

Now replace the default original code in acme/resources/views/welcome.blade.php by this one: