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 -DThis is a tool for DX and only works in
devmode.
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