Ubugeeei-pathpida NPM

pathpida (forked by ubugeeei)

- Nuxt Route Type Implementation -

Features

Type safety. Automatically generate type definition files for manipulating internal links in Next.js/Nuxt.js/Sapper.
Zero configuration. No configuration required can be used immediately after installation.
Zero runtime. Lightweight because runtime code is not included in the bundle.
Support for static files. Static files in public/ are also supported, so static assets can be safely referenced.

pathpida (forked by ubugeeei)

Install

Using npm:

$ npm install ubugeeei-pathpida npm-run-all --save-dev

Using Yarn:

$ yarn add  ubugeeei-pathpida npm-run-all --dev

Setup - Nuxt.js

package.json

{
  "scripts": {
    "dev": "run-p dev:*",
    "dev:nuxt": "nuxt-ts",
    "dev:path": "ubugeeei-pathpida --ignorePath .gitignore --watch",
    "build": "ubugeeei-pathpida --ignorePath .gitignore && nuxt-ts build"
  }
}

nuxt.config.js or nuxt.config.ts

{
  plugins: ['~/plugins/$path'],
  srcDir: 'client', // optional
  router: {
    trailingSlash: true // optional
  }
}

Usage - Nuxt.js

pages/index.vue
pages/post/create.vue
pages/post/_pid.tsx

plugins/$path.ts // Generated automatically by pathpida

pages/index.vue

<template>
  <div>
    <nuxt-link :to="$pagesPath.post._pid(1).$url()" />
    <div @click="onClick" />
  </div>
</template>

<script lang="ts">
import Vue from "vue"
import { pagesPath } from "~/plugins/$path"

export default Vue.extend({
  methods: {
    onClick() {
      this.$router.push(pagesPath.post._pid(1).$url())
    }
  }
})
</script>

ubugeeei-pathpida custom implements

<template>
  <div>
    <nuxt-link :to="$pagesPath.post.create.$url()" />
    <div @click="onClick($pagesPath.post.create.$name())" />
  </div>
</template>

<script lang="ts">
import Vue from "vue"
import { RouteName } from "~/plugins/$path"

export default Vue.extend({
  methods: {
    onClick(routeName: RouteName) {
      this.$router.push({ name: routeName })
    }
  }
})
</script>