←
January 2021

How to use Snowpack and Vue with single file components

Snowpack is awesome, it’s fast and it just works. No complicated configs, and gone are the days of spending hours tooling. Snowpack uses JavaScript ES modules (ESM) which work natively in modern browsers.

Let’s create a Hello World app in Vue 3.0 with Snowpack 3.0 in 5 minutes.

You can find the code for this guide here: https://github.com/matiasvad/snowpack-module

Create a new project and initialise it.

yarn init -y

Install Vue, Snowpack and the @snowpack/plugin-vue, to enable SFC .vue in Snowpack.

yarn add vue@next snowpack @snowpack/plugin-vue

Initialise Snowpack, this will create a snowpack.config.js file, in which we can add the Vue plugin.

yarn snowpack init

Add "@snowpack/plugin-vue" as a plugin.

// Snowpack Configuration File
// See all supported options: https://www.snowpack.dev/reference/configuration
module.exports = {
  mount: {},
  plugins: ["@snowpack/plugin-vue"],
  packageOptions: {},
  devOptions: {},
  buildOptions: {},
};

Create an index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Snowpack and Vue Component</title>
</head>
<body>
  <div id="app"></div>
</body>
</html>

Create your Vue component and add it to main.js

import { createApp } from "vue";
import Hello from "./src/components/Hello.vue";

createApp(Hello).mount("#app");

Your component can be anything you’d like, I went with a simple Hello Vue.

<template>
  <p>{{ message }}</p>
</template>

<script>
  export default {
    data() {
      return {
        message: 'Hello Vue'
      }
    }
  }
</script>

Add main.js to your index.html as a module – this is important, if it’s not included as a module it will not load.

<script type="module" src="./main.js"></script>

Run Snowpack with yarn run snowpack dev, and view your app come to life.

Woohoo! 🎉 You now have a working Vue app with single-file components being built with Snowpack.

Lightning-fast, almost no tooling required.