Vue Example

This project is a note-taking app template built with Vue, TypeScript, and Tailwind CSS, designed to demonstrate integration with Juno for app development. It showcases authentication, data storage, and file storage using Juno's Satellite container.

You can scaffold it using the following command, or browse the source code:

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

Source: github.com/junobuild/create-juno/templates/vue-example

---

Folder Structure

vue-example/
├── public/                # Static assets
├── src/
│   ├── components/        # Vue UI components (Auth, Table, Modal, Banner, etc.)
│   ├── stores/            # Pinia stores for auth, etc.
│   ├── types/             # TypeScript types (e.g., note.ts)
│   ├── App.vue            # Main app component
│   ├── main.ts            # Vue entry point
├── juno.config.ts         # Juno Satellite configuration
├── package.json           # Project dependencies and scripts
├── vite.config.ts         # Vite build configuration
├── README.md              # User-facing documentation
└── ...                    # Other config and build files

---

Key Features

• Juno Integration: Uses Juno's Satellite for authentication, Datastore, and Storage.
• Authentication: Login/logout flow.
• Notes Collection: Users can create, view, and delete notes (text, with optional file URL).
• Images Collection: Supports file storage for images.
• Responsive UI: Built with Tailwind CSS for modern styling.
• Banner: Warns if the Satellite is not configured for local development.

---

Main Components

• src/App.vue: Main app component, initializes Juno Satellite, wraps content in authentication.
• components/: Contains UI and logic for authentication, notes table, modal, banner, etc.
• stores/auth.store.ts: Pinia store for authentication state.
• types/note.ts: TypeScript interface for notes.

---

Data Structure

• Note (src/types/note.ts):

export interface Note {
  text: string;
  url?: string;
}

---

How to Run

1. Install dependencies:

npm install

2. Start Juno local emulator:

important

Requires the Juno CLI to be available npm i -g @junobuild/cli

juno dev start

3. Create a Satellite for local dev:

• Visit http://localhost:5866 and follow the instructions.
• Update juno.config.ts with your Satellite ID.

4. Create required collections:

• notes in Datastore: http://localhost:5866/datastore
• images in Storage: http://localhost:5866/storage

5. Start the frontend dev server (in a separate terminal):

npm run dev

---

Juno-Specific Configuration

• juno.config.ts: Defines Satellite IDs for development/production, build source, and predeploy steps. See the Configuration reference for details.
• vite.config.ts: Registers the juno plugin to inject environment variables automatically. See the Vite Plugin reference for more information.

---

Production Deployment

• Create a Satellite on the Juno Console for mainnet.
• Update juno.config.ts with the production Satellite ID.
• Build and deploy:

npm run build
juno deploy

---

Notes

• The app is intended as a starting point for Juno-based projects.
• All logic is in TypeScript and Vue components/stores.
• The app is fully client-side (Server Side Rendering is not supported yet) and interacts with Juno via the Satellite container.

---

Juno SDK Used

The following functions from @junobuild/core are used in this example:

Function	Purpose/Description	Where Used (File/Component)	Juno Docs/Source Reference
initSatellite	Initialize Juno Satellite container	src/App.vue	Initialization
authSubscribe	Subscribe to auth state changes	src/stores/auth.store.ts	Listening to Auth Changes
signIn	Sign in user	src/components/Login.vue	Sign-in
signOut	Sign out user	src/components/Logout.vue	Sign-out
listDocs	List documents in a collection	src/components/Table.vue	List documents
setDoc	Create or update a document	src/components/Modal.vue	Add a document
deleteDoc	Delete a document	src/components/Delete.vue	Delete a document
uploadFile	Upload a file to storage	src/components/Modal.vue	Upload file
deleteAsset	Delete a file from storage	src/components/Delete.vue	Delete asset