Vuestic UI

https://ui.vuestic.dev/
Admin
Vuestic UI is an open-source, MIT-licensed Vue 3 based UI framework that provides easily...
Tokens:143,979
Snippets:1,272
Trust Score:8.7
Update:6 days ago
Show doc for...
Tokens:
Raw
### Vitest configuration with setup file

Source: https://ui.vuestic.dev/getting-started/testing

Register the setup file in vitest.config.ts using the setupFiles option. The example shows a minimal Vitest config with Vue plugin and path resolution.

```typescript
import { defineConfig } from 'vitest/config'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

export default defineConfig({
  plugins: [vue()],
  test: {
    setupFiles: resolve('./tests/setup.js'), // Path to setup file
  },
})
```

--------------------------------

### Jest configuration with setup file

Source: https://ui.vuestic.dev/getting-started/testing

Add a jest field to package.json to register the setup file and configure Vue transformation. The example includes moduleFileExtensions, transform with vue-jest, testURL, and setupFile.

```json
{
  // ...
  "jest": {
    "moduleFileExtensions": [
      "js",
      "ts",
      "json",
      "vue"
    ],
    "transform": {
      ".*\\.(vue)$": "vue-jest"
    },
    "testURL": "http://localhost/",
    "setupFile": [
      "./tests/setup.js"
    ]
  }
}
```

--------------------------------

### Install @vuestic/vueform with npm

Source: https://ui.vuestic.dev/extensions/vueform

Install the Vueform integration library using npm.

```bash
npm install @vuestic/vueform
```

--------------------------------

### Setup file for @vue/test-utils

Source: https://ui.vuestic.dev/getting-started/testing

Create a setup file (e.g., tests/setup.js) that registers the Vuestic plugin with @vue/test-utils. This is required for tests to work with VuesticUI.

```javascript
// tests/setup.js
import { config } from '@vue/test-utils'
import { createVuestic } from 'vuestic-ui'

config.global.plugins.push(createVuestic())
```

--------------------------------

### Install @vuestic/ag-grid-theme with npm

Source: https://ui.vuestic.dev/extensions/ag-grid

Install the Vuestic AG Grid theme package using npm.

```bash
npm install @vuestic/ag-grid-theme
```

--------------------------------

### Install @vuestic/ag-grid-theme with Yarn

Source: https://ui.vuestic.dev/extensions/ag-grid

Install the Vuestic AG Grid theme package using Yarn.

```bash
yarn add @vuestic/ag-grid-theme
```

--------------------------------

### Install @vuestic/nuxt with npm

Source: https://ui.vuestic.dev/getting-started/nuxt

Install the Vuestic Nuxt integration module using npm. This is the first step in manual installation.

```bash
npm install @vuestic/nuxt
```

--------------------------------

### Install @vuestic/formkit with npm

Source: https://ui.vuestic.dev/extensions/formkit

Install the FormKit integration package for Vuestic UI using npm.

```bash
npm install @vuestic/formkit
```

--------------------------------

### block.subtitle('Headline (example)')

Source: https://ui.vuestic.dev/contribution/documentation-page

Sets a headline, used to mark titles of examples and FAQs. Think of it as h3.

```javascript
block.subtitle('Headline (example)')
```

--------------------------------

### Install @vuestic/tailwind package

Source: https://ui.vuestic.dev/styles/tailwind

Install the @vuestic/tailwind package to enable synchronization of breakpoint and color settings between Vuestic UI and Tailwind CSS.

```bash
npm install @vuestic/tailwind
```

--------------------------------

### block.link('Link (example)', '/getting-started/configuration-guide#components-config')

Source: https://ui.vuestic.dev/contribution/documentation-page

Used for relative (local) links processed by the router (with options or without them).

```javascript
block.link('Link (example)', '/getting-started/configuration-guide#components-config')
```

--------------------------------

### block.subtitle('Subtitle (example)')

Source: https://ui.vuestic.dev/contribution/documentation-page

Sets a subtitle, used for examples, API, FAQ. Think of it as h2.

```javascript
block.subtitle('Subtitle (example)')
```

--------------------------------

### block.title('Title (example)')

Source: https://ui.vuestic.dev/contribution/documentation-page

Sets the page title, which is mandatory for documentation pages.

