feat: add vite-plugin-components

src/components/README.md

@@ -0,0 +1,14 @@
+## Components
+
+Components in this dir will auto registered as global components by [`vite-plugin-components`](https://github.com/antfu/vite-plugin-components).
+
+
+### `Icon.vue`
+
+You can uses Icons with the following syntax
+
+```html
+<Icon icon='mdi:account'/>
+```
+
+The icon id follows the rules in [Iconify](https://iconify.design/) which you can use any icons from the supported icon sets. It will only bundles the icons you use, check out [PurgeIcons](https://github.com/antfu/purge-icons) for more details.

src/components/index.ts

@@ -1,12 +0,0 @@
-import { Plugin } from 'vue'
-import Modal from './Modal.vue'
-import Icon from './Icon.vue'
-import Footer from './Footer.vue'
-
-export const registerComponents: Plugin = {
-  install(app) {
-    app.component('Modal', Modal)
-    app.component('Icon', Icon)
-    app.component('Footer', Footer)
-  },
-}

src/main.ts

@@ -5,10 +5,10 @@ import { createI18n } from 'vue-i18n'
 
 // import routes genereted by Voie
 import routes from 'voie-pages'
+import components from 'vite-plugin-components'
 // import icons data genereted by PurgeIcons
 import '@purge-icons/generated'
 
-import { registerComponents } from './components'
 import App from './App.vue'
 import { messages } from './messages'
 
@@ -25,6 +25,6 @@ const i18n = createI18n({
 
 app.use(i18n)
 app.use(router)
-app.use(registerComponents)
+app.use(components)
 
 app.mount('#app')

src/pages/README.md

@@ -0,0 +1,4 @@
+## File Based Routing
+
+Routes will auto generated for Vue files in this dir with the same file structure. 
+Check out [`vite-plugin-voie`](https://github.com/vamplate/vite-plugin-voie) for more details.