Follow the steps below to add your Visiopt UniversalSmart Code to your VueJS project.
Step-by-Step Instructions
| 1 | Log in to your Visiopt account at app.visiopt.com. |
| 2 | Navigate to Settings → Manage Your Domain from the top navigation menu. |
| 3 | Click on the "Add New Domain" button to begin adding your website. |
| 4 | Fill in the required details: • Website Name — Enter a name for your website. • Website URL — Enter the full URL of your website (e.g., https://yourwebsite.com). • Frontend Framework — Select "VueJS" from the dropdown list. Then click Save to proceed. |
| 5 | After saving, Visiopt will generate your unique UniversalSmart Code for your Vue domain. Copy this code snippet.
|
| 6 | Open your VueJS project in your code editor. |
| 7 | Locate the index.html file in the root or public/ folder of your project: your-vue-app/ └── public/ └── index.html ← Add the code here (For Vue 3 with Vite, index.html is in the root folder) |
| 8 | Paste the UniversalSmart Code inside the <head> tag of your index.html file, as shown below: |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>My Vue App</title>
<!-- Start Visiopt UniversalSmart Code --> // Paste your Visiopt UniversalSmart Code here <!-- End Visiopt UniversalSmart Code --> </head> <body> <div id="root"></div> <script type="module" src="/src/main.js"></script> </body> </html> |
| 9 | Save the index.html file and restart your Vue development server (npm run dev or npm run serve) if it is running. |
| 📌 Note: For Vue 2 projects using Vue CLI, the index.html is inside the public/ folder. For Vue 3 projects using Vite, the index.html is in the project root. In both cases, add the UniversalSmart Code inside the <head> tag. |
Comments
0 comments
Please sign in to leave a comment.