Quick start (Vue)

New project

To start using Vueless UI, run the following command:

npm

npm create vueless@latest

yarn

pnpm

bun

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

pnpm

bun

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 ✨