Posted on by Chris Coyier

Vue Editor: Now with ES Modules

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. 

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

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

export default {
  methods: {
    doSomething() {
      confetti();
    }
  }
};
</script>

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.

The post Vue Editor: Now with ES Modules appeared first on CodePen Blog.

CategoriesUncategorized