ubugeeei-pathpida

pathpida (forked by ubugeeei)

- Nuxt Route Type Implementation -

TypeScript friendly internal link client for Next.js, Nuxt.js and Sapper.

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.

Table of Contents

• pathpida (forked by ubugeeei)
  • Features
  • Table of Contents
  • Install
  • Setup - Nuxt.js
  • Usage - Nuxt.js
  • License

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>

License

pathpida is licensed under a MIT License.