Using Vuetify with InertiaJs breaks SSR

[lakhbawa]

Hi Everyone, It has been more than 3 months, and I am still struggling with the issue, Its preventing me to implementing Tree Shaking in Laravel, Vuejs, InertiaJs, and Vuetify Application

I am using SSR Rendering, on frontend, application is rendering properly but SSR rendering is not working correctly, Looks like Vite is trying to execute CSS file on SSR even when its not supposed to.

Please help me to figure out the issue

vite.config.js

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

export default defineConfig({
    server: {
        noExternal: ['vuetify'],
    },
    plugins: [
        laravel({
            input: 'resources/js/app.js',
            ssr: 'resources/js/ssr.js',
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    resolve: {
        alias: {
            '@': '/resources/js', // Optional: Add an alias for easier imports
        },
    },
    define: {
        global: 'window',
    }
});

SSR.JS

import {createSSRApp, h} from 'vue';
import {renderToString} from '@vue/server-renderer';
import {createInertiaApp} from '@inertiajs/vue3';
import createServer from '@inertiajs/vue3/server';
import {resolvePageComponent} from 'laravel-vite-plugin/inertia-helpers';
import {ZiggyVue} from '../../vendor/tightenco/ziggy/dist/vue.m';
import vuetify from './plugins/vuetify'; // Import Vuetify
const appName = import.meta.env.APP_BRAND_NAME || 'MockReady';

import * as Sentry from "@sentry/vue";

Sentry.init({
  dsn: import.meta.env.VITE_SENTRY_DSN_PUBLIC,
});

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(plugin)
                .use(ZiggyVue, {
                    ...page.props.ziggy,
                    location: new URL(page.props.ziggy.location),
                }).use(vuetify);;
        },
    })
);

app.js

import 'vuetify/styles';
import './bootstrap';
import '../css/app.css';

import {createApp, h} from 'vue';
import {createInertiaApp} from '@inertiajs/vue3';
import {resolvePageComponent} from 'laravel-vite-plugin/inertia-helpers';
import {ZiggyVue} from '../../vendor/tightenco/ziggy/dist/vue.m';
import vuetify from './plugins/vuetify'; // Import Vuetify
const appName = import.meta.env.APP_BRAND_NAME || 'MockReady';

import * as Sentry from "@sentry/vue";

Sentry.init({
  dsn: import.meta.env.VITE_SENTRY_DSN_PUBLIC,
});



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(plugin)
            .use(ZiggyVue, Ziggy).use(vuetify)
            .mount(el);
    },
    progress: {
        color: '#4B5563',
    },
});

inertia.php

<?php

return [
    'ssr' => [

        'enabled' => true,

        'url' => 'job:13714',

        // 'bundle' => base_path('bootstrap/ssr/ssr.mjs'),

    ],
];

docker-compose.yml (Removed unnecessary containers)

version: "3"
services:
  #PHP Service
  app:
    depends_on:
      - db
    image: lakhveerbawa/phpdock:arm
    command:
      - php-fpm
    expose:
      - 9000:9000
      - 9003:9003
    restart: unless-stopped
    tty: true
    environment:
      SERVICE_NAME: app
      SERVICE_TAGS: dev
    working_dir: /var/www
    volumes:
      - ./:/var/www
      - ./docker/config/php/local.ini:/usr/local/etc/php/conf.d/local.ini
    networks:
      - app-network

  job:
    depends_on:
      - db
    build:
      context: ./docker/job
      dockerfile: Dockerfile
    expose:
      - 9000:9000
      - 13714:13714
    restart: unless-stopped
    tty: true
    environment:
      SERVICE_NAME: job
      SERVICE_TAGS: dev
    working_dir: /var/www
    volumes:
      - ./:/var/www
      - ./docker/config/php/local.ini:/usr/local/etc/php/conf.d/local.ini
      - ./docker/config/supervisor/conf.d:/etc/supervisor/conf.d
    networks:
      - app-network
  #Nginx Service
  nginx:
    image: nginx:alpine
    restart: unless-stopped
    tty: true
    ports:
      - "2000:80"
      - "2001:443"
    volumes:
      - ./:/var/www
      - ./docker/config/nginx/conf.d.local/:/etc/nginx/conf.d/
      - ./docker/config/nginx/conf.d.local/ssl:/etc/nginx/ssl/
    networks:
      - app-network
#Docker Networks
networks:
  app-network:
    driver: bridge
#Volumes
volumes:
  dbdata:
    driver: local
  redisdata:
    driver: local

#  default:
#    external:
#      name: nginx-proxy

[craigrileyuk]

You're going to need to post the full error message too rather than just your interpretation of it.

It's extremely unlikely to be Inertia causing this though, since it just defers to Vue's SSR engine with a few settings tweaked.