vue.js - Vite, VueJs, Inertia, SSR and dynamic javascript package loading - Stack Overflow

admin管理员组

文章数量:1130349

I am using

• Laravel 10
• @inertiajs/[email protected]
• inertiajs/inertia-laravel v2.0.0 The Laravel adapter for Inertia.js.
• Vite v5.4.11
• @vitejs/[email protected]
• @splidejs/[email protected]

I am trying to achieve the following:

I want to use ssr and have a vue component that uses the SplideJS - vue package. This package shouldn't load with ssr, since it dynamically adapts to screensizes etc. I just want it to skip loading in ssr and beeing hydrated only clientside.

My attempts:

"ignoring it in the vite.config.mjs via "external" and "isCustomElement"

import {defineConfig} from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
import {fileURLToPath, URL} from 'url';

import vuetify from "vite-plugin-vuetify";

export default defineConfig({

    plugins: [
        laravel({
            input: ['resources/js/main.js'],
            ssr: 'resources/js/ssr.js',
            refresh: true,
        }),
        vue({
            template: {
                compilerOptions: {
                    isCustomElement: (tag) => tag.includes('Splide'),
                }
            },
        }),
        vuetify({
            autoImport: true,
        }),
    ],
    ssr:
        {
            noExternal: ['@inertiajs/vue3/server'],
            external: ['@splidejs/vue-splide'],
        },
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./resources/js', import.meta.url)),
        },
        resolve: {
            dedupe: [
                'vue'
            ]
        },
    },

});

My main.js file

import { createApp, h } from "vue";
import { createInertiaApp, Link, Head } from "@inertiajs/vue3";
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { ZiggyVue } from '../../vendor/tightenco/ziggy';
import { createPinia } from 'pinia';
import piniaPluginPersistedState from "pinia-plugin-persistedstate";

import '../css/app.css';
import VueSplide from '@splidejs/vue-splide';
import '@splidejs/splide/css';
const appName = "SSR Test";
const pinia = createPinia();
pinia.use(piniaPluginPersistedState);

createInertiaApp({
    title: (title) => `${title} | ${appName}`,
    resolve: (name) =>
        resolvePageComponent(
            `./Pages/${name}.vue`,
            import.meta.glob('./Pages/**/*.vue')
        ),
    setup({ el, App, props, plugin }) {
        createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(ZiggyVue)
            .use(pinia)
            .use(VueSplide)
            ponent("Link", Link)
            ponent("Head", Head)
            .mount(el);
    },
    progress: {
        color: '#000000',
    },
});

My ssr.js

import {createInertiaApp, Head, Link} from '@inertiajs/vue3';
import createServer from '@inertiajs/vue3/server'
import { renderToString } from '@vue/server-renderer';
import { createSSRApp, h } from 'vue';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { createPinia } from 'pinia';
import { ZiggyVue } from 'ziggy-js';

const pinia = createPinia();

createServer((page) =>
    createInertiaApp({
        page,
        render: renderToString,
        title: (title) => `testtitle`,
        resolve: (name) =>
            resolvePageComponent(
                `./Pages/${name}.vue`,
                import.meta.glob('./Pages/**/*.vue'),
            ),
        setup({ App, props, plugin }) {

            return createSSRApp({
                render: () => h(App, props),
            })
                .use(plugin)
                .use(pinia)
                .use(ZiggyVue, {
                    ...page.props.ziggy,
                    location: new URL(page.props.ziggy.location),
                })
                ponent("Link", Link)
                ponent("Head", Head);
        },
    }),
);

In my component I tried:

<template>
    <div v-if="isClient">
        <component :is="splideComponent" :options="options" aria-label="Unser Kundenservice"
        >
            <SplideSlide>
                Slide 1
            </SplideSlide>
            <SplideSlide>
                Slide 2
            </SplideSlide>
            <SplideSlide>
                Slide 3
            </SplideSlide>
        </component>
    </div>
</template>

<script setup>
import ContentBaseWhite from '@/Shared/Components/c-content-base-white.vue';
import {onMounted, ref} from "vue";

// Splide options
// only true in client
const isClient = ref(false);

// dynamic component
const splideComponent = ref(null);

// after dom is mounted, import splide component
onMounted(() => {
    isClient.value = true;
    import('@splidejs/vue-splide').then(module => {
        splideComponent.value = module.Splide;
    });

});

const options = ref({
   options ...
});

When I start the inertia-ssr server via php artisan inertia:start-ssr no error is received except in my firefox console:

