Codepen.io clone using Vue 3 and Monaco Editor1 min read

September 15, 2021 Tagged #frontend, Codepen Clone, Coding, coding tools, CSS, Design, Editing, Frontend Development, HTML, Interactive, javascript, Monaco Editor, Online Editor, UX, UX Design, Vue 3., vue js, Web Development, webdesign

Code Playground

I attempt to clone codepen.io using Vue 3 and Monaco editor.

View Demo
View Github

Installing

Install dependencies

npm install

Fire up the server and watch files

npm run dev

Built with

Vue 3
Vite
Monaco Editor
Tailwind CSS
VueUse
Split.js
Skypack for CDN imports
Vercel

Recommended IDE Setup

VSCode + Vetur. Make sure to enable vetur.experimental.templateInterpolationService in settings!

If Using <script setup>

To get proper IDE support for the syntax, use Volar instead of Vetur (and disable Vetur).

Inspiration

https://tailwind-layouts.vercel.app/
https://play.tailwindcss.com/

Generated by Feedzy