DEV Community

Raghunathan Srinivasan
Raghunathan Srinivasan

Posted on • Updated on

Setting up Vue with Laravel for SPAs

This article is going to guide you through setting up the Laravel environment to enable you to create single-page applications (SPAs) with Vue on the front end.

Laravel comes with built-in support for developing the front end with Vue. In fact, Laravel's official website was also developed using Vue.

Without further ado, let's begin.

Basic Project Setup

We need to create a Laravel project using the command line;
Go to your server root directory and create a new project

Alt Text

Now that's done, open the project in your browser and you should see this;

Alt Text

We've now created a Laravel project successfully.

The Vue Side

Let us complete the Vue side of the setup first and then move on to the Laravel side.

It is recommended that you have npm installed on your system because you will be using it to install packages all through the development process.

The heart of the Vue side is the app.js file which lies in /resources/js/app.js.
It will contain all of the installed package imports and the Vue app configuration

Alt Text

Open app.js and remove the existing code because we will be starting from scratch. Let us first import Vue and then create an instance of a new Vue app that configures the element with id app (will be created in the Laravel side) to be used by Vue.

Alt Text

We will be using vue-router to implement the SPA, so let's go ahead and install it using npm. After installing it, we will import it into our app using app.js, tell Vue to use it and then set the router variable inside the Vue instance. We will then create a routes.js file where we will configure the routes for our application and import that inside the app.js file as well.

Alt Text

Alt Text

Alt Text

We've now setup Vue with Vue Router.
We will now create three components;

  1. App.vue
  2. Home.vue
  3. About.vue, all inside the components directory.

Before that, delete the existing components inside the components directory.

Alt Text

The App.vue file is the root component of our application. It is this component that will always be loaded in the DOM and the other components (here: Home.vue and About.vue) will be loaded dynamically into it.

As far as the App.vue file is concerned, we will create a navigation of sorts to dynamically switch from Home.vue and About.vue and then we will load the required component into it using the router-view tag.

Alt Text

The to attribute is intentionally left blank. It will be filled in once we define the routes.

Now since we've defined the App component, let's go ahead and add it inside the Vue instance we created in app.js.

Alt Text

We have now configured the Vue instance to inject the App component inside the element with id app.

Now, let's define the routes inside routes.js file. We're going to have two routes, one for the Home component and the other for the About component.

Alt Text

After defining the routes, we need to add it to the App.vue file's router-link tag's to attribute

Alt Text

Let us now add some content in the Home.vue and About.vue files.

Alt Text

Alt Text

With that done, the Vue side of the setup is complete.

The Laravel Side

Open /routes/web.php and change the contents as shown below to make Laravel routes to work seamlessly with Vue Router.

Alt Text

Now we need to change the contents of /resources/views/welcome.blade.php to work with Vue.

We will first delete the contents of welcome.blade.php and then replace it with our own code.

We have to create an element with id app and then inject the App component inside this element.

Finally, we need to link app.js to welcome.blade.php using the script tag.

Alt Text

With that, the Laravel setup is also complete.

Demo

Alt Text

Alt Text

Thank you for reading!

Top comments (0)