Source: https://datafa.st/docs/vuejs
Markdown source: https://datafa.st/docs/vuejs.md
Description: How to add DataFast to your Vue.js project

# Add DataFast to your Vue.js project

Follow these steps to integrate DataFast analytics into your Vue.js application.

## Add tracking script to main.js

The recommended way to add scripts to all pages in a Vue.js application is by adding it to your main entry file.

1. Open your project's main file (usually `main.js` or `main.ts`).
2. Add the DataFast tracking script:

    ```javascript
    import { createApp } from 'vue'
    import App from './App.vue'

    // Add DataFast script
    const script = document.createElement('script')
    script.defer = true
    script.setAttribute('data-website-id', 'dfid_******')
    script.setAttribute('data-domain', 'your_domain.com')
    script.src = 'https://datafa.st/js/script.js'
    document.head.appendChild(script)

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

    > Replace `dfid_******` with your actual Website ID from DataFast.
    > Replace `your_domain.com` with your website's root domain.

## Alternative: Using index.html

You can also add the script directly to your `index.html` file:

```html
<script
  defer
  data-website-id="dfid_******"
  data-domain="your_domain.com"
  src="https://datafa.st/js/script.js"
></script>
```

## Verify installation

After implementing either method:
- Visit your live website
- Check your [DataFast dashboard](/dashboard) for incoming data
- It might take a few minutes for the first pageviews to appear

> For advanced configuration options like localhost tracking, custom API endpoints, or cross-domain setup, see the [script configuration reference](/docs/script-configuration).