> ## Documentation Index
> Fetch the complete documentation index at: https://rodrigo.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Vue

> Install and configure Vue

* [Example](https://root-axis-vue.vercel.app/)
* [Repo](https://github.com/rodrigoant/root-axis-examples/tree/main/packages/vue)

**1. Install the design system**\`\`\`bash theme=
npm install "@root-axis/design-system"

````

\**2. Setting up your files**

import the design system in your **main.ts** file

\```ts main.ts theme={null}
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

import '@root-axis/design-system';

createApp(App).mount('#app')
\```

Import the tokens in your styles file

\```css style.css theme={null}
@import '@root-axis/design-tokens';
\```

**3. Done!**Now you can do whatever you want with the component```html App.vue theme={null}
<script setup lang="ts">
  import { ref } from 'vue'
  const count = ref(0)
</script>

<template>
  <ra-button @click="count++"> count is {{ count }} </ra-button>
</template>
````


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.