[Vue warn]: Vue received a Component that was made a reactive object. This can lead to unnecessary performance overhead and should be avoided by marking the component with `markRaw` or using `shallowRef` instead of `ref`. 
Component that was made reactive:  
Object { name: "Splide", emits: (27) […], components: {…}, props: {…}, setup: setup(props, context), render: _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options)
 }
 
  at <CCustomerService> 
  at <BasicStoreLayout> 

I am building via "build": "vite build && vite build --ssr".

Everything works fine without ssr. Right now it is sliding too, but isn't responsive at all + the error is confusing me. I copied a lot of code from a fresh laravel project but unfortunately there's not a lot of docu about "disable packages for ssr"

Any ideas what's the correct way to make this work?

I am using

• Laravel 10
• @inertiajs/[email protected]
• inertiajs/inertia-laravel v2.0.0 The Laravel adapter for Inertia.js.
• Vite v5.4.11
• @vitejs/[email protected]
• @splidejs/[email protected]

I am trying to achieve the following:

I want to use ssr and have a vue component that uses the SplideJS - vue package. This package shouldn't load with ssr, since it dynamically adapts to screensizes etc. I just want it to skip loading in ssr and beeing hydrated only clientside.

My attempts:

"ignoring it in the vite.config.mjs via "external" and "isCustomElement"

import {defineConfig} from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
import {fileURLToPath, URL} from 'url';

import vuetify from "vite-plugin-vuetify";

export default defineConfig({

    plugins: [
        laravel({
            input: ['resources/js/main.js'],
            ssr: 'resources/js/ssr.js',
            refresh: true,
        }),
        vue({
            template: {
                compilerOptions: {
                    isCustomElement: (tag) => tag.includes('Splide'),
                }
            },
        }),
        vuetify({
            autoImport: true,
        }),
    ],
    ssr:
        {
            noExternal: ['@inertiajs/vue3/server'],
            external: ['@splidejs/vue-splide'],
        },
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./resources/js', import.meta.url)),
        },
        resolve: {
            dedupe: [
                'vue'
            ]
        },
    },

});

My main.js file

import { createApp, h } from "vue";
import { createInertiaApp, Link, Head } from "@inertiajs/vue3";
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { ZiggyVue } from '../../vendor/tightenco/ziggy';
import { createPinia } from 'pinia';
import piniaPluginPersistedState from "pinia-plugin-persistedstate";

import '../css/app.css';
import VueSplide from '@splidejs/vue-splide';
import '@splidejs/splide/css';
const appName = "SSR Test";
const pinia = createPinia();
pinia.use(piniaPluginPersistedState);

createInertiaApp({
    title: (title) => `${title} | ${appName}`,
    resolve: (name) =>
        resolvePageComponent(
            `./Pages/${name}.vue`,
            import.meta.glob('./Pages/**/*.vue')
        ),
    setup({ el, App, props, plugin }) {
        createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(ZiggyVue)
            .use(pinia)
            .use(VueSplide)
            .component("Link", Link)
            .component("Head", Head)
            .mount(el);
    },
    progress: {
        color: '#000000',
    },
});

My ssr.js

import {createInertiaApp, Head, Link} from '@inertiajs/vue3';
import createServer from '@inertiajs/vue3/server'
import { renderToString } from '@vue/server-renderer';
import { createSSRApp, h } from 'vue';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { createPinia } from 'pinia';
import { ZiggyVue } from 'ziggy-js';

const pinia = createPinia();

createServer((page) =>
    createInertiaApp({
        page,
        render: renderToString,
        title: (title) => `testtitle`,
        resolve: (name) =>
            resolvePageComponent(
                `./Pages/${name}.vue`,
                import.meta.glob('./Pages/**/*.vue'),
            ),
        setup({ App, props, plugin }) {

            return createSSRApp({
                render: () => h(App, props),
            })
                .use(plugin)
                .use(pinia)
                .use(ZiggyVue, {
                    ...page.props.ziggy,
                    location: new URL(page.props.ziggy.location),
                })
                .component("Link", Link)
                .component("Head", Head);
        },
    }),
);

In my component I tried:

<template>
    <div v-if="isClient">
        <component :is="splideComponent" :options="options" aria-label="Unser Kundenservice"
        >
            <SplideSlide>
                Slide 1
            </SplideSlide>
            <SplideSlide>
                Slide 2
            </SplideSlide>
            <SplideSlide>
                Slide 3
            </SplideSlide>
        </component>
    </div>
</template>

<script setup>
import ContentBaseWhite from '@/Shared/Components/c-content-base-white.vue';
import {onMounted, ref} from "vue";

// Splide options
// only true in client
const isClient = ref(false);

// dynamic component
const splideComponent = ref(null);

