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 Editor Page
1Step 1
Create a new file: pages/editor.vue
2Step 2
Paste the provided Vue code to embed the Tetrons Editor.
1<template>
2 <div class="container">
3 <h2>Tetrons Editor</h2>
4 <iframe
5 src="http://staging.tetrons.com/editor/dist/editor-host.html"
6 allowfullscreen
7 ></iframe>
8 </div>
9</template>
10
11<style scoped>
12html, body {
13 margin: 0;
14 padding: 0;
15 height: 100vh;
16 width: 100vw;
17 overflow: hidden;
18 font-family: 'Inter', sans-serif;
19}
20.container {
21 display: flex;
22 flex-direction: column;
23 height: 100vh;
24 width: 100vw;
25}
26h2 {
27 text-align: center;
28 color: #343a40;
29 margin-bottom: 1rem;
30}
31iframe {
32 flex: 1;
33 width: 100%;
34 border: none;
35 border-radius: 0.3rem;
36 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
37}
38</style>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
