Vue.js Installation Guide
Install Node.js
Check if Node.js is installed by running: node -v.
If not, download and install it from https://nodejs.org.
Create Vue 3 App (Vite)
Run: npm create vue@latest vue-tetrons-app
Follow the prompts and select Vite + Vue 3 (no additional tools needed).
Navigate into the folder: cd vue-tetrons-app
Install dependencies: npm install
Run Development Server
Run: npm run dev
Open your browser at: http://localhost:5173
Create Editor Page
Create a new file: src/views/EditorView.vue
Paste the provided Vue component code.
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>
12.container {
13 display: flex;
14 flex-direction: column;
15 height: 100vh;
16 width: 100vw;
17 margin: 0;
18 padding: 1rem;
19 font-family: 'Inter', sans-serif;
20}
21h2 {
22 text-align: center;
23 color: #343a40;
24 margin-bottom: 1rem;
25}
26iframe {
27 flex: 1;
28 width: 100%;
29 border: none;
30 border-radius: 8px;
31 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
32}
33</style>Register Route
Open: src/router/index.js or src/router/index.ts (depending on setup).
Add a route for the editor page.
1{
2 path: '/editor',
3 name: 'Editor',
4 component: () => import('../views/EditorView.vue')
5}Navigate to Editor Page
Visit: http://localhost:5173/editor
You should now see the embedded Tetrons Editor inside your Vue app.
Optional: Use Vue Router (If Not Installed)
If Vue Router wasn't included, install it manually:
Run: npm install vue-router
Set it up using the official guide: https://router.vuejs.org/guide/
Output Preview