// after dom is mounted, import splide component
onMounted(() => {
    isClient.value = true;
    import('@splidejs/vue-splide').then(module => {
        splideComponent.value = module.Splide;
    });

});

const options = ref({
   options ...
});

When I start the inertia-ssr server via php artisan inertia:start-ssr no error is received except in my firefox console:

[Vue warn]: Vue received a Component that was made a reactive object. This can lead to unnecessary performance overhead and should be avoided by marking the component with `markRaw` or using `shallowRef` instead of `ref`. 
Component that was made reactive:  
Object { name: "Splide", emits: (27) […], components: {…}, props: {…}, setup: setup(props, context), render: _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options)
 }
 
  at <CCustomerService> 
  at <BasicStoreLayout> 

I am building via "build": "vite build && vite build --ssr".

Everything works fine without ssr. Right now it is sliding too, but isn't responsive at all + the error is confusing me. I copied a lot of code from a fresh laravel project but unfortunately there's not a lot of docu about "disable packages for ssr"

Any ideas what's the correct way to make this work?

• vue.js
• vite
• server-side-rendering
• inertiajs
• splidejs

Share Improve this question Follow edited Jan 21 at 8:41 dogma asked Jan 20 at 18:38 dogmadogma 6166 bronze badges 1

• 1 Try using shallowRef instead of ref in const splideComponent = ref(null);. Using ref will add reactivity to the component's properties (what the error warns about). With shallowRef, only the reference is reactive (changing from null to the component object triggers an update, but not changes to the object). – Moritz Ringler Commented Jan 20 at 22:24

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Solved it via:

 <div v-if="isClient" class="splide1">
        <component :is="splideComponent" :options="options"
        >
            <component :is="splideSlideComponent">
               Slide content..
            </component>
            <component :is="splideSlideComponent">
               Slide content..
            </component>
    </div>
</template>

<script setup>
import {onMounted, ref, shallowRef} from "vue";

const isClient = ref(false);

const splideComponent = shallowRef(null);
const splideSlideComponent = shallowRef(null);

onMounted(async () => {
    if (typeof window !== 'undefined') {
        const { Splide, SplideSlide } = await import('@splidejs/vue-splide'); // Beide Komponenten importieren
        splideComponent.value = Splide;
        splideSlideComponent.value = SplideSlide;
        isClient.value = true;
    }
});

const options = ref({
    perPage: 1,
});
</script>

I am using

• Laravel 10
• @inertiajs/[email protected]
• inertiajs/inertia-laravel v2.0.0 The Laravel adapter for Inertia.js.
• Vite v5.4.11
• @vitejs/[email protected]
• @splidejs/[email protected]

I am trying to achieve the following:

I want to use ssr and have a vue component that uses the SplideJS - vue package. This package shouldn't load with ssr, since it dynamically adapts to screensizes etc. I just want it to skip loading in ssr and beeing hydrated only clientside.

My attempts:

"ignoring it in the vite.config.mjs via "external" and "isCustomElement"

import {defineConfig} from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
import {fileURLToPath, URL} from 'url';

import vuetify from "vite-plugin-vuetify";

export default defineConfig({

    plugins: [
        laravel({
            input: ['resources/js/main.js'],
            ssr: 'resources/js/ssr.js',
            refresh: true,
        }),
        vue({
            template: {
                compilerOptions: {
                    isCustomElement: (tag) => tag.includes('Splide'),
                }
            },
        }),
        vuetify({
            autoImport: true,
        }),
    ],
    ssr:
        {
            noExternal: ['@inertiajs/vue3/server'],
            external: ['@splidejs/vue-splide'],
        },
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./resources/js', import.meta.url)),
        },
        resolve: {
            dedupe: [
                'vue'
            ]
        },
    },

});

My main.js file

import { createApp, h } from "vue";
import { createInertiaApp, Link, Head } from "@inertiajs/vue3";
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { ZiggyVue } from '../../vendor/tightenco/ziggy';
import { createPinia } from 'pinia';
import piniaPluginPersistedState from "pinia-plugin-persistedstate";

import '../css/app.css';
import VueSplide from '@splidejs/vue-splide';
import '@splidejs/splide/css';
const appName = "SSR Test";
const pinia = createPinia();
pinia.use(piniaPluginPersistedState);

createInertiaApp({
    title: (title) => `${title} | ${appName}`,
    resolve: (name) =>
        resolvePageComponent(
            `./Pages/${name}.vue`,
            import.meta.glob('./Pages/**/*.vue')
        ),
    setup({ el, App, props, plugin }) {
        createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(ZiggyVue)
            .use(pinia)
            .use(VueSplide)
            ponent("Link", Link)
            ponent("Head", Head)
            .mount(el);
    },
    progress: {
        color: '#000000',
    },
});

