# Quick start (Vue)

## New project

To start using Vueless UI, run the following command:

{% tabs %}
{% tab title="npm" %}

```bash
npm create vueless@latest
```

{% endtab %}

{% tab title="yarn" %}

```bash
# For Yarn (v1+)
yarn create vueless

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

{% endtab %}

{% tab title="pnpm" %}

```bash
pnpm create vueless@latest
```

{% endtab %}

{% tab title="bun" %}

```bash
bun create vueless@latest
```

{% endtab %}
{% endtabs %}

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.

{% tabs %}
{% tab title="npm" %}

```bash
npm install vueless
npx vueless init
```

{% endtab %}

{% tab title="yarn" %}

```bash
yarn add vueless

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

{% hint style="info" %}
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.
{% endhint %}
{% endtab %}

{% tab title="pnpm" %}

```bash
pnpm add vueless
pnpm exec vueless init --pnpm
```

{% hint style="info" %}
Use the `--pnpm` flag when working with pnpm. This will generate a `.npmrc` file preconfigured with the necessary settings for the Vueless package.
{% endhint %}
{% endtab %}

{% tab title="bun" %}

```bash
bun add vueless
bunx vueless init
```

{% endtab %}
{% endtabs %}

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

{% code title="main.{js,ts}" %}

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

const vueless = createVueless();

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

{% endcode %}

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

{% code title="main.css" %}

```scss
@import "tailwindcss";
@import "vueless";
```

{% endcode %}

4\. Add Vite plugins.

{% code title="vite.config.{js,ts}" overflow="wrap" %}

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

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

{% endcode %}

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.vueless.com/installation/vue.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.