{"id":16439169,"url":"https://github.com/posva/nuxt--vuefire-example-spark-plan","last_synced_at":"2025-09-11T06:31:32.915Z","repository":{"id":185380721,"uuid":"672940210","full_name":"posva/nuxt--vuefire-example-spark-plan","owner":"posva","description":"🔥 Nuxt + VueFire template to bootstrap your Firebase App","archived":false,"fork":false,"pushed_at":"2024-07-13T13:54:09.000Z","size":1108,"stargazers_count":29,"open_issues_count":0,"forks_count":7,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-01T23:24:46.268Z","etag":null,"topics":["firebase","nuxt","vue","vuefire"],"latest_commit_sha":null,"homepage":"https://nuxt-vuefire-example-spark.web.app/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/posva.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/funding.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"posva"}},"created_at":"2023-07-31T14:02:47.000Z","updated_at":"2025-03-29T02:21:22.000Z","dependencies_parsed_at":null,"dependency_job_id":"c15b1878-6118-4d6f-9878-11808ef3a57b","html_url":"https://github.com/posva/nuxt--vuefire-example-spark-plan","commit_stats":{"total_commits":34,"total_committers":1,"mean_commits":34.0,"dds":0.0,"last_synced_commit":"8b304b5e0a0d749ee40446481cd5dbf4cd5e4ae7"},"previous_names":["posva/nuxt--vuefire-example-spark-plan"],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/posva/nuxt--vuefire-example-spark-plan","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posva%2Fnuxt--vuefire-example-spark-plan","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posva%2Fnuxt--vuefire-example-spark-plan/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posva%2Fnuxt--vuefire-example-spark-plan/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posva%2Fnuxt--vuefire-example-spark-plan/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/posva","download_url":"https://codeload.github.com/posva/nuxt--vuefire-example-spark-plan/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posva%2Fnuxt--vuefire-example-spark-plan/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274589507,"owners_count":25312971,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-11T02:00:13.660Z","response_time":74,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["firebase","nuxt","vue","vuefire"],"created_at":"2024-10-11T09:08:19.564Z","updated_at":"2025-09-11T06:31:32.566Z","avatar_url":"https://github.com/posva.png","language":"Vue","funding_links":["https://github.com/sponsors/posva"],"categories":[],"sub_categories":[],"readme":"# Nuxt + VueFire Template\n\n[Nuxt](https://nuxtjs.org/) template with [VueFire](https://vuefire.vuejs.org/) to get started with [Firebase](https://firebase.google.com/) using the Free **Spark Plan**. If you are looking for the same version with SSR and Cloud Functions, check the [Blaze Plan template instead](https://github.com/posva/nuxt--vuefire-example-blaze-plan).\n\nYou can check a live demo at [nuxt-vuefire-example-spark.web.app](https://nuxt-vuefire-example-spark.web.app).\n\n![Screenshot](./assets/screenshot.png)\n\nIn order to test this locally, follow all the steps in [Provisioning Firebase](#provisioning-firebase) and [Development Server](#development-server). Since this example is using most of Firebase features, there are quite a few things to do. In practice, you might only use half of them.\n\n## Trying this out locally\n\nThanks to [Firebase Emulators](https://firebase.google.com/docs/emulator-suite), you can try this template locally without even creating a Firebase project. You will need to install the [Firebase Tools CLI](https://firebase.google.com/docs/cli) with `npm i -g firebase-tools`, install dependencies with `pnpm i`, and then run in two different processes:\n\n```bash\npnpm run emulators\n```\n\nand\n\n```bash\npnpm run dev\n```\n\n## Using this template\n\nIt's recommended to use git to clone this template and track any changes made by the Firebase Tools CLI to revert them if needed.\n\nYou will also need to install the Firebase Tools CLI, either globally or locally. To install globally do:\n\n```bash\nnpm install -g firebase-tools\n```\n\nThen login to your Firebase account with `firebase login`.\n\nInstall dependencies with `pnpm install`.\n\n## Provisioning Firebase\n\nStart by creating a Firebase Project [in the console](https://console.firebase.google.com/).\n\nActivate **now** any of the features you want to use (note the starter uses them all):\n\n- Firestore\n- Authentication\n- Realtime Database\n- Storage\n\nCreate an Application in the _Project Overview_. This will give you a `firebaseConfig` object, replace the content of `vuefire.config` in `nuxt.config.ts` with it.\n\nNow you have to run `firebase init` at the root of your project. Some notes:\n\n- Select the features you want to use.\n- Note the deployed folder of Nuxt is `.output/public`, not `public` as the firebase tools CLI will suggest.\n- Selecting GitHub actions will create a service account to allow GitHub to deploy to Firebase. If you don't enable this, you should also remove the `.github/workflows` folder as it will just won't work.\n\nThis step should overwrite some files, you can revert most of them if you want to test this template with your own project. The only file that **shouldn't be reverted is** `.firebaserc` as it contains the project ID.\n\nYou can also create the `.env` from the example:\n\n```bash\nmv .env.example .env\n```\n\nYou can now clean up any files you don't need, for example, if you are not using the Realtime Database, you can delete `database.rules.json`.\n\n### Service Account\n\n\u003e If you don't want to use a Service Account file, **you will have to turn off SSR in `nuxt.config.ts` with `ssr: false`** and delete the line `GOOGLE_APPLICATION_CREDENTIALS=./service-account.json` from `.env`.\n\nFor some Nuxt features to work like server side rendering, you will need to create a service account. You can do this from the _Project Settings_, _Service Accounts_ tab. Then, download the JSON file and save it as `service-account.json` at the root of your project.\n\n### App Check\n\n\u003e If you don't want to use App Check, delete the `vuefire.appCheck` object from `nuxt.config.ts` and remove the line `FIREBASE_APPCHECK_DEBUG_TOKEN=...` from `.env`.\n\nOnce you have completed the deployment as explained above, you can optionally register App Check. You will then need to register a _reCAPTCHA v3_ provider. You can find the instructions for this in [Firebase Documentation](https://firebase.google.com/docs/app-check#web), they will tell you [to register your site for reCAPTCHA v3](https://www.google.com/recaptcha/admin/create) and to copy your _secret key_ in the firebase console. Then, you will need to copy the _site key_ in your `nuxt.config.ts` file:\n\n```ts{8} [nuxt.config.ts]\nexport default defineNuxtConfig({\n  // ...\n  vuefire: {\n    // ...\n    appCheck: {\n      provider: 'ReCaptchaV3',\n      // site key, NOT secret key\n      key: '...',\n      isTokenAutoRefreshEnabled: true,\n    },\n  },\n})\n```\n\nIt's also recommended to generate a debug token now from the Firebase Console, on the Apps tab, and add it to your `.env` file:\n\n```text\nGOOGLE_APPLICATION_CREDENTIALS=./service-account.json\nFIREBASE_APPCHECK_DEBUG_TOKEN=...\n```\n\nNote you will need to enforce App Check on the _APIs_ tab of the Firebase Console for each service you want to protect.\n\n## Development Server\n\nIf you added support for emulators, you will need to start them before starting the Nuxt development server.\n\nYou can start the emulators with `npm run emulators` or `firebase emulators:start`. Then start the server with `npm run dev`.\n\n### Debugging\n\nYou can activate VueFire logs with:\n\n```bash\nCONSOLA_LEVEL=5 npm run dev\n```\n\n## Building for Production\n\nSince this is an SPA, building for production is usually done with `pnpm run generate`.\n\n### Previewing Locally\n\nIn order to preview a production build locally, you will need to enable debug in App Check:\n\n```bash\nVUEFIRE_APPCHECK_DEBUGN=true pnpm run generate\n```\n\nIf you want to preview with emulators, you can force them in a production build with:\n\n```bash\nVUEFIRE_EMULATORS=true pnpm run generate\n```\n\nNote you can combine both by just passing the variables one after the other:\n\n```bash\nVUEFIRE_APPCHECK_DEBUGN=true VUEFIRE_EMULATORS=true pnpm run generate\n```\n\n### Deploying to Firebase\n\nAlways deploy once from the CLI as it might prompt you to create some roles. Once this is done, _link the hosting site_ with the app from the _Project Settings_, _Your apps_ section.\n\nYou can deploy manually with `pnpm run generate \u0026\u0026 firebase deploy`.\n\n### Automatic Deployments on GitHub\n\nIf you enabled GitHub Actions, you can now push to GitHub and it will automatically deploy to Firebase Hosting. **You still need to manually deploy Firestore, Realtime Database, and Storage** with `firebase deploy` or selectively with `--only`, e.g. `firebase deploy --only storage`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fposva%2Fnuxt--vuefire-example-spark-plan","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fposva%2Fnuxt--vuefire-example-spark-plan","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fposva%2Fnuxt--vuefire-example-spark-plan/lists"}