My ssr.js

import {createInertiaApp, Head, Link} from '@inertiajs/vue3';
import createServer from '@inertiajs/vue3/server'
import { renderToString } from '@vue/server-renderer';
import { createSSRApp, h } from 'vue';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { createPinia } from 'pinia';
import { ZiggyVue } from 'ziggy-js';

const pinia = createPinia();

createServer((page) =>
    createInertiaApp({
        page,
        render: renderToString,
        title: (title) => `testtitle`,
        resolve: (name) =>
            resolvePageComponent(
                `./Pages/${name}.vue`,
                import.meta.glob('./Pages/**/*.vue'),
            ),
        setup({ App, props, plugin }) {

            return createSSRApp({
                render: () => h(App, props),
            })
                .use(plugin)
                .use(pinia)
                .use(ZiggyVue, {
                    ...page.props.ziggy,
                    location: new URL(page.props.ziggy.location),
                })
                ponent("Link", Link)
                ponent("Head", Head);
        },
    }),
);

In my component I tried:

<template>
    <div v-if="isClient">
        <component :is="splideComponent" :options="options" aria-label="Unser Kundenservice"
        >
            <SplideSlide>
                Slide 1
            </SplideSlide>
            <SplideSlide>
                Slide 2
            </SplideSlide>
            <SplideSlide>
                Slide 3
            </SplideSlide>
        </component>
    </div>
</template>

<script setup>
import ContentBaseWhite from '@/Shared/Components/c-content-base-white.vue';
import {onMounted, ref} from "vue";

// Splide options
// only true in client
const isClient = ref(false);

// dynamic component
const splideComponent = ref(null);

// after dom is mounted, import splide component
onMounted(() => {
    isClient.value = true;
    import('@splidejs/vue-splide').then(module => {
        splideComponent.value = module.Splide;
    });

});

const options = ref({
   options ...
});

When I start the inertia-ssr server via php artisan inertia:start-ssr no error is received except in my firefox console:

[Vue warn]: Vue received a Component that was made a reactive object. This can lead to unnecessary performance overhead and should be avoided by marking the component with `markRaw` or using `shallowRef` instead of `ref`. 
Component that was made reactive:  
Object { name: "Splide", emits: (27) […], components: {…}, props: {…}, setup: setup(props, context), render: _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options)
 }
 
  at <CCustomerService> 
  at <BasicStoreLayout> 

I am building via "build": "vite build && vite build --ssr".

Everything works fine without ssr. Right now it is sliding too, but isn't responsive at all + the error is confusing me. I copied a lot of code from a fresh laravel project but unfortunately there's not a lot of docu about "disable packages for ssr"

Any ideas what's the correct way to make this work?

I am using

• Laravel 10
• @inertiajs/[email protected]
• inertiajs/inertia-laravel v2.0.0 The Laravel adapter for Inertia.js.
• Vite v5.4.11
• @vitejs/[email protected]
• @splidejs/[email protected]

I am trying to achieve the following:

I want to use ssr and have a vue component that uses the SplideJS - vue package. This package shouldn't load with ssr, since it dynamically adapts to screensizes etc. I just want it to skip loading in ssr and beeing hydrated only clientside.

My attempts:

"ignoring it in the vite.config.mjs via "external" and "isCustomElement"

import {defineConfig} from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
import {fileURLToPath, URL} from 'url';

import vuetify from "vite-plugin-vuetify";

export default defineConfig({

    plugins: [
        laravel({
            input: ['resources/js/main.js'],
            ssr: 'resources/js/ssr.js',
            refresh: true,
        }),
        vue({
            template: {
                compilerOptions: {
                    isCustomElement: (tag) => tag.includes('Splide'),
                }
            },
        }),
        vuetify({
            autoImport: true,
        }),
    ],
    ssr:
        {
            noExternal: ['@inertiajs/vue3/server'],
            external: ['@splidejs/vue-splide'],
        },
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./resources/js', import.meta.url)),
        },
        resolve: {
            dedupe: [
                'vue'
            ]
        },
    },

});

My main.js file

import { createApp, h } from "vue";
import { createInertiaApp, Link, Head } from "@inertiajs/vue3";
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { ZiggyVue } from '../../vendor/tightenco/ziggy';
import { createPinia } from 'pinia';
import piniaPluginPersistedState from "pinia-plugin-persistedstate";

import '../css/app.css';
import VueSplide from '@splidejs/vue-splide';
import '@splidejs/splide/css';
const appName = "SSR Test";
const pinia = createPinia();
pinia.use(piniaPluginPersistedState);

