How to add the whole of VSCode itself into a VueJS webapp? - vue.js

I am trying to build a VueJS webapp that has the whole VSCode editor embedded inside of it similar to codesandbox. What part of the vscode codebase do we need in order to get the entire VSCode running inside of VueJS?
So my idea was that I would have a navbar and underneath the navbar I would have the VSCode Editor.

You don't need VS code codebase, since it wouldn't work out of the box in the browser, like you want to. Take a look at Monaco editor, it is basically VS Code editor for browsers.

Related

VSCode Extension - API

I am trying to include similar icons with buttons like next to Open Editor on my vscode extension (1st image). Not sure where to add them.
I have worked this far:
Can someone tell which API to deploy next?

Autocomplete in vscode while using vue cdn

I'm building a project where some parts of the webpage are Vue components. And offcourse I'm using Vscode to develop it. Since this is not a complete Vue app I'm not able to use extensions like vetur to autocomplete. I was wondering if there was a way to tell Vscode that <script> includes "Vue" code or is there an extension to do so?
I don't think there is.
Just try working with it that way.
Or better still, work with the .vue files in a separate folder and move them to your current working directory when you're done.
Not efficient, but it's the best solution I can think of.

NetSuite Suitelet/RESTlet to display VueJS app

I am attempting to build a popup Suitlete that displays a Vue app. It needs to have the ability to pass data back and forth into the transaction that opened it.
Has anyone done this in the past and if so what did the setup for the Vue files and the Suitelet/RESTlet look like? Can't seem to find examples.
You can find projects on GitHub that have great Vue/NetSuite project file setups, ones where you can use Vue CLI to work locally that still work with RESTlets. Here's one https://github.com/michoelchaikin/netsuite-mapreduce-util

Heroicons not appearing in chrome for TailwindUI, but appears broken in Firefox

I bought and installed TailwindUI. I copied and pasted one of the Navigation components just to see how it looks in the app and the hamburger menu and the notification bell (both part of Heroicons) aren't appearing.
When I click on the part where the menu should dropdown it works. But all that's present is a little square that sort of looks like a checkbox.
Here is what it looks like in Firefox (mobile debugger):
Testing on Safari and it looks like Chrome.
In node_modules I can see heroicons are present:
The app uses Elixir/Phoenix, Vue, Webpack, and Tailwindcss.
Anyone know what the issue is or how I'd go about debugging it?
If you are not using SVG syntax, you have to install and import #heroicons/react package into your project using npm/yarn
npm install #heroicons/react
TailwindUI supports Vue 3, which does not appear to include #vue/compat. #vue/compat is a compatibility build for when one wants to migrate from Vue 2 to Vue 3. the compat build (aka, migration build) is supposed to be Vue 3 compatible but I guess it's still not enough for TailwindUI.

WebStorm HTML file is not showing code folding tags

I am facing problem in WebStorm editor. When I use any Angular or React project the HTML files are having code folding options. But when I use the simple HTML/CSS/JS project. HTML file is not showing code folding options.
This is really weird how to enable code folding for specific project types?