Skip to main content

Build a Vue App

Ready to implement a feature-rich application with Juno? You can choose a step-by-step approach, building each component gradually, or dive into our quickstart template, which showcases Juno's core features.

Which path would you like to explore next?

Step-by-step​

This guide provides quickstart instructions for integrating Juno in two scenarios: starting a new project and adding Juno to an existing Vue app.

1. Choose Your Integration Path​

You can either start a new project or add Juno to an existing app.

Path A: Start a new project with a template​

Create a new project using the Juno quickstart CLI:

npm create juno@latest -- --template vue-starter

Path B: Integrate Juno into an existing Vue app​

Navigate to your existing app:

cd your-existing-app

and install Juno SDK:

npm i @junobuild/core

2. Start the Emulator​

If the Juno admin CLI (required to run the emulator) is not installed yet, run:

npm i -g @junobuild/cli

Once installed, start the local emulator:

juno emulator start

Open the Console UI at http://localhost:5866/.

note

When developing locally, you get an all-in-one emulator that closely mimics the production environment. This includes providing Juno and its Console UI locally.

Sign in, create a Satellite, navigate to the Datastore section, and create a collection named demo.

3. Configure​

To initialize the library with the Satellite ID you created, configure it in the juno.config.ts file (or other extension), which should be available at the root of your project.

Replace <DEV_SATELLITE_ID> with the ID.

import { defineConfig } from "@junobuild/config";

export default defineConfig({
  satellite: {
    ids: {
      development: "<DEV_SATELLITE_ID>",
      production: "<PROD_SATELLITE_ID>"
    },
    hosting: {
      source: "dist",
      predeploy: ["npm run build"]
    }
  }
});

4. Install the Plugin (If Needed)​

If you didn't start your project from a template, you'll need to install the plugin to automatically inject the Satellite ID into your app as an environment variable.

Proceed as documented here.

5. Insert data from your app​

In App.vue, or at the top of your app, initialize the Satellite when your app is mounted.

Add an insert function to persist a document.

App.vue
<script setup>
  import { initSatellite, setDoc } from "@junobuild/core";
  import { onMounted, ref } from "docs/guides/vue/build.mdx";

  onMounted(initSatellite);

  const doc = ref(undefined);

  const insert = async () => {
    doc.value = await setDoc({
      collection: "demo",
      doc: {
        key: window.crypto.randomUUID(),
        data: {
          hello: "world"
        }
      }
    });
  };
</script>

<template>
  <button @click="insert">Insert a document</button>
  <span v-if="doc !== undefined">Key: {{ doc.key }}</span>
</template>

6. Start the app​

Start the app, go to http://localhost:5173 in a browser, click "Insert a document," and you should see the data successfully persisted in your satellite.

What's Next: Going Live

Once you're ready to deploy your app for others to access, continue to the Deployment guide.

Quickstart​

This example demonstrates how to quickly deploy a basic note-taking app that integrates Juno's core features:

  • Authentication: easy-to-use SDKs that support truly anonymous authentication.
  • Datastore: a simple key-pair database for storing user data and other information.
  • Storage: a file storage system to store and serve user-generated content, such as photos.

Using the Juno CLI, you can easily scaffold this app.

npm create juno@latest -- --template vue-example

Follow the CLI prompts to choose the note-taking app example and select local development. The CLI will manage all configurations and dependencies, allowing you to focus on exploring and customizing your app right away.