JohnCampionJr / vite-plugin-vue-layouts

Vue layout plugin for Vite
MIT License
459 stars 64 forks source link

After Refresh page not render page #90

Closed DarkCobalt closed 9 months ago

DarkCobalt commented 1 year ago

I use this starter pack https://github.com/shamscorner/vue-3-stackter

My problem starts when try develop my app on server witch apatche. After few hours, i find this is not problem server but vita and this plugin (problable)

When run app in mode yarn dev all works fine. When run app in mode vite preview on homepage works fine, but on sub page on refresh application don't render.

My main.js

import { createApp } from 'vue'
import { createMetaManager } from 'vue-meta'
import { createRouter, createWebHistory } from 'vue-router'
import { createPinia } from 'pinia'
import { setupLayouts } from 'virtual:generated-layouts'
import generatedRoutes from 'virtual:generated-pages'
import App from './App.vue'
import './index.css'
import 'flowbite';

const routes = setupLayouts(generatedRoutes);

const router = createRouter({
    history: createWebHistory(),
    routes
});

const app = createApp(App).use(router).use(createPinia()).use(createMetaManager());

await router.isReady();
app.mount('#app');

vite.config.js

import path from 'path'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Pages from 'vite-plugin-pages'
import Components from 'unplugin-vue-components/vite'
import Layouts from 'vite-plugin-vue-layouts'

// https://vitejs.dev/config/
export default defineConfig({
    resolve: {
        alias: {
            '~/': `${path.resolve(__dirname, 'src')}/`,
        },
    },
    build: {
        target: 'esnext'
    },
    plugins: [vue(), Pages(), Layouts(), Components()],
})

On homepage

Zrzut ekranu 2023-01-3 o 23 28 17

When click in menu still works

Zrzut ekranu 2023-01-3 o 23 30 04

And after refresh page in browser, app not render correct

Zrzut ekranu 2023-01-3 o 23 32 13

I try simple test, when manually create routes and works fine

import { createApp } from 'vue'
import { createMetaManager } from 'vue-meta'
import { createRouter, createWebHistory } from 'vue-router'
import { createPinia } from 'pinia'
import { setupLayouts } from 'virtual:generated-layouts'
import generatedRoutes from 'virtual:generated-pages'
import App from './App.vue'
import './index.css'
import 'flowbite';

import home from './pages/index.vue'
import insurance from './pages/insurance.vue'

// const routes = setupLayouts(generatedRoutes);

const routes = [
    { path: '/', name: 'home', component: home },
    { path: '/insurance', name: 'insurance', component: insurance },
];

const router = createRouter({
    mode: 'history',
    history: createWebHistory(),
    routes
});

const app = createApp(App).use(router).use(createPinia()).use(createMetaManager());

await router.isReady();
app.mount('#app');

Thank you for the tips

JohnCampionJr commented 9 months ago

Would need a repro.

I recommend Vitesse as a starting point: https://github.com/antfu/vitesse