We’ve upgraded the Vue SFC Editor to process your code to support ES modules imports, and output into ES modules format.

This means two things:

1) CDN Imports!

Now you can, for example, pull packages from npm as use them. Skypack is great for that.

  <button @click="doSomething">Do Confetti!</button>

import confetti from "https://cdn.skypack.dev/canvas-confetti";

export default {
  methods: {
    doSomething() {

2) Import other Vue Pens!

Take this Pen. Now look at its processed JavaScript output. You can see in the last line that it exports a default. Meaning it’s ready to be imported into any other Vue Pen!

Here’s a Vue Pen importing another:

This is now in the documentation.