Client-side Setup

This guide assumes you've already read the Project Structure Basics.

This document will guide you through the setup of the Vue framework adapter.

Preperation

1. In the project root, rename vite.config.js to vite.config.ts.
2. In the project root, create a tsconfig.json file.
3. Delete the resources/js directory.
4. Create the resources/application directory.
5. Create the resources/pages directory.

Installation

Install the Inertia.js-Revamped Vue framework adapter:

npm

npm install --save-dev @inertiajs-revamped/vue

pnpm

pnpm add -D @inertiajs-revamped/vue

yarn

yarn add -D @inertiajs-revamped/vue

bun

bun add -D @inertiajs-revamped/vue

Configuration

Setup package.json

The following dependencies should be included in the package.json setup.

Server-side Rendering (SSR)

Update the build command, to include client-side and server-side bundles (optional).

package.json

{
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build", 
    "build": "vite build && vite build --ssr", 
    "preview": "vite preview"
  },
  "devDependencies": {
    "@inertiajs-revamped/vue": "^0.0.7",
    "@types/node": "^20.14.1",
    "@vitejs/plugin-vue": "^5.0.5",
    "@vue/server-renderer": "^3.4.27",
    "axios": "^1.7.2",
    "laravel-vite-plugin": "^1.0.4",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "typescript": "^5.4.5",
    "vite": "^5.2.12",
    "vue": "^3.4.27"
  }
}

Setup tsconfig.json

The following tsconfig.json setup can be used as a starting point.

tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "strict": true,
    "jsx": "preserve",
    "jsxImportSource": "vue",
    "skipLibCheck": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "verbatimModuleSyntax": true,
    "allowSyntheticDefaultImports": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "types": ["node", "vite/client"]
  },
  "include": ["resources/**/*"],
  "exclude": ["public", "node_modules", "vendor"]
}

Setup vite.config.ts

Add the code below to the vite.config.ts to provide a minimum configuration.

vite.config.ts

import vue from '@vitejs/plugin-vue'
import laravel from 'laravel-vite-plugin'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    laravel({
      /** Main entrypoint */
      input: ['resources/application/main.ts'],
      /** SSR entrypoint (optional) */
      ssr: 'resources/application/ssr.ts',
      refresh: true,
    }),
    vue(),
  ]
})

Initialize the main entry

Create resources/application/main.ts and initialize the main entry-point (no SSR).

main.ts

import { createInertiaApp, resolvePageComponent } from '@inertiajs-revamped/vue'
import { createProgress } from '@inertiajs-revamped/vue/progress'
import { createApp, h } from 'vue'

createInertiaApp({
  title: (title) => `${title} - Starter kit`,
  resolve: (name) =>
    resolvePageComponent(
      `../pages/${name}.vue`,
      import.meta.glob('../pages/**/*.vue')
    ),
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .mount(el!)
  },
  progress: () =>
    createProgress({
      color: '#4B5563',
    }),
})

Server-side Rendering (SSR)

Initialize the SSR entry

Create resources/application/ssr.ts and initialize the server entry-point.

ssr.ts

import { createInertiaApp, resolvePageComponent } from '@inertiajs-revamped/vue'
import { createServer } from '@inertiajs-revamped/vue/server'
import { renderToString } from '@vue/server-renderer'
import { createSSRApp, h } from 'vue'

createServer((page) =>
  createInertiaApp({
    page,
    title: (title) => `${title} - Starter kit`,
    render: renderToString,
    resolve: (name) =>
      resolvePageComponent(
        `../pages/${name}.vue`,
        import.meta.glob('../pages/**/*.vue')
      ),
    setup({ App, props, plugin }) {
      return createSSRApp({
        render: () => h(App, props),
      }).use(plugin)
    },
  })
)

Start development

Create a page component

Create the file resources/pages/index.vue and add the following content:

index.vue

<template>
  <h1>Hello world!</h1>
</template>

Read more about the Pages Basics.

Create a route

When using Inertia, all of your application's routes are defined server-side. Without the need of creating a Controller, add a route to routes/web.php.

use Inertia\Inertia;

Route::get('/', function () {
  return Inertia('index');
});

Start the development server

Run the Vite dev server with the dev command and open the application in your browser.

npm

npm run dev

pnpm

pnpm run dev

yarn

yarn run dev

bun

bun run dev

# outputs
VITE v5.2.9  ready in 1487 ms

➜  Local:   http://localhost:5173/
➜  Network: use --host to expose
➜  press h to show help

What's next?

• To learn about our project structure convention, read the basics.

Your contributions are welcome! Please read our contributing guide for more information.