diff --git a/packages/docs/page-config/getting-started/installation/components/FrameworkInstallWidget.vue b/packages/docs/page-config/getting-started/installation/components/FrameworkInstallWidget.vue new file mode 100644 index 0000000000..1ae8ee82d9 --- /dev/null +++ b/packages/docs/page-config/getting-started/installation/components/FrameworkInstallWidget.vue @@ -0,0 +1,44 @@ + + + diff --git a/packages/docs/page-config/getting-started/installation/components/OpenCodeSandbox.vue b/packages/docs/page-config/getting-started/installation/components/OpenCodeSandbox.vue index cb4a8ed762..7fa0713de2 100644 --- a/packages/docs/page-config/getting-started/installation/components/OpenCodeSandbox.vue +++ b/packages/docs/page-config/getting-started/installation/components/OpenCodeSandbox.vue @@ -1,24 +1,27 @@ diff --git a/packages/docs/page-config/getting-started/installation/components/Vite_logotype.svg b/packages/docs/page-config/getting-started/installation/components/Vite_logotype.svg new file mode 100644 index 0000000000..de4aeddc12 --- /dev/null +++ b/packages/docs/page-config/getting-started/installation/components/Vite_logotype.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/packages/docs/page-config/getting-started/installation/components/Vue_logotype.svg b/packages/docs/page-config/getting-started/installation/components/Vue_logotype.svg new file mode 100644 index 0000000000..a1d285eb2a --- /dev/null +++ b/packages/docs/page-config/getting-started/installation/components/Vue_logotype.svg @@ -0,0 +1,2 @@ + + diff --git a/packages/docs/page-config/getting-started/installation/components/codesandbox_logotype.svg b/packages/docs/page-config/getting-started/installation/components/codesandbox_logotype.svg new file mode 100644 index 0000000000..0c2bb6490f --- /dev/null +++ b/packages/docs/page-config/getting-started/installation/components/codesandbox_logotype.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/packages/docs/page-config/getting-started/installation/components/nuxt_logotype.svg b/packages/docs/page-config/getting-started/installation/components/nuxt_logotype.svg new file mode 100644 index 0000000000..ead151fc7a --- /dev/null +++ b/packages/docs/page-config/getting-started/installation/components/nuxt_logotype.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/docs/page-config/getting-started/installation/components/vuestic.png b/packages/docs/page-config/getting-started/installation/components/vuestic.png new file mode 100644 index 0000000000..5aff080ac4 Binary files /dev/null and b/packages/docs/page-config/getting-started/installation/components/vuestic.png differ diff --git a/packages/docs/page-config/getting-started/installation/index.ts b/packages/docs/page-config/getting-started/installation/index.ts index 16d229c972..476f21220d 100644 --- a/packages/docs/page-config/getting-started/installation/index.ts +++ b/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 `` 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"), ], }); diff --git a/packages/docs/page-config/getting-started/manual/code/cli.bash b/packages/docs/page-config/getting-started/manual/code/cli.bash new file mode 100644 index 0000000000..62773f55e8 --- /dev/null +++ b/packages/docs/page-config/getting-started/manual/code/cli.bash @@ -0,0 +1,2 @@ +vue --version + diff --git a/packages/docs/page-config/getting-started/manual/code/font-installation.html b/packages/docs/page-config/getting-started/manual/code/font-installation.html new file mode 100644 index 0000000000..d97b0adb42 --- /dev/null +++ b/packages/docs/page-config/getting-started/manual/code/font-installation.html @@ -0,0 +1,8 @@ + + diff --git a/packages/docs/page-config/getting-started/manual/code/font-installation.scss b/packages/docs/page-config/getting-started/manual/code/font-installation.scss new file mode 100644 index 0000000000..c089eead15 --- /dev/null +++ b/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"); diff --git a/packages/docs/page-config/getting-started/manual/code/quick-start.ts b/packages/docs/page-config/getting-started/manual/code/quick-start.ts new file mode 100644 index 0000000000..2e1dd5c62a --- /dev/null +++ b/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"); diff --git a/packages/docs/page-config/getting-started/manual/code/tailwind-css-import.ts b/packages/docs/page-config/getting-started/manual/code/tailwind-css-import.ts new file mode 100644 index 0000000000..659a5fd5d0 --- /dev/null +++ b/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'; diff --git a/packages/docs/page-config/getting-started/manual/index.ts b/packages/docs/page-config/getting-started/manual/index.ts new file mode 100644 index 0000000000..28c59de0d1 --- /dev/null +++ b/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 `` 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"), + ]), + ], +}); + diff --git a/packages/docs/page-config/getting-started/vite/code/vite-config.ts b/packages/docs/page-config/getting-started/vite/code/vite-config.ts new file mode 100644 index 0000000000..b61742d827 --- /dev/null +++ b/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)) + }, + }, +}) diff --git a/packages/docs/page-config/getting-started/vite/code/vuestic-config.ts b/packages/docs/page-config/getting-started/vite/code/vuestic-config.ts new file mode 100644 index 0000000000..89bd0914bc --- /dev/null +++ b/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}`, + }) + } + ] + }) +}) \ No newline at end of file diff --git a/packages/docs/page-config/getting-started/vite/index.ts b/packages/docs/page-config/getting-started/vite/index.ts new file mode 100644 index 0000000000..94555156b4 --- /dev/null +++ b/packages/docs/page-config/getting-started/vite/index.ts @@ -0,0 +1,44 @@ +export default definePageConfig({ + meta: { + title: "Nuxt", + category: "getting-started", + }, + + blocks: [ + block.title("Vite integration"), + block.paragraph("Vuestic UI is fully compatible with Vite. You can easily use Vuestic UI in your Vite-powered Vue 3 project."), + + block.subtitle("Scaffold new Vite app with Vuestic"), + block.paragraph("The easiest way to create a new Vite project with integrated Vuestic UI is to use the `create-vuestic` CLI tool. Create a new project and select the `Vite` template."), + block.link("See detailed guide here.", "/getting-started/installation#create-vuestic"), + + block.subtitle("Manual Installation"), + block.paragraph("To manually integrate Vuestic UI into your existing Vite project, first install the library:"), + block.code( + { + npm: "npm install @vuestic/compiler", + yarn: "yarn add @vuestic/compiler", + pnpm: "pnpm add @vuestic/compiler", + bun: "bun add @vuestic/compiler", + }, + "bash" + ), + + block.paragraph("Then, you need to configure Vite to use the Vuestic compiler. Import `vuestic` from `@vuestic/compiler/vite` in your `vite.config.ts` file and add it to the plugins array. Here's an example of a basic Vite configuration with Vuestic compiler:"), + block.code("vite-config"), + + block.subtitle("Compiler options"), + block.paragraph("Vuestic compiler provides several options to customize its behavior. You can configure these options in your `vite.config.ts` file. Here are the available options:"), + block.list([ + 'Config - use `vuestic.config.ts` for better type support and configuration. Set to `true` by default.', + 'Auto import - Vuestic UI components are automatically imported when used in templates. Set to `false` by default.', + 'Css layers - adds Vuestic UI CSS layers to control the order of styles in the final bundle. Set to `false` by default. Turns on by if `tailwindcss` package detected.', + 'Devtools - enables Vuestic UI devtools for better debugging and development experience. Set to `false` by default.', + ]), + + block.subtitle("vuestic.config.ts"), + block.paragraph("You can configure Vuestic UI globally by creating a `vuestic.config.ts` file and using `defineVuesticConfig` function. This allows you to customize component defaults, icons, colors, and more."), + block.code("vuestic-config"), + block.link("Read more about Icons Config", "/services/icons-config"), + ], +}) diff --git a/packages/docs/page-config/navigationRoutes.ts b/packages/docs/page-config/navigationRoutes.ts index dfae97ef59..7cc7029bb3 100644 --- a/packages/docs/page-config/navigationRoutes.ts +++ b/packages/docs/page-config/navigationRoutes.ts @@ -69,6 +69,10 @@ export const navigationRoutes: NavigationRoute[] = [ name: "nuxt", displayName: "Nuxt", }, + { + name: "vite", + displayName: "Vite", + }, { name: "ssr-guide", displayName: "SSR", @@ -91,6 +95,10 @@ export const navigationRoutes: NavigationRoute[] = [ badge: navigationBadge.new('1.6.0'), }, }, + { + name: 'manual', + displayName: 'Manual Installation', + } ], }, {