Vue is an extremely popular JavaScript framework! Vue works with a regular ol’ <script> tag linking up the library and your existing HTML and CSS if you’d like it to, so in that sense, Vue already works great with the Pen Editor. Here’s an example of using Vue that way.
But Vue also supports the idea of Single File Components (SFCs), which is also a very popular way to use Vue. These SFCs need to be compiled specially with a build tool like webpack or Browserify, meaning the regular Pen Editor on CodePen can’t really do them.
Good news! We now have a custom editor just for Vue SFCs!
You might want to bookmark that URL for now, as you won’t find a way to this custom editor in the CodePen interface just yet. That’s coming, of course, we just have some work to do to prepare for that.
Listen to our podcast
We chat about this in detail.
Watch our video
If you’d like to see some first-steps from an absolute Vue beginner on how Vue SFCs work, here’s a video I did:
Can’t you use Vue on CodePen without this custom editor?
Yes! You can. Like I mentioned at the top of the article, Vue can work as a JavaScript library on the page in a regular <script> tag, which is a perfectly acceptable way to use Vue (try adding it as an External Resource).
In fact, our Vue Topic is mostly Pens that use Vue in that way for now, although we plan to evolve it to be a mixture of both. You just can’t write Vue in the Single File Component syntax without using this custom editor.
Changing Vue Versions
As I write, Vue 3 isn’t released as a stable version just yet, but you can still play with it here on CodePen! Under Pen Settings you can switch between the latest versions of both:
All the regular features of CodePen
While you create Pens with this custom editor, they are still Pens. You can make them private. They work with Collab and Professor Mode. You can embed them, even editable and prefill embeds work. They are just like any other Pen!
The post A Custom Editor Just for Vue Single File Components (.vue Files) appeared first on CodePen Blog.