HTMLDrop.

Vue starter

Vue 3 with the Composition API, loaded as an ES module. No build step.

Open in editor Free. No install, no sign-up.
  • vue

The code

Three files, exactly what you get in the editor.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Vue starter</title>
  </head>
  <body>
    <div id="app" class="app" v-cloak>
      <a href="https://vuejs.org/" target="_blank"
        ><svg class="logo vue" viewBox="0 0 261.76 226.69" role="img" aria-label="Vue">
          <path
            d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z"
            fill="#41b883"
          />
          <path
            d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z"
            fill="#34495e"
          /></svg
      ></a>
      <h1>{{ message }}</h1>
      <div class="card">
        <button type="button" @click="count++">count is {{ count }}</button>
        <p>Edit <code>script.js</code> and watch the preview update.</p>
      </div>
      <p class="hint">
        Check out the
        <a href="https://vuejs.org/guide/quick-start.html" target="_blank">Vue docs</a> to learn
        more.
      </p>
    </div>
  </body>
</html>

:root {
  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;
  color-scheme: light dark;
  color: rgba(255, 255, 255, 0.87);
  background-color: #242424;
  -webkit-font-smoothing: antialiased;
}
body {
  margin: 0;
  display: flex;
  place-items: center;
  min-width: 320px;
  min-height: 100vh;
}
a {
  font-weight: 500;
  color: #42b883;
  text-decoration: inherit;
}
a:hover {
  text-decoration: underline;
}
h1 {
  font-size: 3.2em;
  line-height: 1.1;
  margin: 0.4em 0;
}
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
}
button {
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0.6em 1.2em;
  font-size: 1em;
  font-weight: 500;
  font-family: inherit;
  background-color: #1a1a1a;
  cursor: pointer;
  transition: border-color 0.25s;
}
button:hover {
  border-color: #42b883;
}
button:focus-visible {
  outline: 4px auto -webkit-focus-ring-color;
}
#app,
.app {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
}
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
.card {
  padding: 2em;
}
.hint {
  color: #888;
}
@media (prefers-color-scheme: light) {
  :root {
    color: #213547;
    background-color: #ffffff;
  }
  button {
    background-color: #f9f9f9;
  }
}
[v-cloak] {
  display: none;
}
.logo.vue {
  height: 7em;
}

import { createApp, ref } from "https://unpkg.com/vue@3/dist/vue.esm-browser.prod.js";

createApp({
  setup() {
    const message = ref("Hello Vue!");
    const count = ref(0);
    return { message, count };
  },
}).mount("#app");

Questions

Can I use Vue without a build step?

Yes. This starter loads Vue straight from a CDN, so it runs in the browser with no npm install, bundler, or config.

How do I start a Vue project online?

Click Open in editor. HTMLDrop copies this starter into a new drop with index.html, style.css, and script.js, and the preview updates as you edit.

Is it free?

Yes. Public drops, live collaboration, versions, and embeds are free, and you do not need an account to start.

Can I share or embed my Vue demo?

Yes. Every drop gets a public link and an embed code, and you can invite others to edit it with you in real time.

More starter kits