koramit/laravel-7-vue-inertiajs-tailwindcss.md

## laravel-7-vue-inertiajs-tailwindcss.md

      
    Raw
  

              laravel-7-vue-inertiajs-tailwindcss.md
            
          
    Laravel + Vuejs + Inertiajs + Tailwindcss Config

Setup dependencies

from Laravel fresh install
Laravel packages

# free Login/Register controller
composer require laravel/ui
php artisan ui vue --auth

# inertia
composer require inertiajs/inertia-laravel

# detect user agent
composer require jenssegers/agent

# debugbar
composer require barryvdh/laravel-debugbar --dev

Frontend Packages

remove unuse packages from package.json (delete comment lines)
{
    "devDependencies": {
        "axios": "^0.19",
        // "bootstrap": "^4.0.0",
        "cross-env": "^7.0",
        // "jquery": "^3.2",
        "laravel-mix": "^5.0.1",
        "lodash": "^4.17.13",
        // "popper.js": "^1.12",
        "resolve-url-loader": "^2.3.1",
        // "sass": "^1.20.1",
        // "sass-loader": "^8.0.0",
        "vue": "^2.5.17",
        "vue-template-compiler": "^2.6.10"
    }
}
# css processing
npm i postcss-import --save-dev
npm i postcss-nesting --save-dev
npm i @fullhuman/postcss-purgecss --save-dev

# tailwndcss
npm i tailwindcss --save-dev
npx tailwindcss init

# inertiajs
npm i @inertiajs/inertia --save-dev
npm i @inertiajs/inertia-vue --save-dev

# install the rest packages
npm i
Setup backend Inertia apdater

resources/views/app.blade.php
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <link href="{{ mix('/css/app.css') }}" rel="stylesheet" />
    <script src="{{ mix('/js/app.js') }}" defer></script>
  </head>
  <body>
    @inertia
  </body>
</html>
app/Providers/AppServiceProvider.php
use Inertia\Inertia;

class AppServiceProvider extends ServiceProvider
{
    public function boot()
    {
      Inertia::version(function () {
          return md5_file(public_path('mix-manifest.json'));
      });
    }
}
Setup frontend build system

resources/js/app.js
window.axios = require("axios")

window.axios.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest"

import Vue from "vue"
import { InertiaApp } from "@inertiajs/inertia-vue"

Vue.config.productionTip = false
Vue.use(InertiaApp)

const app = document.getElementById("app")

new Vue({
    render: h => h(InertiaApp, {
        props: {
            initialPage: JSON.parse(app.dataset.page),
            resolveComponent: name => require(`@/Pages/${name}`).default,
        },
    }),
}).$mount(app)
resources/css/app.css
/* Reset */
@import "tailwindcss/base";

/* Components */
@import "tailwindcss/components";

/* Utilities */
@import "tailwindcss/utilities";
webpack.mix.js
const cssImport = require("postcss-import")
const cssNesting = require("postcss-nesting")
const mix = require("laravel-mix")
const path = require("path")
const purgecss = require("@fullhuman/postcss-purgecss")
const tailwindcss = require("tailwindcss")

mix .js("resources/js/app.js", "public/js/app.js")
    .postCss("resources/css/app.css", "public/css/app.css")
    .options({
        postCss: [
            cssImport(),
            cssNesting(),
            tailwindcss("tailwind.config.js"),
            ...mix.inProduction() ? [
                purgecss({
                    content: ["./resources/views/**/*.blade.php", "./resources/js/**/*.vue"],
                    defaultExtractor: content => content.match(/[\w-/:.]+(?<!:)/g) || [],
                    whitelistPatternsChildren: [/nprogress/],
                }),
            ] : [],
        ],
    })
    .webpackConfig({
        resolve: {
            alias: {
            vue$: "vue/dist/vue.runtime.esm.js",
            "@": path.resolve("resources/js"),
            },
        },
    })
    .version()
    .sourceMaps()
Clean up unuse file


Laravel auto gen for auth

web.php => remove auth route
app/Http/Controllers/HomeController.php => remove file
resources/views/ => remove all files and folders
resources/ => remove sass folder
reources/js/ => remove bootstrap.js


Setup git repository

.gitignore
# add these lines

/public/js
/public/css
/public/mix-manifest.json

# init git
git init
git add .
git commit -m "first commit"

# create branch dev
git checkout -b dev

# update master (include assests)
git checkout master

# remove these line from .gitignore
# /public/js
# /public/css
# /public/mix-manifest.json

git add .
git commit -m "include assests"
git checkout dev

# now start using dev as primary working branch
Test setup

routes/web.php
Route::get('/', function () {
    return Inertia\Inertia::render('Welcome');
});
resources/js/Pages/Welcome.vue
<template>
    <div class="bg-blue-200 w-full min-h-screen flex justify-center items-center text-xl text-white text-center">
        <h1>Laravel + Vue + InertiaJS + TailwindCSS</h1>
    </div>
</template>
<script>
export default {}
</script>
visit app url you should see content styled properly.