```javascript
block.title('Title (example)')
```

--------------------------------

### Resulting vuestic.config.js after sync

Source: https://ui.vuestic.dev/styles/tailwind

Example of the vuestic.config.js file generated after synchronizing default Tailwind CSS settings to Vuestic UI.

```javascript
// vuestic.config.js

{
  breakpoint: {
    thresholds: {
      sm: 640,
        md: 768,
        lg: 1024,
        xl: 1280,
        '2xl': 1536,
    },
  },
  colors: {
    variables: {
      black: '#000',
        white: '#fff',
        'gray-50': '#f9fafb',
        'gray-100': '#f3f4f6',
        'gray-200': '#e5e7eb',
    ...
      'rose-700': '#be123c',
        'rose-800': '#9f1239',
        'rose-900': '#881337',
    },
  },
}
```

--------------------------------

### Register Vuestic without global components using createVuesticEssential

Source: https://ui.vuestic.dev/extensions/unplugin-vue-components

After installing the plugin, use createVuesticEssential to register Vuestic without global components, preventing double registration. This example shows the setup in main.ts.

```javascript
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");
```

--------------------------------

### Import config in main.* and initialize Vuestic

Source: https://ui.vuestic.dev/styles/tailwind

Import the generated vuestic.config.js and pass it to createVuestic to apply Tailwind CSS settings to Vuestic UI.

```javascript
// main.*

import { createVuestic } from 'vuestic-ui'
import config from '../vuestic.config.js'

createApp(App)
  .use(createVuestic({ config }))
  .mount('#app')
```

--------------------------------

### Global components config with createVuestic

Source: https://ui.vuestic.dev/services/components-config

Overrides default props and attributes for all components globally. In this example, VaAlert gets a style, class, icon, and dense prop.

```javascript
createVuestic({
  config: {
    components: {
      VaAlert: {
        style: 'outline: 2px solid var(--va-primary)',
        class: 'my-custom-alert',
        icon: 'info',
        dense: true,
      }
    }
  }
})
```

--------------------------------

### block.example('ComponentName')

Source: https://ui.vuestic.dev/contribution/documentation-page

Shows a component with a code preview. The component can use all global services like CSS classes and colors. Used in the ui-elements section to show examples of use.

```javascript
block.example('ComponentName')
```

--------------------------------

### Use Vuestic web components in HTML

Source: https://ui.vuestic.dev/getting-started/web-components

HTML and JavaScript example showing how to use va-select and va-button web components, including setting options and handling events.

```html
<body>
  <div id="app">
    <va-select id="select" stateful model-value="Option 1"></va-select>
    <va-button id="button">Send!</va-button>
  </div>

  <script>
    const select = document.getElementById("select");

    select.options = ["Option 1", "Option 2", "Option 3"];

    select.addEventListener("update:modelValue", (e) => {
      e.target.modelValue = e.detail;
      console.log('Option selected!', e.target.modelValue)
    });
  </script>

  <script>
    const button = document.getElementById("button");

    button.addEventListener("click", () => {
      console.log("Make something! User clicked the button");
    });
  </script>
</body>
```

--------------------------------

### init(options: string | ModalOptions)

Source: https://ui.vuestic.dev/ui-elements/modal

Creates a new modal instance. This method is available on the $vaModal global object (Options API) and the useModal hook (Composition API). It returns a modal instance VNode.

