Example for Vue

Since the routing library is a complex integration package that requires a server for SSR and work with the History API, Live Preview is unavailable. However, you can download ready-made examples.

Preview

src

components

App.vue

Link.vue

LinkProps.vue

pages

dynamic

Dynamic.vue

index.ts

error

Error.vue

index.ts

home

Home.vue

index.ts

prevent

index.ts

Prevent.vue

query

index.ts

Query.vue

static

index.ts

Static.vue

client.ts

declarations.d.ts

router.ts

server.ts

style.module.css

template.html

build.ts

package.json

tsconfig.json

import { createApp, createSSRApp } from 'vue';

import App from './components/App.vue';
import { getRouter, routerStoreKey } from './router';

const router = getRouter();

await router.init(location.href, { skipLifecycle: Boolean(SSR_ENABLED) });

if (SSR_ENABLED) {
  createSSRApp(App, { router }).provide(routerStoreKey, { router }).mount('#example-app');

  console.log('SSR: App has been hydrated, no lifecycle called');
} else {
  createApp(App, { router }).provide(routerStoreKey, { router }).mount('#example-app');

  console.log('CSR: App has been rendered and lifecycle called');
}

Download

npx degit dkazakov8/reactive-route/examples/vue vue-example
cd vue-example
npm install

Then choose the mode and reactivity system to run:

• npm run vue — CSR (client-side rendering only) for Vue reactivity
• npm run ssr-vue — SSR for Vue reactivity