github.com/antfu/vite-plugin-editor-nav @v0.0.4

vite-plugin-editor-nav

Auto-navigation to the page your are working in your editor for Vite

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

VS Code

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

Vue Router

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

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))
  },
}

React

Not supported yet, PR welcome!

License

MIT License © 2021 Anthony Fu