Momentum Layout

Momentum Layout provides a Vue 3 compiler macro to define persistent layouts for Inertia.js apps within <script setup>.

Installation

Install the package.

npm i momentum-layout

# or

yarn add momentum-layout

Then, register the plugin by importing it and pushing it to the plugins array in vite.config.ts

import { defineConfig } from "vite"
import inertiaLayout from "momentum-layout"

export default defineConfig({
  plugins: [
    vue(),
    inertiaLayout(),
  ],
})

TypeScript support

defineLayout is a compile-time macro. It's not an actual method that needs to be imported.

To make the TypeScript engine understand the macro, add momentum-layout/macro to the array types in tsconfig.json.

{
  "compilerOptions": {
    "types": [
      "vite/client",
      "momentum-layout/macro"
    ]
  }
}

Usage

Import the layout component, and pass it to the defineLayout hook.

<script setup>
import Layout from "@/layouts/guest.vue"

defineLayout(Layout)
</script>

<template>
  <H1>Welcome</H1>
  <p>Hello {{ user.name }}, welcome to your first Inertia app!</p>
</template>

You can also create more complex layout arrangements using nested layouts.

<script setup>
import MainLayout from "@/layouts/main.vue"
import SettingsLayout from "@/layouts/settings.vue"

defineLayout([MainLayout, SettingsLayout])
</script>

Advanced Inertia

Take your Inertia.js skills to the next level with my book Advanced Inertia. Learn advanced concepts and make apps with Laravel and Inertia.js a breeze to build and maintain.

Momentum

Momentum is a set of packages designed to improve your experience building Inertia-powered apps.

Modal — Build dynamic modal dialogs for Inertia apps
Preflight — Realtime backend-driven validation for Inertia apps
Paginator — Headless wrapper around Laravel Pagination
Trail — Frontend package to use Laravel routes with Inertia
Lock — Frontend package to use Laravel permissions with Inertia
Layout — Persistent layouts for Vue 3 apps
Vite Plugin Watch — Vite plugin to run shell commands on file changes

Credits

License

The MIT License (MIT). Please see License File for more information.

lepikhinb/momentum-layout