Fix#4542: update installation page(added wigets for selecting installation method)

packages/docs/page-config/getting-started/installation/components/FrameworkInstallWidget.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+    <VaCard
+      v-for="option in options"
+      :key="option.label"
+      class="hover:shadow-xl transition-all duration-300 cursor-pointer"
+      :to="option.link"
+      :target="option.external ? '_blank' : undefined"
+    >
+      <VaCardContent class="flex flex-col items-center text-center p-6">
+        <img :src="option.logo" alt="" class="w-24 h-16 mb-4" />
+        <h3 class="text-xl font-semibold mb-2">{{ option.label }}</h3>
+        <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">{{ option.description }}</p>
+      </VaCardContent>
+    </VaCard>
+  </div>
+</template>
+
+<script setup>
+import nuxt_logotype from './nuxt_logotype.svg'
+import Vite_logotype from './Vite_logotype.svg'
+import Vue_logotype from './Vue_logotype.svg'
+
+const options = [
+  {
+    label: 'Nuxt',
+    description: 'Use @vuestic/nuxt with Nuxt for seamless SSR and modular setup.',
+    link: '/getting-started/nuxt',
+    logo: nuxt_logotype,
+  },
+  {
+    label: 'Vite',
+    description: 'Try @vuestic/compiler with Vite for great development experience.',
+    link: '/getting-started/vite',
+    logo: Vite_logotype,
+  },
+  {
+    label: 'Manual',
+    description: 'Manually add vuestic-ui to any existing Vue project.',
+    link: '/getting-started/manual',
+    logo: Vue_logotype,
+  },
+]
+</script>

packages/docs/page-config/getting-started/installation/components/OpenCodeSandbox.vue

@@ -1,32 +1,34 @@
 <template>
-  <div>
-    <form
-      :action="sandboxDefineUrl"
-      method="POST"
-      target="_blank"
-    >
-      <input
-        type="hidden"
-        name="parameters"
-        :value="sandboxParams"
-      >
-      <VaButton
-        type="submit"
-        preset="secondary"
-        border-color="primary"
+  <VaCard class="hover:shadow-xl transition-all duration-300 cursor-pointer">
+    <VaCardContent class="flex flex-col items-center text-center p-6">
+      <img src="./codesandbox_logotype.svg" alt="CodeSandbox logo" class="w-24 h-16 mb-4" />
+
+      <h3 class="text-xl font-semibold mb-2">CodeSandbox</h3>
+
+      <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
+        Experiment right in your browser via CodeSandbox.
+      </p>
+
+      <form
+        :action="sandboxDefineUrl"
+        method="POST"
+        target="_blank"
       >
