install tailwind css

Author: Nazmul7989

app/Http/Controllers/HomeController.php

@@ -16,4 +16,9 @@ public function about()
     {
         return Inertia::render('About');
     }
+
+    public function login()
+    {
+        return Inertia::render('Login');
+    }
 }

package-lock.json

@@ -6,8 +6,11 @@
         "build": "vite build"
     },
     "devDependencies": {
+        "autoprefixer": "^10.4.14",
         "axios": "^1.1.2",
         "laravel-vite-plugin": "^0.7.5",
+        "postcss": "^8.4.25",
+        "tailwindcss": "^3.3.2",
         "vite": "^4.0.0"
     },
     "dependencies": {

package.json

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

postcss.config.js

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

resources/css/app.css

@@ -0,0 +1,13 @@
+<template>
+
+    <slot/>
+
+</template>
+
+<script>
+
+</script>
+
+<style scoped>
+
+</style>

resources/js/components/NavLink.vue renamed to resources/js/Components/NavLink.vue

@@ -0,0 +1,15 @@
+<template>
+    <Header/>
+    <slot/>
+    <Footer/>
+</template>
+
+<script setup>
+import Header from "@/Layouts/Partials/Header.vue";
+import Footer from "@/Layouts/Partials/Footer.vue";
+
+</script>
+
+<style scoped>
+
+</style>

resources/js/Layouts/GuestLayout.vue

@@ -0,0 +1,11 @@
+<template>
+    <h3>Footer</h3>
+</template>
+
+<script>
+
+</script>
+
+<style scoped>
+
+</style>

resources/js/Layouts/Layout.vue

@@ -0,0 +1,22 @@
+<template>
+    <div style="display: flex; justify-content: flex-start; gap: 10px;">
+        <Link href="/" style="font-size: 20px;">Logo</Link>
+        <NavLink name="Home" component="Home" href="/" />
+        <NavLink name="About" component="About" href="/about" />
+        <NavLink name="Login" component="Login" href="/login" />
+        <form action="#">
+            <input type="text" placeholder="Search...">
+        </form>
+    </div>
+
+</template>
+
+<script setup>
+import NavLink from "@/Components/NavLink.vue";
+import {Link} from "@inertiajs/vue3";
+
+</script>
+
+<style scoped>
+
+</style>

resources/js/Layouts/Partials/Footer.vue

@@ -1,17 +1,15 @@
 <template>
-
-    <div style="display: flex; justify-content: flex-start; gap: 10px;">
-        <NavLink name="Home" component="Home" href="/home" />
-        <NavLink name="About" component="About" href="/about" />
-    </div>
-
     <br>
     <div>About page</div>
 </template>
 
-<script setup>
-import NavLink from "@/components/NavLink.vue";
 
+<script>
+import Layout from "@/Layouts/Layout.vue";
+
+export default {
+    layout: Layout,
+}
 
 </script>
 

resources/js/Layouts/Partials/Header.vue

@@ -1,25 +1,27 @@
 
 <template>
 
-    <div style="display: flex; justify-content: flex-start; gap: 10px;">
-        <NavLink name="Home" component="Home" href="/home" />
-        <NavLink name="About" component="About" href="/about" />
-    </div>
-
     <br>
     <div>Home Page</div>
     <br>
     <button @click.prevent="count--">-</button>
     <span>{{ count}}</span>
     <button @click.prevent="count++">+</button>
 
-
 </template>
 
+<script>
+import Layout from "@/Layouts/Layout.vue";
+
+export default {
+    layout: Layout,
+}
+
+</script>
+
 <script setup>
 
 import {ref} from "vue";
-import NavLink from "@/components/NavLink.vue";
 
 const count = ref(0);
 

resources/js/Pages/About.vue

@@ -0,0 +1,17 @@
+<template>
+    <br>
+    <div>Login page</div>
+</template>
+
+
+<script>
+import GuestLayout from '@/Layouts/GuestLayout.vue';
+export default {
+    layout: GuestLayout,
+}
+
+</script>
+
+<style scoped>
+
+</style>

resources/js/Pages/Home.vue

@@ -1,11 +1,14 @@
 import './bootstrap';
 import { createApp, h } from 'vue'
 import { createInertiaApp } from '@inertiajs/vue3'
+import Layout from "@/Layouts/Layout.vue";
 
 createInertiaApp({
     resolve: name => {
         const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
-        return pages[`./Pages/${name}.vue`]
+        let page = pages[`./Pages/${name}.vue`]
+        page.default.layout = page.default.layout ?? Layout
+        return page
     },
     setup({ el, App, props, plugin }) {
         createApp({ render: () => h(App, props) })

resources/js/Pages/Login.vue

@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
     <title>Laravel Inertia and Vue practice</title>
     @vite('resources/js/app.js')
+    @vite('resources/css/app.css')
     @inertiaHead
 </head>
 <body>

resources/js/app.js

@@ -3,20 +3,7 @@
 use App\Http\Controllers\HomeController;
 use Illuminate\Support\Facades\Route;
 
-/*
-|--------------------------------------------------------------------------
-| Web Routes
-|--------------------------------------------------------------------------
-|
-| Here is where you can register web routes for your application. These
-| routes are loaded by the RouteServiceProvider and all of them will
-| be assigned to the "web" middleware group. Make something great!
-|
-*/
 
-Route::get('/', function () {
-    return view('welcome');
-});
-
-Route::get('/home', [HomeController::class,'index'])->name('home.index');
+Route::get('/', [HomeController::class,'index'])->name('home.index');
 Route::get('/about', [HomeController::class,'about'])->name('home.about');
+Route::get('/login', [HomeController::class,'login'])->name('home.login');

resources/views/app.blade.php

@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    content: [
+        "./resources/**/*.blade.php",
+        "./resources/**/*.js",
+        "./resources/**/*.vue",
+    ],
+    theme: {
+        extend: {},
+    },
+    plugins: [],
+}

routes/web.php

@@ -4,10 +4,10 @@ import vue from '@vitejs/plugin-vue'
 
 export default defineConfig({
     plugins: [
-        vue(),
         laravel({
             input: ['resources/css/app.css', 'resources/js/app.js'],
             refresh: true,
         }),
+        vue(),
     ],
 });