@mdreal/vue-dynamic-router-generator v1.0.8

Vue Router Automation

Installation

npm install @mdreal/vue-dynamic-router-generator
# or
yarn add @mdreal/vue-dynamic-router-generator

Usage

Any Component:

<template>
  <div>Hello World</div>
</template>

<script lang="ts">
import { Route } from "@mdreal/vue-dynamic-router-generator";
import { defineComponent } from "@vue/runtime-core";

const component = defineComponent({
  /* ... */
});
Route("path", "Optional: name in components")(component);
export default component;
</script>

With Class Components:

<template>
  <div>Hello World</div>
</template>

<script lang="ts">
import { Route } from "@mdreal/vue-dynamic-router-generator";
import { Component, VueClassComponent } from "@mdreal/vue-3-class-component";

@Route("path", "Optional: name in components")
@Component()
export class AnyComponent implements VueClassComponent {}
</script>

components.ts

// Export components which registerd with Route decorator
// It needs for register components and activate modules
export const components = {};

main.ts

import { createApp } from "vue";
import { useRouter } from "@mdreal/vue-dynamic-router-generator";
import { components } from "/path/to/components.ts";

createApp(/* Component here */).use(useRouter(components)).mount(/* Mount Here */);

API

@Route

Registers route to router. Includes 2 arguments. First is path, second is name of route.

useRouter

Hook for vue which activates routes. Include 1 argument. Object of Components showed in top.