Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Can I introduce router objects in ts files

See original GitHub issue

App.vue

<template>
  <button @click="toRoute('A')">
    router To A
  </button>
</template>

<script setup lang="ts">
import { toRoute } from '../utils/router'
</script>

that router how use

router.ts

export function toRoute(name: string) {
  router // that router how use
}

Issue Analytics

State:
Created 2 years ago
Comments:5

Top GitHub Comments

1reaction

reainkcommented, Dec 23, 2021

@techieoriname main.ts

import generatedRoutes from 'virtual:generated-pages'
import { setupLayouts } from 'virtual:generated-layouts'
import { setRouter } from '~/router'

const routes = setupLayouts(generatedRoutes)

export const createApp = ViteSSG(
    App,
    {
        routes,
    },
    (ctx) => {
      const { isClient, router } = ctx
      if (!isClient) return

      setRouter(router)
    }
)

~/router.ts

import { Router } from 'vue-router'

let router: Router

export function setRouter(r: Router): void {
  router = r
}

export { router }

custom.ts

import { router } from '~/router'
import routes from 'virtual:generated-pages'

console.log(router, routes)

0reactions

techieorinamecommented, Dec 23, 2021

@nshusr that would work with the regular vue structure

But looking at something as shown below, the routes file only exports an array of routes.

main.ts

import routes from "./routes"; // RouteRecordRaw[]

export const createApp = ViteSSG(
    App,
    {
        routes,
    },
    (ctx) => {}
)

routes.ts

import type { RouteRecordRaw } from "vue-router";

export default <RouteRecordRaw[]>[
    {
        path: "/",
        component: () => import("./pages/Index.vue")
    }
]