vite-plugin-editor-nav v0.0.4

Install

ℹ️ Vite 2 is required

npm i vite-plugin-editor-nav -D # yarn add vite-plugin-editor-nav -D

This is a tool for DX and only works in dev mode.

Configration

Editors

Install VSCode as FS extension and add this to your .vscode/settings.json

// .vscode/settings.json
{
  "as-fs.enabled": true
}

See more details on the readme page.

Vite

Recommend to use vite-plugin-voie for file-based routing.

// vite.config.js
import Vue from '@vitejs/plugin-vue'
import EditorNav from 'vite-plugin-editor-nav'

export default {
  plugins: [
    Vue(),
    EditorNav({
      preset: 'vue-router',
      routeBase: 'src/pages', // related to your Vite root,
    })
  ]
}

Then add this to your main.js

// main.js
import { createApp } from 'vue'
import { createRouter } from 'vue-router'

/*...*/

const router = createRouter({ /*...*/ })
const app = createApp( /*...*/ )

app.use(router)

// pass the vue-router instance to it
import('vite-plugin-editor-nav/client').then(i => i.default(router))

Vitepress uses a custom router and has @vite/plugin-vue already embedded. All you need is

// vite.config.js
import EditorNav from 'vite-plugin-editor-nav'

export default {
  plugins: [
    EditorNav({
      preset: 'vitepress',
    })
  ]
}

Then add this to .vitepress/theme/config.js

// .vitepress/theme/config.js
import DefaultTheme from 'vitepress/dist/client/theme-default'

export default {
  ...DefaultTheme
  enhanceApp({ app, router }) {
    // this
    import('vite-plugin-editor-nav/client').then(i => i.default(router))
  },
}

License

MIT License © 2021 Anthony Fu