createInertiaApp({
    title: (title) => `${title} | ${appName}`,
    resolve: (name) =>
        resolvePageComponent(
            `./Pages/${name}.vue`,
            import.meta.glob('./Pages/**/*.vue')
        ),
    setup({ el, App, props, plugin }) {
        createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(ZiggyVue)
            .use(pinia)
            .use(VueSplide)
            .component("Link", Link)
            .component("Head", Head)
            .mount(el);
    },
    progress: {
        color: '#000000',
    },
});

My ssr.js

import {createInertiaApp, Head, Link} from '@inertiajs/vue3';
import createServer from '@inertiajs/vue3/server'
import { renderToString } from '@vue/server-renderer';
import { createSSRApp, h } from 'vue';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { createPinia } from 'pinia';
import { ZiggyVue } from 'ziggy-js';

const pinia = createPinia();

createServer((page) =>
    createInertiaApp({
        page,
        render: renderToString,
        title: (title) => `testtitle`,
        resolve: (name) =>
            resolvePageComponent(
                `./Pages/${name}.vue`,
                import.meta.glob('./Pages/**/*.vue'),
            ),
        setup({ App, props, plugin }) {

            return createSSRApp({
                render: () => h(App, props),
            })
                .use(plugin)
                .use(pinia)
                .use(ZiggyVue, {
                    ...page.props.ziggy,
                    location: new URL(page.props.ziggy.location),
                })
                .component("Link", Link)
                .component("Head", Head);
        },
    }),
);

In my component I tried:

<template>
    <div v-if="isClient">
        <component :is="splideComponent" :options="options" aria-label="Unser Kundenservice"
        >
            <SplideSlide>
                Slide 1
            </SplideSlide>
            <SplideSlide>
                Slide 2
            </SplideSlide>
            <SplideSlide>
                Slide 3
            </SplideSlide>
        </component>
    </div>
</template>

<script setup>
import ContentBaseWhite from '@/Shared/Components/c-content-base-white.vue';
import {onMounted, ref} from "vue";

// Splide options
// only true in client
const isClient = ref(false);

// dynamic component
const splideComponent = ref(null);

// after dom is mounted, import splide component
onMounted(() => {
    isClient.value = true;
    import('@splidejs/vue-splide').then(module => {
        splideComponent.value = module.Splide;
    });

});

const options = ref({
   options ...
});

When I start the inertia-ssr server via php artisan inertia:start-ssr no error is received except in my firefox console:

[Vue warn]: Vue received a Component that was made a reactive object. This can lead to unnecessary performance overhead and should be avoided by marking the component with `markRaw` or using `shallowRef` instead of `ref`. 
Component that was made reactive:  
Object { name: "Splide", emits: (27) […], components: {…}, props: {…}, setup: setup(props, context), render: _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options)
 }
 
  at <CCustomerService> 
  at <BasicStoreLayout> 

I am building via "build": "vite build && vite build --ssr".

Everything works fine without ssr. Right now it is sliding too, but isn't responsive at all + the error is confusing me. I copied a lot of code from a fresh laravel project but unfortunately there's not a lot of docu about "disable packages for ssr"

Any ideas what's the correct way to make this work?

• vue.js
• vite
• server-side-rendering
• inertiajs
• splidejs

Share Improve this question Follow edited Jan 21 at 8:41 dogma asked Jan 20 at 18:38 dogmadogma 6166 bronze badges 1

• 1 Try using shallowRef instead of ref in const splideComponent = ref(null);. Using ref will add reactivity to the component's properties (what the error warns about). With shallowRef, only the reference is reactive (changing from null to the component object triggers an update, but not changes to the object). – Moritz Ringler Commented Jan 20 at 22:24

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Solved it via:

 <div v-if="isClient" class="splide1">
        <component :is="splideComponent" :options="options"
        >
            <component :is="splideSlideComponent">
               Slide content..
            </component>
            <component :is="splideSlideComponent">
               Slide content..
            </component>
    </div>
</template>

<script setup>
import {onMounted, ref, shallowRef} from "vue";

const isClient = ref(false);

const splideComponent = shallowRef(null);
const splideSlideComponent = shallowRef(null);

onMounted(async () => {
    if (typeof window !== 'undefined') {
        const { Splide, SplideSlide } = await import('@splidejs/vue-splide'); // Beide Komponenten importieren
        splideComponent.value = Splide;
        splideSlideComponent.value = SplideSlide;
        isClient.value = true;
    }
});

const options = ref({
    perPage: 1,
});
</script>

本文标签：