https://github.com/posva/vuefire-vite-example

Example project using VueFire in a vite project
https://github.com/posva/vuefire-vite-example

firebase firebase-authentication firebase-database firestore vue vuefire

Last synced: 21 days ago
JSON representation

Example project using VueFire in a vite project

• Host: GitHub
• URL: https://github.com/posva/vuefire-vite-example
• Owner: posva
• Created: 2022-12-19T10:59:26.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2022-12-22T09:26:55.000Z (about 2 years ago)
• Last Synced: 2024-12-30T15:44:26.319Z (27 days ago)
• Topics: firebase, firebase-authentication, firebase-database, firestore, vue, vuefire
• Language: Vue
• Homepage: https://vite-vuefire.web.app
• Size: 45.9 KB
• Stars: 23
• Watchers: 2
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/funding.yml

Awesome Lists containing this project

README

        
# Vite example with VueFire

- [Demo on Stackblitz](https://stackblitz.com/github/posva/vuefire-vite-example?file=README.md)

- [Online Demo](https://vite-vuefire.web.app/)

This is a working example of how to use VueFire with Vite created with:

```sh

npx create vite my-vuefire-app --template vue-ts

```

Then added VueFire and firebase

```sh

npm i firebase vuefire

```

> **Note**

> Replace `npm` with your favorite package manager

Settup a Firebase app at [Firebase Console](https://console.firebase.google.com/) and follow their instructions to get your Firebase config and set it in `main.ts`.

Used `firebase-tools` package to add the configuration to the project with:

```sh

firebase init

```

The options selected were:

- Realtime Database

- Firestore

- Hosting

Make sure to change the `public` directory to `dist`, configure as a single-page-app. If you set up GitHub actions, **make sure the repository is created** before calling `firebase init`. If you miss any step, that's fine you can call `firebase init` again and select only what you want to add.

## GitHub Workflows

The GitHub workflows you will find in this repository have been adapted from the generated ones to include a cache with pnpm.

## Firebase config

If you want to use this repository as a starter for your project, make sure to replace the different firebase files with your own or simply, run `firebase init` to override them. You will also need to update the config in `main.ts` with your own.