Nuxt.js Installation Guide
1
Install Node.js
1Step 1
Check if Node.js is installed by running: node -v.
2Step 2
If not installed, download and install it from https://nodejs.org.
2
Create a Nuxt 3 App
1Step 1
Run: npx nuxi@latest init nuxt-tetrons-app
2Step 2
Navigate into project folder: cd nuxt-tetrons-app
3Step 3
Install dependencies: npm install
3
Run Development Server
1Step 1
Run: npm run dev
2Step 2
Open your browser at: http://localhost:3000
4
Create or Add Tetrons Editor in a Page
1Step 1
Create a new file: pages/editor.vue or add where you require the editor
2Step 2
Paste the provided iframe code to embed the Tetrons Editor.
1<template>
2 <iframe
3 id="tetrons-iframe"
4 src="https://product.tetrons.com/embed"
5 style="width:100%; height:100vh; border:none;"
6 allow="clipboard-read; clipboard-write; microphone; camera"
7 ></iframe>
8</template>5
View the Page
1Step 1
Visit: http://localhost:3000/editor in your browser.
2Step 2
You should see the embedded Tetrons Editor.
6
Optional: Use Tailwind CSS
1Step 1
Install Tailwind CSS using: npx nuxi@latest add tailwind
2Step 2
Run: npm install
3Step 3
Restart dev server to apply Tailwind to your app.
Output Preview
