Quick start (Vue)

New project

To start using Vueless UI, run the following command:

npm

npm create vueless@latest

yarn

# For Yarn (v1+)
yarn create vueless

# For Yarn Modern (v2+)
yarn create vueless@latest
  
# For Yarn ^v4.11
yarn dlx create-vueless@latest

pnpm

pnpm create vueless@latest

bun

bun create vueless@latest

This command guides you through a few setup options, then generates a new scaffolded Vue + Vueless UI project with the complete application structure.

Existing project

1. Install Vueless package.

npm

npm install vueless
npx vueless init

yarn

yarn add vueless

# For Yarn (v1+)
yarn vueless init --yarn
​
# For Yarn Modern (v2+)
yarn dlx vueless init --yarn

Use the --yarn flag when working with Yarn 2+ or newer. This will generate a .yarnrc.yml file preconfigured with the necessary settings for the Vueless package.

pnpm

pnpm add vueless
pnpm exec vueless init --pnpm

Use the --pnpm flag when working with pnpm. This will generate a .npmrc file preconfigured with the necessary settings for the Vueless package.

bun

bun add vueless
bunx vueless init

2. In the file where you create the Vue application, add the following code:

main.{js,ts}

import { createApp } from 'vue';
import { createVueless } from "vueless";
import App from './App.vue';

const vueless = createVueless();

createApp(App).use(vueless).mount('#app');

3. Import Tailwind CSS and Vueless at the top of the main CSS file.

main.css

@import "tailwindcss";
@import "vueless";

4. Add Vite plugins.

vite.config.{js,ts}

import { Vueless, TailwindCSS, UnpluginComponents } from "vueless/plugin-vite";

export default defineConfig({
  plugins: [
    ...
    Vueless(),
    TailwindCSS(),
    UnpluginComponents(),
  ],
  ...
});

That’s it! Vueless is now ready to use in your app ✨