A Quick Guide to Setting Up a Vue.js 2 and Laravel Homestead App

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).

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.

3. Create a Laravel Project

First of all run the Homestead machine:

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

Create the project:

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.

Assets are transpiled like this:

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

5. Set up a Minimal Vue App

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

As you see, the important thing is to make sure that our JavaScript application is being loaded:

The next step is replacing the code in acme/resources/assets/js/app.js with this one:

Finally let’s write two simple single file components: App and Acme.

acme/resources/assets/js/components/App.vue

acme/resources/assets/js/components/Acme.vue

Don’t forget to transpile again:

Refresh the page and voila!

Figure 2. Well done! You’ve set up your dev environment.

That’s all for today! I hope you’ll find this tip helpful.

0 comentarios

¿Me dejas un comentario? ¡Gracias!

Deja un comentario

Los campos obligatorios están marcados con *