Use Juno with Vue
Explore how to create a Juno project developed with Vue.
Table of contents
Quickstart
Learn how to create a satellite, set up a collection, and save data from a Vue app.
1. Set up a satellite and new collection
Create a new satellite in the Juno's console.
After your project is ready, create a collection in your datastore, which we'll call demo
, using the console.
2. Create a Vue app
Create a Vue app using the npm init
command.
npm init vue@latest myjunoapp
3. Install the Juno SDK core library
Use @junobuild/core
client library which provides a convenient interface for working with Juno from a Vue app.
Navigate to the Vue app and install @junobuild/core
.
cd myjunoapp && npm i @junobuild/core
4. Insert data from your app
In App.vue
, initialize the library with your public satellite ID.
Add an insert
function to persist a document.
<script setup>
import { initJuno, setDoc } from "@junobuild/core";
import { onMounted, ref } from "vue";
onMounted(
async () =>
await initJuno({
satelliteId: "wjar4-kiaaa-aaaal-ab4va-cai",
})
);
const doc = ref(undefined);
const insert = async () => {
doc.value = await setDoc({
collection: "demo",
doc: {
key: `my-key-${new Date().getTime()}`,
data: {
hello: "world",
},
},
});
};
</script>
<template>
<button @click="insert">Insert a document</button>
<span v-if="doc !== undefined">Key: {{ doc.key }}</span>
</template>
5. 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 on the blockchain.
Note-taking app
This tutorial, published as a blog post, demonstrates how to build a basic note-taking app. The app authenticates and identifies the user, stores their notes in a simple key-pair database, some files in storage, and allows the user to log in and retrieve their data. The app uses:
- Juno datastore: a simple key-pair database for storing user data and other information.
- Juno storage: a file storage system to store and serve user-generated content, such as photos.
- Juno authentication: easy-to-use SDKs that support truly anonymous authentication.
For detailed instructions, visit the guide 👉 Build a Web3 App with VueJS.
Hosting
If you're looking to deploy your existing app or website developed with Vue and Juno, this guide is for you.
1. Set up a satellite
If you haven't created a satellite yet, go ahead and create a new one in the Juno's console.
2. Install Juno CLI and log in
Install the Juno command line interface by executing the following command in your terminal:
npm i -g @junobuild/cli
After the CLI is ready, log in to your satellite from your terminal to authenticate your device.
juno login
3. Deploy
Build your app:
npm run build
Deploy your project by running the following command from your project’s root folder:
juno deploy
When prompted to provide the name or path of the folder containing your built dapp files, answer dist
.
4. Open
Open your browser and you should see your deployed app or website.
juno open