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
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.
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
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.
Step 7: In webpack.mix.js change it to the code below
I encountered the error below while I was setting up the environment
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
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.