Laravel 7. X Vue/Vuetify Setup

In this post, am going to share with you my experience of setting up Vue/ Vuetify for a Laravel app.

Step 1 Creating a new project called laravel

creating a new laravel project

Step 2 Installing the front-end scaffolding using the ui Artisan command:

Step 3 Registering Vue general scaffolding

Step 4 Installing project’s front-end dependencies

Step 5 Processing the instructions in webpack.mix.js file

Step 6 Adding Vuetify plugin for Vue

Step 7 Plugin installed successfully

Step 8 Choose Default

Step 9 After you run the above choose you should see the below message.

Vuetify added successfully

Step 10 Install vuetify

Step 11 Add the sass-loader as dependency

Step 13 Run the below npm

Step 14- Add Vuetify mix extension by running the command below

After you are done with the above, you need to restructure the directory

What to do Next…

Step 1: Delete index.htm in public/index.html

Step 2: In resource/views/layout/app.blade.php modify code as below

Add new CSS style sheet links

Step 4: Delete default app.js, bootstrap.js, components/ExampleComponent.js, and files from resources/js and create a new one app.js in the resource/js folder. Paste the code below in your app.js

Step 5: Move App.vue and HelloWorld.vue files from src/ and src/components respectively to resources/js/components and resources/js/components/shared. And move assets directory to resources/js/components

Your directory should now look like this below

Your src folder has only the plugin files

Step 6: Add the following code in your App.vue — Changed from ./components/ to #Components/shared.

App. vue

Step 7: In webpack.mix.js change it to the code below

I encountered the error below while I was setting up the environment

error encountered while setting up

Below are the steps i followed to resolve the error

Step 1: Check your Vue version- Am using Vue 4 and this is how I achieved to resolve my error. I have provided the links below that will help you.

Step 2: uninstall the sass-loader

Step 3: install sass-loader@7 and above

Step 4: Change code in your vue.config.js

Well we are done with the front end. Now let’s deal with Laravel

Laravel

Step 1: create a controller called WelcomeController

Step 2: Edit the WelcomeController.php file

Step 3: Add Route in routes/web.php;

Step 4: Add the below sniped code into welcome.blade.php and save

Step 5: Run — npm run watch you should see the below results

Then run — php artisan serve you should see the below results

Final result click on http://127.0.0.1:800 you should see the results below.

Hopefully these steps helps you as you set a Vuetify environment for your Laravel App. Happy Codding

For more reference check out the links below.

Thetopsites

How-to-integrate-vuetify-and-laravel-7-x

Laravel-Mix

Vuetifyjs-mix-extension