-        Try Vuestic-UI on CodeSandbox
-      </VaButton>
-    </form>
-  </div>
+        <input
+          type="hidden"
+          name="parameters"
+          :value="sandboxParams"
+        />
+      </form>
+    </VaCardContent>
+  </VaCard>
 </template>
 
 <script>
 import { createCodeSandbox } from "@/composables/code-sandbox";
 
 export default {
   name: "DocsOpenCodeSandbox",
-  props: {},
   data() {
     return {
       query: "?query=file=/src/App.vue",

packages/docs/page-config/getting-started/installation/components/TryOnlineWidget.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="flex justify-center gap-6 flex-wrap w-full">
+    <VaCard
+      class="hover:shadow-xl transition-all duration-300 cursor-pointer w-full md:w-[300px]"
+      :to="option.link"
+      :target="option.external ? '_blank' : undefined"
+    >
+      <VaCardContent class="flex flex-col items-center text-center p-6">
+        <img :src="option.logo" alt="" class="w-16 h-16 mb-4" />
+        <h3 class="text-xl font-semibold mb-2">{{ option.label }}</h3>
+        <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">{{ option.description }}</p>
+      </VaCardContent>
+    </VaCard>
+
+    <DocsOpenCodeSandbox />
+  </div>
+</template>
+
+<script setup>
+import DocsOpenCodeSandbox from './OpenCodeSandbox.vue'
+import vuestic_logo from './vuestic.png'
+
+const option = {
+  label: 'Playground',
+  description: 'Try Vuestic UI with Tailwind in our playground online',
+  link: 'https://ui.vuestic.dev/play',
+  logo: vuestic_logo,
+}
+</script>

packages/docs/page-config/getting-started/installation/index.ts

@@ -7,81 +7,22 @@ export default definePageConfig({
   blocks: [
     block.title("Installation"),
     block.paragraph("You can create a new project or integrate Vuestic UI into an existing application. There are three ways to create new Vuestic App. All of them mostly the same and provides the same features."),
-
     block.subtitle('Create Vuestic'),
     block.paragraph('`create-vuestic` is CLI based tool to create new Vuestic App. This is a recommended way to scaffold new Vue apps with Vuestic.'),
     block.code({
       npm: 'npm create vuestic@latest',
       yarn: 'yarn create vuestic',
+      pnpm: 'pnpm create vuestic',
+      bun: 'bun create vuestic',
     }, 'bash'),
     block.paragraph('`create-vuestic` provides three template: Vuestic Admin, create-vue and Nuxt. Templates can be configured to use specific features like tree-shaking or AG Grid theme.'),
 
-    block.subtitle("Nuxt installation"),
-    block.link('Visit nuxt integration page', '/getting-started/nuxt#manual-installation'),
-
-    block.subtitle("Manual installation"),
-    block.paragraph("If you decide to install Vuestic UI manually, all you need to do is to install a NPM package, a couple of other necessary assets (such as fonts and CSS styles) and slightly modify your application's entry point (most probably `index.js` or `main.js`, depending on your setup)."),
-    block.paragraph("But first, make sure you've got all the following prerequisites installed:"),
-    block.list(["[Node.js](https://nodejs.org/en/)[[target=_blank]] (>=v14.0.0)", "[npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)[[target=_blank]] (>=v3.0.0) (or [yarn](https://yarnpkg.com/lang/en/docs/install)[[target=_blank]] (>= v1.16.0)) and [Git](https://git-scm.com/)[[target=_blank]]"]),
-    block.paragraph("After checking the prerequisites, install Vuestic UI via npm or yarn:"),
-    block.code(
-      {
-        npm: "npm install vuestic-ui",
-        yarn: "yarn add vuestic-ui",
-      },
-      "bash"
-    ),
-
-    block.headline("Assets installation"),
-    block.paragraph("By default Vuestic UI uses `Source Sans Pro` and `Material Icons` fonts. You should manually add them into your project. In order to do so you can either:"),
-    block.paragraph("include fonts directly in your `index.html`'s `<head>` element"),
-    block.code("font-installation.html", "html"),
-    block.paragraph("or include them in your CSS"),
-    block.code("font-installation.scss", "css"),
-
-    block.headline("Modify your application's entry point"),
-    block.paragraph("Import both the styles and the plugin into your entry file. The plugin is used to automatically register all the components, directives and other stuff globally. If you don't want to register everything globally then check out the tree-shaking section below."),
-    block.code("quick-start.ts"),
-    block.headline("Usage with Tailwind"),
-    block.paragraph('Projects using Tailwind need to import different CSS:'),
-    block.code("tailwind-css-import.ts"),
-    block.paragraph('`import \'vuestic-ui/css\'` adds few more styles in `reset.css` that may conflict with Tailwind which provides it\'s own reset.'),
-    block.paragraph('For more information on usage with Tailwind see [Tailwind Integration](/styles/tailwind).'),
-
-    block.headline("Migration guide"),
+    block.subtitle('Manual Installation'),
+    block.headline('Choose your framework'),
+    block.component('FrameworkInstallWidget'),
+    block.headline('Try without installation'),
+    block.component('TryOnlineWidget'),
 
-    // Follow migration guide order from newer to older
-    block.collapse("v1.5 ➝ v1.6", [
-      block.subtitle("Components"),
-      block.headline("VaNavbar"),
-      block.paragraph("* `center` slot was replaced with default one;\n * default (`center`) slot is now visible on mobiles."),
-      block.headline("VaInnerLoading"),
-      block.paragraph("CSS variables names were changed."),
-      block.headline("VaScrollContainer"),
-      block.paragraph("`size` prop acceptable values names were changed."),
-      block.subtitle("Extensions"),
-      block.headline("Ag Grid"),
-      block.paragraph("Removed SCSS mixins for Vuestic UI theme customization."),
-      block.subtitle("Styles"),
-      block.paragraph("Vuestic UI grid helpers were deprecated. Use Tailwind CSS instead."),
-    ]),
-    block.collapse("v1.4 ➝ v1.5", [
-      block.subtitle("Components"),
-      block.headline("VaButton"),
-      block.paragraph("* Button has been changed visually and its API changed too:\n* `flat` prop has been moved to `preset=\"secondary\"`.\n* Prop `rounded` renamed to `round` and is now `false` by default."),
-      block.headline("VaCheckbox"),
-      block.paragraph("Checkbox is now `inline-block` instead of `block`."),
-      block.subtitle("Services"),
-      block.headline("Colors"),
-      block.alert("In `1.5.0` there are a lot of changes to support dark theme.", "info"),
-      block.paragraph("* Color config is now extended with variables (where previous colors are stored);\n* `dark`, `white`, `background`, `gray` colors have been removed;\n* text color in components is calculated automatically, but you can force text to be `textDark` or `textLight`;\n* there are 4 types of background color now: `backgroundPrimary`, `backgroundSecondary`, `backgroundTertiary`, `backgroundElement`;\n* read more: [colors](https://vuestic.dev/styles/colors)[[target=_blank]]."),
-      block.paragraph("* use `useTheme` instead of `useColors` - it has all the same methods."),
-      block.subtitle("Styles"),
-      block.paragraph("* All typography classes now have `va` prefix. For instance: link renamed to `va-link`, `text--right` renamed to `va-text-right`"),
-      block.paragraph("* `display-1` has been renamed to `va-h1`, same for 2 to 6"),
-    ]),
 
-    block.subtitle("CodeSandbox"),
-    block.component("OpenCodeSandbox"),
   ],
 });

packages/docs/page-config/getting-started/manual/code/cli.bash

@@ -0,0 +1,2 @@
+vue --version
+

packages/docs/page-config/getting-started/manual/code/font-installation.html

@@ -0,0 +1,8 @@
+<link
+  href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,400;1,700&display=swap"
+  rel="stylesheet"
+/>
+<link
+  href="https://fonts.googleapis.com/icon?family=Material+Icons"
+  rel="stylesheet"
+/>

packages/docs/page-config/getting-started/manual/code/font-installation.scss

@@ -0,0 +1,2 @@
+@import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,400;1,700&display=swap");
+@import url("https://fonts.googleapis.com/icon?family=Material+Icons");

packages/docs/page-config/getting-started/manual/code/quick-start.ts

@@ -0,0 +1,7 @@
+// main.js
+import { createApp } from "vue";
+import App from "./App.vue";
+import { createVuestic } from "vuestic-ui";
+import "vuestic-ui/css";
+
+createApp(App).use(createVuestic()).mount("#app");

packages/docs/page-config/getting-started/manual/code/tailwind-css-import.ts

@@ -0,0 +1,3 @@
+// instead of `import "vuestic-ui/css";`
+import 'vuestic-ui/styles/essential.css';
+import 'vuestic-ui/styles/typography.css';

packages/docs/page-config/getting-started/manual/index.ts

@@ -0,0 +1,73 @@
+
+
+export default definePageConfig({
+  meta: {
+    title: "Manual Installation",
+    category: "getting-started",
+  },
+
+  blocks: [
+    block.title("Manual installation"),
+    block.paragraph("If you decide to install Vuestic UI manually, all you need to do is to install a NPM package, a couple of other necessary assets (such as fonts and CSS styles) and slightly modify your application's entry point (most probably `index.js` or `main.js`, depending on your setup)."),
+    block.paragraph("But first, make sure you've got all the following prerequisites installed:"),
+    block.list(["[Node.js](https://nodejs.org/en/)[[target=_blank]] (>=v14.0.0)", "[npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)[[target=_blank]] (>=v3.0.0) (or [yarn](https://yarnpkg.com/lang/en/docs/install)[[target=_blank]] (>= v1.16.0)) and [Git](https://git-scm.com/)[[target=_blank]]"]),
+    block.paragraph("After checking the prerequisites, install Vuestic UI via npm or yarn:"),
+    block.code(
+      {
+        npm: "npm install vuestic-ui",
+        yarn: "yarn add vuestic-ui",
+      },
+      "bash"
+    ),
+
+    block.headline("Assets installation"),
+    block.paragraph("By default Vuestic UI uses `Source Sans Pro` and `Material Icons` fonts. You should manually add them into your project. In order to do so you can either:"),
+    block.paragraph("include fonts directly in your `index.html`'s `<head>` element"),
+    block.code("font-installation.html", "html"),
+    block.paragraph("or include them in your CSS"),
+    block.code("font-installation.scss", "css"),
+
+    block.headline("Modify your application's entry point"),
+    block.paragraph("Import both the styles and the plugin into your entry file. The plugin is used to automatically register all the components, directives and other stuff globally. If you don't want to register everything globally then check out the tree-shaking section below."),
+    block.code("quick-start.ts"),
+    block.headline("Usage with Tailwind"),
+    block.paragraph('Projects using Tailwind need to import different CSS:'),
+    block.code("tailwind-css-import.ts"),
+    block.paragraph('`import \'vuestic-ui/css\'` adds few more styles in `reset.css` that may conflict with Tailwind which provides it\'s own reset.'),
+    block.paragraph('For more information on usage with Tailwind see [Tailwind Integration](/styles/tailwind).'),
+
+    block.headline("Migration guide"),
+
+    // Follow migration guide order from newer to older
+    block.collapse("v1.5 ➝ v1.6", [
+      block.subtitle("Components"),
+      block.headline("VaNavbar"),
+      block.paragraph("* `center` slot was replaced with default one;\n * default (`center`) slot is now visible on mobiles."),
+      block.headline("VaInnerLoading"),
+      block.paragraph("CSS variables names were changed."),
+      block.headline("VaScrollContainer"),
+      block.paragraph("`size` prop acceptable values names were changed."),
+      block.subtitle("Extensions"),
+      block.headline("Ag Grid"),
+      block.paragraph("Removed SCSS mixins for Vuestic UI theme customization."),
+      block.subtitle("Styles"),
+      block.paragraph("Vuestic UI grid helpers were deprecated. Use Tailwind CSS instead."),
+    ]),
+    block.collapse("v1.4 ➝ v1.5", [
+      block.subtitle("Components"),
+      block.headline("VaButton"),
+      block.paragraph("* Button has been changed visually and its API changed too:\n* `flat` prop has been moved to `preset=\"secondary\"`.\n* Prop `rounded` renamed to `round` and is now `false` by default."),
+      block.headline("VaCheckbox"),
+      block.paragraph("Checkbox is now `inline-block` instead of `block`."),
+      block.subtitle("Services"),
+      block.headline("Colors"),
+      block.alert("In `1.5.0` there are a lot of changes to support dark theme.", "info"),
+      block.paragraph("* Color config is now extended with variables (where previous colors are stored);\n* `dark`, `white`, `background`, `gray` colors have been removed;\n* text color in components is calculated automatically, but you can force text to be `textDark` or `textLight`;\n* there are 4 types of background color now: `backgroundPrimary`, `backgroundSecondary`, `backgroundTertiary`, `backgroundElement`;\n* read more: [colors](https://vuestic.dev/styles/colors)[[target=_blank]]."),
+      block.paragraph("* use `useTheme` instead of `useColors` - it has all the same methods."),
+      block.subtitle("Styles"),
+      block.paragraph("* All typography classes now have `va` prefix. For instance: link renamed to `va-link`, `text--right` renamed to `va-text-right`"),
+      block.paragraph("* `display-1` has been renamed to `va-h1`, same for 2 to 6"),
+    ]),
+  ],
+});
+

packages/docs/page-config/getting-started/vite/code/vite-config.ts

@@ -0,0 +1,18 @@
+import { vuestic } from "@vuestic/compiler/vite"
+import { fileURLToPath, URL } from 'node:url'
+
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [
+    vuestic(),
+    vue(),
+  ],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    },
+  },
+})

packages/docs/page-config/getting-started/vite/code/vuestic-config.ts

@@ -0,0 +1,14 @@
+import { defineVuesticConfig, createIconsConfig } from 'vuestic-ui'
+
+export default defineVuesticConfig({
+  icons: createIconsConfig({
+    fonts: [
+      {
+        name: 'fa-{name}',
+        resolve: ({ name }) => ({
+          class: `fas fa-${name}`,
+        })
+      }
+    ]
+  })
+})