Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

P-James's avatar
Level 12

Inertia SSR with Vite AND Ziggy (Vue)

Has anyone got Ziggy working with Inertia SSR and Vite? I've got it working fine without trying to add ziggy, but when I try to start the SSR server after adding it, I get Error: Cannot find module 'ziggy'

My vite.config.ts and ssr.js are below:

// vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import laravel from 'vite-plugin-laravel'
import tailwindcss from 'tailwindcss'
import autoprefixer from 'autoprefixer'
import Components from 'unplugin-vue-components/vite'
import path from 'path'

export default defineConfig({
    plugins: [
        vue(),
        laravel({
            postcss: [autoprefixer(), tailwindcss()]
        }),
        Components({
            dirs: ['resources/js']
        })
    ],
    resolve: {
        alias: {
            'ziggy': path.resolve(__dirname, 'vendor/tightenco/ziggy/src/js')
        }
    },
    build: {
        rollupOptions: {
            external: 'ziggy'
        }
    }
})
// ssr.js

import { createSSRApp, h } from 'vue'
import { renderToString } from '@vue/server-renderer'
import { createInertiaApp } from '@inertiajs/inertia-vue3'
import createServer from '@inertiajs/server'
import route from 'ziggy'

let asyncViews = () => {
  return import.meta.glob('./Pages/**/*.vue');
}

createServer((page) => createInertiaApp({
  page,
  render: renderToString,
  resolve: async (name) => {
    if (import.meta.env.DEV) {
      return (await import(`./Pages/${name}.vue`)).default;
    } else {
      let pages = asyncViews();
      const importPage = pages[`./Pages/${name}.vue`];
      return importPage().then(module => module.default);
    }
  },
  setup({ app, props, plugin }) {
    const Ziggy = {
      // Pull the Ziggy config off of the props.
      ...props.initialPage.props.ziggy,
      // Build the location, since there is
      // no window.location in Node.
      location: new URL(props.initialPage.props.ziggy.url)
    }

    return createSSRApp({
      render: () => h(app, props),
    }).use(plugin)
      .mixin({
        methods: {
          route: (name, params, absolute, config = Ziggy) => route(name, params, absolute, config),
        },
      })
  },
}))
// package.json

    "scripts": {
        "dev": "vite",
        "dev:ssr": "node public/build/ssr.js",
        "development": "vite",
        "build": "vite build",
        "build:ssr": "vite build --ssr",
    },
0 likes
2 replies

Please or to participate in this conversation.