Faronsince2016 / codeplayground

Codepen.io clone using Vue 3 and Monaco Editor

Code Playground

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

Installing

1. Install dependencies

   npm install

2. 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/

License

Licensed under the MIT license.