```APIDOC
## init(options: string | ModalOptions)

### Description
Creates a new modal instance. This method is available on the $vaModal global object (Options API) and the useModal hook (Composition API). It returns a modal instance VNode.

### Method
init

### Parameters
#### options (string | ModalOptions) - Required
- If a string is provided, it is used as the modal message.
- If an object is provided, it can contain the following properties:
  - **title** (string) - Optional - The title of the modal.
  - **message** (string) - Optional - The message content of the modal.
  - **attachElement** (string) - Optional - Element to attach the modal to.
  - **disableAttachElement** (boolean) - Optional - Disables attaching to an element.
  - **okText** (string) - Optional - Text for the OK button.
  - **cancelText** (string) - Optional - Text for the Cancel button.
  - **hideDefaultActions** (boolean) - Optional - Hides default action buttons.
  - **fullscreen** (boolean) - Optional - Displays modal in fullscreen.
  - **mobileFullscreen** (boolean) - Optional - Displays modal in fullscreen on mobile.
  - **noDismiss** (boolean) - Optional - Prevents modal dismissal.
  - **noOutsideDismiss** (boolean) - Optional - Prevents dismissal by clicking outside.
  - **noEscDismiss** (boolean) - Optional - Prevents dismissal by pressing Escape.
  - **maxWidth** (string) - Optional - Maximum width of the modal.
  - **maxHeight** (string) - Optional - Maximum height of the modal.
  - **size** (small | medium | large) - Optional - Size of the modal.
  - **fixedLayout** (boolean) - Optional - Uses fixed layout.
  - **withoutTransitions** (boolean) - Optional - Disables transitions.
  - **overlay** (boolean) - Optional - Shows overlay.
  - **overlayOpacity** (number | string) - Optional - Opacity of the overlay.
  - **zIndex** (number | string) - Optional - Z-index of the modal.
  - **onOk** (() => void) - Optional - Callback when OK is clicked.
  - **onCancel** (() => void) - Optional - Callback when Cancel is clicked.
  - **onClickOutside** (() => void) - Optional - Callback when clicking outside the modal.
  - **onUpdate:modelValue** ((value: boolean) => void) - Optional - Callback for model value updates.
  - **onOpen** ((el: HTMLElement) => void) - Optional - Callback when modal opens.
  - **onClose** ((el: HTMLElement) => void) - Optional - Callback when modal closes.

### Request Example
```javascript
this.$vaModal.init({
  message: 'Modal example!',
  onOk: this.onOkCallback,
  onCancel: this.onCancelCallback,
})
```

### Response
Returns a modal instance VNode.
```

--------------------------------

### Install unocss-preset-theme with npm

Source: https://ui.vuestic.dev/extensions/unocss

Install the unocss-preset-theme preset as a dev dependency using npm. This is required for the UnoCSS integration.

```bash
npm i -D unocss-preset-theme
```

--------------------------------

### Code snippet example with va-code-snippet class

Source: https://ui.vuestic.dev/styles/typography

Use the va-code-snippet class to style a paragraph as a code snippet. The example includes a link with an onClick handler.

```html
<p class="va-code-snippet">
  This is a wonderful example.
  <a href="#" onClick="">Read more</a>
</p>
```

--------------------------------

### Install material-design-icons-iconfont package

Source: https://ui.vuestic.dev/getting-started/configuration-guide

Install the material icons package required by Vuestic UI's default icon font. Use yarn or npm as shown.

```bash
yarn add material-design-icons-iconfont -D
```

--------------------------------

### Configure UnoCSS with Vuestic UI presets

Source: https://ui.vuestic.dev/extensions/unocss

Example configuration for unocss.config.* that imports Vuestic UI colors and breakpoints, converts breakpoint numbers to CSS units, and sets up dark mode using presetTheme.

```javascript
// unocss.config.*
import { defineConfig, presetUno } from 'unocss'
import presetTheme from 'unocss-preset-theme'
import { colorsPreset, thresholdsPreset } from 'vuestic-ui'

const convertNumbersToCssUnits = (obj, unit = 'px') =>
  Object.entries(obj).reduce((acc, [key, value]) => ({
    ...acc,
    [key]: `${value}${unit}`,
  }), {})

export default defineConfig({
  theme: {
    colors: colorsPreset.light,
    breakpoints: convertNumbersToCssUnits(thresholdsPreset),
  },
  presets: [
    presetUno({
      dark: 'media',
    }),
    presetTheme({
      theme: {
        dark: {
          colors: colorsPreset.dark,
        },
      },
    }),
  ],
})
```

--------------------------------

### Install Source Code Pro font for .code-snippet class

Source: https://ui.vuestic.dev/styles/typography

To use the .code-snippet class, you need to install the Source Code Pro font. This link tag loads the font from Google Fonts.

```html
<link
  href="https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap"
  rel="stylesheet"
/>
```

--------------------------------

### Code preview with highlight.js

Source: https://ui.vuestic.dev/contribution/documentation-page

Displays a code string using highlight.js for syntax highlighting.

```html
<div>Code string</div>
```

```javascript
block.code('
  <div>Code string</div>
')
```
Tokens:
Raw