Our team will be speaking at MadVue – The Vue.js Event in Madrid! Don’t miss it, join us!
🎟️ Get you ticket

Installation
#

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.

Create Vuestic
#

create-vuestic is CLI based tool to create new Vuestic App. This is a recommended way to scaffold new Vue apps with Vuestic.

npm create vuestic@latest

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.

Nuxt installation
#

Visit nuxt integration page

Manual installation
#

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).

But first, make sure you've got all the following prerequisites installed:

After checking the prerequisites, install Vuestic UI via npm or yarn:

npm install vuestic-ui

Assets installation
#

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:

include fonts directly in your index.html's <head> element

<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"
/>

or include them in your CSS

@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");

Modify your application's entry point
#

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.

// 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");

Usage with Tailwind
#

Projects using Tailwind need to import different CSS:

// instead of `import "vuestic-ui/css";`
import 'vuestic-ui/styles/essential.css';
import 'vuestic-ui/styles/typography.css';

import 'vuestic-ui/css' adds few more styles in reset.css that may conflict with Tailwind which provides it's own reset.

For more information on usage with Tailwind see Tailwind Integration.

Migration guide
#

CodeSandbox
#