Last active
September 17, 2022 13:55
-
-
Save sawirricardo/fe7159424e8f52e8030e4491d8493041 to your computer and use it in GitHub Desktop.
laravel inertia setup
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="{{ str_replace('_', '-', app()->getLocale()) }}" dir="ltr"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title inertia>{{ config('app.name', 'Laravel') }}</title> | |
| <!-- Fonts --> | |
| <link rel="stylesheet" href="https://fonts.bunny.net/css2?family=Nunito:wght@400;600;700&display=swap"> | |
| <!-- Scripts --> | |
| @routes | |
| @vite('resources/js/app.js') | |
| @inertiaHead | |
| </head> | |
| <body class="font-sans antialiased"> | |
| @inertia | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @tailwind base; | |
| @tailwind components; | |
| @tailwind utilities; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import "./bootstrap"; | |
| import "../css/app.css"; | |
| import { createApp, h } from "vue"; | |
| import { createInertiaApp, Head, Link } from "@inertiajs/inertia-vue3"; | |
| import { InertiaProgress } from "@inertiajs/progress"; | |
| import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers"; | |
| import { ZiggyVue } from "../../vendor/tightenco/ziggy/dist/vue.m"; | |
| import { i18nVue } from "laravel-vue-i18n"; | |
| import BaseLink from "@/Components/BaseLink.vue"; | |
| const appName = | |
| window.document.getElementsByTagName("title")[0]?.innerText || "MyWeb"; | |
| createInertiaApp({ | |
| title: (title) => `${title} - ${appName}`, | |
| resolve: (name) => | |
| resolvePageComponent( | |
| `./Pages/${name}.vue`, | |
| import.meta.glob("./Pages/**/*.vue") | |
| ), | |
| setup({ el, app, props, plugin }) { | |
| return createApp({ render: () => h(app, props) }) | |
| .use(i18nVue, { | |
| resolve: async (lang) => { | |
| const langs = import.meta.glob("../../lang/*.json"); | |
| return await langs[`../../lang/${lang}.json`](); | |
| }, | |
| }) | |
| .use(plugin) | |
| .use(ZiggyVue, Ziggy) | |
| .component("Link", BaseLink) | |
| .component("Head", Head) | |
| .mount(el); | |
| }, | |
| }); | |
| InertiaProgress.init({ color: "#4B5563" }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| php artisan session:table; | |
| php artisan cache:table; | |
| php artisan notifications:table; | |
| php artisan queue:table; | |
| php artisan storage:link; | |
| php artisan queue:batches-table; | |
| composer require tightenco/ziggy; | |
| composer require inertiajs/inertia-laravel; | |
| php artisan inertia:middleware; | |
| composer require laravel/sanctum; | |
| php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider"; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| namespace App\Http\Middleware; | |
| use Closure; | |
| use Illuminate\Http\Request; | |
| class EnableSsrMiddleware | |
| { | |
| protected $expect = [ | |
| 'app/*', | |
| ]; | |
| public function handle(Request $request, Closure $next) | |
| { | |
| config()->set('inertia.ssr.enabled', ! $request->is($this->expect)); | |
| return $next($request); | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| npm install vue@latest; | |
| npm install @vue/server-renderer; | |
| npm install -D tailwindcss postcss autoprefixer; | |
| npm install -D @tailwindcss/forms; | |
| npm install -D @tailwindcss/typography; | |
| npm install -D @vitejs/plugin-vue; | |
| npm install @inertiajs/inertia; | |
| npm install @inertiajs/inertia-vue3; | |
| npm install @inertiajs/progress; | |
| npm install @inertiajs/server; | |
| npm install @headlessui/vue; | |
| npm install @heroicons/vue; | |
| npx tailwindcss init -p; | |
| npm install laravel-vue-i18n; | |
| npm install momentum-paginator; | |
| npm install momentum-modal; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { createSSRApp, h } from "vue"; | |
| import { renderToString } from "@vue/server-renderer"; | |
| import { createInertiaApp, Head, Link } from "@inertiajs/inertia-vue3"; | |
| import createServer from "@inertiajs/server"; | |
| import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers"; | |
| import { ZiggyVue } from "../../vendor/tightenco/ziggy/dist/vue.m"; | |
| import { i18nVue } from "laravel-vue-i18n"; | |
| const appName = "MyWeb"; | |
| createServer((page) => | |
| createInertiaApp({ | |
| page, | |
| render: renderToString, | |
| title: (title) => `${title} - ${appName}`, | |
| resolve: (name) => | |
| resolvePageComponent( | |
| `./Pages/${name}.vue`, | |
| import.meta.glob("./Pages/**/*.vue") | |
| ), | |
| setup({ app, props, plugin }) { | |
| return createSSRApp({ render: () => h(app, props) }) | |
| .use(i18nVue, { | |
| lang: "pt", | |
| resolve: (lang) => { | |
| const langs = import.meta.globEager( | |
| "../../lang/*.json" | |
| ); | |
| return langs[`../../lang/${lang}.json`].default; | |
| }, | |
| }) | |
| .use(plugin) | |
| .component("Head", Head) | |
| .component("Link", Link) | |
| .use(ZiggyVue, { | |
| ...page.props.ziggy, | |
| location: new URL(page.props.ziggy.location), | |
| }); | |
| }, | |
| }) | |
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const defaultTheme = require("tailwindcss/defaultTheme"); | |
| const colors = require("tailwindcss/colors"); | |
| /** @type {import('tailwindcss').Config} */ | |
| module.exports = { | |
| content: [ | |
| "./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php", | |
| "./storage/framework/views/*.php", | |
| "./resources/views/**/*.blade.php", | |
| "./resources/js/**/*.vue", | |
| ], | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| fontFamily: { | |
| sans: ["Nunito", ...defaultTheme.fontFamily.sans], | |
| }, | |
| colors: { | |
| danger: colors.rose, | |
| primary: colors.blue, | |
| success: colors.green, | |
| warning: colors.yellow, | |
| }, | |
| }, | |
| }, | |
| plugins: [ | |
| require("@tailwindcss/forms"), | |
| require("@tailwindcss/typography"), | |
| ], | |
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import fs from "fs"; | |
| import { homedir } from "os"; | |
| import { resolve } from "path"; | |
| import { defineConfig } from "vite"; | |
| import laravel from "laravel-vite-plugin"; | |
| import vue from "@vitejs/plugin-vue"; | |
| import i18n from "laravel-vue-i18n/vite"; | |
| let host = "web.dev.test"; | |
| export default defineConfig({ | |
| plugins: [ | |
| laravel({ | |
| input: "resources/js/app.js", | |
| ssr: "resources/js/ssr.js", | |
| refresh: true, | |
| }), | |
| vue({ | |
| template: { | |
| transformAssetUrls: { | |
| base: null, | |
| includeAbsolute: false, | |
| }, | |
| }, | |
| }), | |
| i18n(), | |
| ], | |
| ssr: { | |
| noExternal: ["@inertiajs/server"], | |
| }, | |
| server: detectServerConfig(host), | |
| }); | |
| function detectServerConfig(host) { | |
| let keyPath = resolve(homedir(), `.config/valet/Certificates/${host}.key`); | |
| let certificatePath = resolve( | |
| homedir(), | |
| `.config/valet/Certificates/${host}.crt` | |
| ); | |
| if (!fs.existsSync(keyPath)) { | |
| return {}; | |
| } | |
| if (!fs.existsSync(certificatePath)) { | |
| return {}; | |
| } | |
| return { | |
| hmr: { host }, | |
| host, | |
| https: { | |
| key: fs.readFileSync(keyPath), | |
| cert: fs.readFileSync(certificatePath), | |
| }, | |
| }; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment