docs: add unplugin-vue-components integration docs

Author: m0ksem

packages/docs/modules/page-config/blocks/tabs/index.ts

@@ -0,0 +1,13 @@
+import { BaseBlock } from './../../runtime';
+import { definePageConfigBlock } from '../../types'
+import Component from './index.vue'
+
+export default definePageConfigBlock({
+  setup (tabs: Record<string, BaseBlock[]>) {
+    return {
+      type: 'collapse' as const,
+      tabs
+    }
+  },
+  component: Component,
+})

packages/docs/modules/page-config/blocks/tabs/index.vue

@@ -0,0 +1,27 @@
+<template>
+  <VaTabs v-model="value" class="mt-2">
+    <template #tabs>
+      <VaTab
+        v-for="tab in tabNames"
+        :key="tab"
+      >
+        {{ tab }}
+      </VaTab>
+    </template>
+  </VaTabs>
+  <PageConfigBlocks :blocks="tabs[tabNames[value]]" />
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { BaseBlock } from './../../runtime';
+import PageConfigBlocks from '../../runtime/PageConfigBlocks.vue';
+
+const value = ref(0)
+
+const props = defineProps<{
+  tabs: Record<string, BaseBlock[]>
+}>()
+
+const tabNames = computed(() => Object.keys(props.tabs))
+</script>

packages/docs/modules/page-config/runtime/index.ts

@@ -20,10 +20,11 @@ import table from '../blocks/table'
 import cards from '../blocks/cards'
 import changeLog from '../blocks/change-log';
 import tags from '../blocks/tags';
+import tabs from '../blocks/tabs';
 import { APIDescriptionOptions, type ManualApiOptions } from '../blocks/api/types'
 
 // Need to define type in collapse without recursion
-const blocksWithoutCollapse = {
+const baseBlocks = {
   alert,
   example,
   title,
@@ -44,12 +45,13 @@ const blocksWithoutCollapse = {
   tags,
 }
 
-export type BaseBlock = ReturnType<(typeof blocksWithoutCollapse)[keyof typeof blocksWithoutCollapse]>
+export type BaseBlock = ReturnType<(typeof baseBlocks)[keyof typeof baseBlocks]>
 
 export const block = {
-  ...blocksWithoutCollapse,
+  ...baseBlocks,
   collapse,
   async,
+  tabs,
 }
 
 export type GlobalBlock = typeof block

packages/docs/page-config/extensions/unplugin-vue-components/code/installation.vite.ts

@@ -0,0 +1,16 @@
+// vite.config.ts
+import { defineConfig } from 'vite';
+import Components from 'unplugin-vue-components/vite'
+
+export default defineConfig({
+    plugins: [
+        Components({
+            resolvers: [
+              (componentName) => {
+                if (componentName.startsWith('Va'))
+                  return { name: componentName, from: 'vuestic-ui' }
+              },
+            ],
+        }),
+    ],
+});

packages/docs/page-config/extensions/unplugin-vue-components/code/installation.webpack.ts

@@ -0,0 +1,14 @@
+// webpack.config.js
+module.exports = {
+  /* ... */
+  plugins: [
+    require('unplugin-vue-components/webpack').default({
+        resolvers: [
+          (componentName) => {
+            if (componentName.startsWith('Va'))
+              return { name: componentName, from: 'vuestic-ui' }
+          },
+        ],
+    }),
+  ],
+}

packages/docs/page-config/extensions/unplugin-vue-components/code/vuestic-setup.ts

@@ -0,0 +1,14 @@
+import { createApp } from "vue";
+import { createVuesticEssential } from "vuestic-ui";
+import "vuestic-ui/css";
+import App from "./App.vue";
+
+createApp(App)
+  .use(
+    createVuesticEssential({
+      config: {
+        /* ... */
+      },
+    })
+  )
+  .mount("#app");

packages/docs/page-config/extensions/unplugin-vue-components/index.ts

@@ -0,0 +1,22 @@
+export default definePageConfig({
+  blocks: [
+    block.title('Unplugin Vue Components'),
+    block.paragraph('[Unplugin Vue Components](https://github.com/unplugin/unplugin-vue-components) is a Vite/Webpack plugin that automatically imports Vue components from your dependencies.'),
+    block.paragraph('You can use to import components from Vuestic UI without registering them globally or importing them in every file.'),
+
+    block.tabs({
+      'vite': [
+        block.code('installation.vite')
+      ],
+      'webpack': [
+        block.code('installation.webpack')
+      ],
+    }),
+
+    block.paragraph('After installing the plugin, you can use components from Vuestic UI without importing them. But you need to prevent them from global registration. Use `createVuesticEssential` to register Vuestic without global components. Read more about tree-shaking [here](/getting-started/tree-shaking)'),
+
+    block.code('vuestic-setup'),
+
+    block.paragraph('When working with [Nuxt](/getting-started/nuxt) this feature is built-in.'),
+  ]
+})

packages/docs/page-config/getting-started/tree-shaking/index.ts

@@ -10,6 +10,8 @@ export default definePageConfig({
     block.title("Tree shaking"),
     block.paragraph("If you plan to use only several components in your application and thus reduce the size of your bundle, you can use the Vuestic ESM build. Webpack (vue-cli) and Vite do that automatically."),
 
+    block.alert('It is recommended to use special tools like [Unplugin Vue Components](/extensions/unplugin-vue-components) for SPA Vite/Webpack or [Nuxt](/getting-started/nuxt) that tree-shake components automatically.', 'info'),
+
     block.paragraph("First, you don't need to use `createVuestic` since it registers all the `vuestic` components globally. We have `createVuesticEssential` instead, which register only essential plugins. You can specify components to declare globally. Or you can import them later."),
     block.code("tree-shaking"),
     block.paragraph("You can also specify Vuestic subplugins as `plugins` option. "),

packages/docs/page-config/navigationRoutes.ts

@@ -61,6 +61,9 @@ export const navigationRoutes: NavigationRoute[] = [
       {
         name: "tree-shaking",
         displayName: "Tree Shaking",
+        meta: {
+          badge: navigationBadge.updated('1.9.9'),
+        }
       },
       {
         name: "nuxt",
@@ -607,6 +610,13 @@ export const navigationRoutes: NavigationRoute[] = [
           badge: navigationBadge.new('1.6.0'),
         }
       },
+      {
+        name: 'unplugin-vue-components',
+        displayName: 'Auto import plugin',
+        meta: {
+          badge: navigationBadge.new('1.9.9'),
+        }
+      }
     ],
   },
 ];