feat: add vite-plugin-components

README.md

@@ -20,11 +20,13 @@
 
 - ⚡️ Vue3, Vite, pnpm, ESBuild - born with fastness
 
-- 🗂 File based routing
+- 🗂 [File based routing](./src/pages)
+
+- 📲 [Components auto importing](./src/components)
 
 - 🎨 TailwindCSS with dark mode out-of-box
 
-- 😃 Use icons from any icon sets, with no compromise
+- 😃 [Use icons from any icon sets, with no compromise](./src/components)
 
 - 🌍 i18n ready
 
@@ -46,13 +48,11 @@
 - [Iconify](https://iconify.design) - use icons from any icon sets [🔍Icônes](https://icones.netlify.app/)
 - [PurgeIcons](https://github.com/antfu/purge-icons) - bundles only the icons that you use
 
-### Router
+### Plugins
 
 - [Vue Router](https://github.com/vuejs/vue-router)
-- [Voie](https://github.com/vamplate/vite-plugin-voie) - file system based routing
-
-### Utils
-
+  - [vite-plugin-voie](https://github.com/vamplate/vite-plugin-voie) - file system based routing
+- [vite-plugin-components](https://github.com/antfu/vite-plugin-components) - components auto import
 - [vue-i18n](https://github.com/intlify/vue-i18n-next) - internationalization
 - [VueUse](https://github.com/antfu/vueuse) - collection of useful composition APIs
 

package.json

@@ -14,6 +14,7 @@
     "vue-router": "^4.0.0-beta.6"
   },
   "devDependencies": {
+    "vite-plugin-components": "^0.1.0",
     "@antfu/eslint-config-vue": "^0.3.2",
     "@iconify/json": "^1.1.208",
     "@purge-icons/generated": "^0.4.0",
@@ -30,9 +31,6 @@
     "voie-pages": "^0.3.0"
   },
   "eslintConfig": {
-    "extends": "@antfu/eslint-config-vue",
-    "rules": {
-      "import/no-absolute-path": "off"
-    }
+    "extends": "@antfu/eslint-config-vue"
   }
 }

pnpm-lock.yaml

@@ -16,6 +16,7 @@ devDependencies:
   tailwindcss-dark-mode: 1.1.6
   typescript: 3.9.7
   vite: 1.0.0-rc.4
+  vite-plugin-components: 0.1.0
   vite-plugin-purge-icons: 0.4.0
   vite-plugin-voie: 0.3.0_41db3258d2e6c5068f70770d66f3c3ce
   voie-pages: 0.3.0_vue@3.0.0-rc.5
@@ -3869,6 +3870,12 @@ packages:
       node: '>= 0.8'
     resolution:
       integrity: sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=
+  /vite-plugin-components/0.1.0:
+    dependencies:
+      fast-glob: 3.2.4
+    dev: true
+    resolution:
+      integrity: sha512-IhaBGcdvKcbs0dewTzNjM+tk5Y7VswHfM3pDWD6lEQLt//1nmEcOx+bRSFpfWtKg6ooIPuquo3oK47sQzDn8Wg==
   /vite-plugin-purge-icons/0.4.0:
     dependencies:
       '@purge-icons/core': 0.4.0
@@ -4084,6 +4091,7 @@ specifiers:
   tailwindcss-dark-mode: ^1.1.6
   typescript: ^3.9.7
   vite: ^1.0.0-rc.4
+  vite-plugin-components: ^0.1.0
   vite-plugin-purge-icons: ^0.4.0
   vite-plugin-voie: ^0.3.0
   voie-pages: ^0.3.0

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.

vite.config.js

@@ -1,12 +1,11 @@
 import Voie from 'vite-plugin-voie'
 import PurgeIcons from 'vite-plugin-purge-icons'
+import { VitePluginComponents } from 'vite-plugin-components'
 
 export default {
   plugins: [
-    Voie({
-      pagesDir: 'src/pages',
-      extensions: ['vue', 'ts'],
-    }),
+    Voie(),
+    VitePluginComponents(),
     PurgeIcons(),
   ],
 }