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.

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.

Vue CLI installation

If you have app based on Vue CLI this is a way to install Vuestic UI. Works fine with vite or webpack. Prefer create-vuestic for new projects

First, make sure youโ€™ve got Vue CLI installed globally:

Notice also that the minimum supported version of Vue CLI is v4.0.0. In case youโ€™ve got an older version installed, please, consider upgrading it.

If everythingโ€™s fine then you can finally install the plugin with the following command (donโ€™t forget to commit):

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:

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

or include them in your CSS

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.

Migration guide