Set up Vue, Vuex, Vue-Router & Sass in Laravel 8.
…Without Boilerplates or bloated Scaffolding.
Set up Vue, Vuex, Vue-Router & Sass in Laravel 8
Laravel’s scaffolding for both frontend and backend development has evolved in the past couple of version releases. For example, when scaffolding authentication in Laravel 4 & 5, we’d use the good old “make: auth” command; which was quite declarative and didn’t give any other frontend options besides blade. This command pretty much scaffolds a basic authentication system, including routes, views, and controllers necessary for registration, login, and password recovery.
Until Laravel 5.3, Blade was the go-to option for fleshing out your frontend in Laravel. The support for Vue.js in 5.3 introduced the use of Vue components within your Laravel application, by default, Laravel generated a
Example.vue component in the resources/assets/js/components directory. It was up to you to decide whether or not you wanted to use it.
Support for using React was introduced in version 5.5, by allowing you to use the Artisan preset command to remove or set what frontend scaffolding preset you prefer.
php artisan preset react
php artisan preset none
This flow was discontinued in later versions, precisely version 6.x.
In Laravel 6.x, the
This flow was also discontinued in version 8. It however is backward compatible, which means even though you’re on version 8 of Laravel, you can still scaffold a vue app using the Laravel/UI package.
Laravel Starter Kits
These are the currently supported scaffolding options…if they don’t change it with the next major release. Here, there are two options for scaffolding:
With Laravel Breeze, what the Laravel team did was to isolate the popular “make:auth” command into a separate package, only this time the generated Blade templates are styled with Tailwind CSS as opposed to Bootstrap that was formerly used. Since we aren’t dealing with Blade, this option doesn’t apply to us right now.
The second option; Laravel Jetstream provides us with two options for scaffolding — Livewire + Blade or Inertia + Vue. No, we’re not going the Jetstream route either, why?
What we want is a Laravel + Vue setup in its barest minimum, something like what you get when you scaffold a vue application with the vue CLI.
Now we know the options we have, what we want, and why we want it. Let’s get started.
First, be sure your Laravel cli is up to date. For some reason, this error comes up for outdated versions.
Update your Laravel version with:
composer global require laravel/installer
Next scaffold a Laravel application:
laravel new laravel-vue-minimal
We also need to install some required packages as dev dependencies.
npm install --save-dev vue-loader vue vue-template-compiler vue-router vuex sass sass-loader resolve-url-loader
Let’s create a basic Vue folder structure, which would live inside the resources/js folder. Our folder structure would look something like this:
js/ - Assets - Axios - Components - Helpers - Layouts - Mixins - Pages - Router - Store - Styles App.vue app.js bootstrap.js
You should have something like this now.
Next, we’ll set up Vue-Router.
Within the Router folder create two files “routes.js” and “index.js”. In the routes.js file, we’ll set up an array of routes and export it.
Here we’re defining the home and about routes and mapping them to their respective components — Home.vue and About.vue (which we’ll create in a bit). Next, We’ll set up a Vue Router instance in the index.js file (inside the Router folder) and export the instance.
Up next, Vuex.
We’ll set up a Vuex store, add a “count” state property, and one mutation that we’ll commit later to update the count property. Within the Store folder, create an index.js file and set the Vuex store up like so:
If you’ve worked with Vuex before, this should look familiar. If not you can check the documentation.
We can now set up our entry file, this is equivalent to the main.js file you get when you generate a vue application with vue-cli. We’ll find this entry file in ./resources/js/app.js. Here we should find an almost empty file with bootstrap.js import at the top. Leave the import as-is, we’ll set up our Vue instance below it. Import the Vuex store and vue router instance into the app.js entry file then pass it into the Vue instance.
At this point, we can set up the all components required. The App.vue is the entry component like you might have seen in our vue instance setup, because of that we’ll have the router-view component in here.
Add a Navbar.vue component in the js/Components directory, since we already imported it in the App.vue component. It’ll look something like this:
We’ll style this later.
In the Pages folder we’ll add the About.vue component and the Home.vue component respectively. (We already used them in our route.js file).
In the Home component, we’re using the mapState helper to get the count value from our state object. Then we’re committing the “INCREMENT” mutation when the button is clicked. We’re also showing the count value within the h1 tag.
Next, we’ll style our components. Create the app.scss file within the Styles directory (We already imported this in the App.vue file).
Note: We’re mostly doing this for aesthetics, the point of this walkthrough is in the setting up of Vue from ground up in Laravel, so feel free to style your components however you want.
We add some styling to the body:
Below that we style the h1 tag and navBar class.
And Finally, we style the button:
Our work here is done. Now we have to make sure Laravel is conscious of our vue setup.
We’ll update the welcome.blade.php file within resources/views. This is the entry file that Laravel automatically creates when you scaffold a new Laravel project. Delete all you have there and Update the content to this:
Finally, we’ll update the web.php file within the routes folder, and set a catch-all route. The catch-all route should look like this:
webpack.mix.js to load Vue
mix.js('resources/js/app.js', 'public/js').vue() .postCss('resources/css/app.css', 'public/css', [ // ]);
add .vue() to the end of the file.
From here you should run Laravel-mix to build the vue app, and start your Laravel server.
npm run watch
Start the Laravel server.
php artisan serve
If everything went right, you should be able to view the vue app running on port (8000) [http://127.0.0.1:8000].