How to install Vue,Vue-router,Tailwind with Laravel 9,Vite

tanzimibthesam

Tanzim Ibthesam

Posted on July 31, 2022

How to install Vue,Vue-router,Tailwind with Laravel 9,Vite

Here we will talk about how you can install Vue and Tailwind with Vite in Laravel 9.
After installing laravel go to project directory cli and type
npm i vue@next vue-loader.You also need to install
vitejs/plugin-vue Now if you look at package.json files you will see
packagejsonfile
So we got all our dependencies installed for now.
In our project directory in js folder create another folder called components.In components folder create a file called App.vue
You can name the file and folder as per your choice.
In app.js now
appjs
So here we can see app.js
*** Note carefully whatever your file name is here you need to import as name of your file and write Component with it otherwise it wont work.Here if your component name is Example you need to import it as ExampleComponent otherwise things wont work***
Now in
vite.config.js
vite
Here we need to import vue
In welcome.blade.php we need to mount the id #app to the DOM.
welcomeblade
**Here inside div with id app we need to write name of our component in this format if name of your component is example component it will be ** <example-component></example-component> Strictly ensure to write it this way.
now in CLI run npm run dev
Now we can see both terminals side by side
allterminals
**In App.vue*
AppVue
In our browser if we check now
AppHello
Vue Router
Here we will show how you can install vue router.npm install vue-router@4 type this in CLI.
pacakgejson
Inside js folder create a folder called router inside router create a file called index.js
routefile
in app.js
appjs
Here we import router and at bottom as we see write app.use(router)
In App.vue
Appvue
Here to see all elements of router we need to write <router-view /> so we can now see it on browser
browser
**But there is a problem now*
routefile2
If we create a new route with a component associated like shown in above here its about route. When we go to about route it gives a 404 error.
404
Here the about route gives a 404 error. Quick fix here
In routes/web.php
Route::get('/{any}', function () {
return view('welcome');
})->where("any",".*");

webroutes
Now we can see the route about works
browseraboutroutes
Installing Tailwind
First go onto CLI and type npm install -D tailwindcss postcss autoprefixer now you can go to package.json file and see
autoprefixerpostcss
Then in CLI write npx tailwindcss init -p
in tailwind.config.js
tailwindconfigjs
Go onto resources css/app.css in app.css write
appcss
Restart your npm terminal run npm run dev again
In About.vue if we see
aboutvue
If we see on the browser again
browserseeTailwind

So now we are done with installing Vue.vue-router and Tailwind in Laravel.

💖 💪 🙅 🚩
tanzimibthesam
Tanzim Ibthesam

Posted on July 31, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related