Auto-navigation to the page your are working in your editor for Vite
ℹ️ 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.
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.
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!
MIT License © 2021 Anthony Fu