Build and deploy a static online shop with Nuxt3 using Pinia Store and Stripe Checkout to Firebase
Tags: nuxt3, pinia, stripe, firebase
Published: 2022-11-20 05:12:00

---
title: "Build and deploy a static online shop with Nuxt3 using Pinia Store and Stripe Checkout to Firebase"
published: true
description: "Learn how easy it is to build an e-commerce static website with Nuxt3 while taking advantage of state management with Pinia store and accept payments through Stripe Checkout. All hosted for free on Firebase."
tags: nuxt3, pinia, stripe, firebase
cover_image: "https://keith-mifsud.me/images/blog/nuxt1_static.png"
# Use a ratio of 100:42 for best results.
published_at: 2022-11-20 05:12 +0000
---

Nuxt3 final release is <a href='https://v3.nuxtjs.org/community/roadmap/' title='Nuxt3 Roadmap' target="_blank">due in a few days</a> and is already released when you're reading this. I've been looking forward to Nuxt3 for almost a year as I've been experimenting with it since the alpha release. I also tried to use Nuxt3 beta release on a couple of projects earlier this year but, unfortunately I was faced with several issues mainly related to missing plugins such as GraphQL tools and issues with static site generation.

The RC versions have started coming in the past few months, and so I decided to try out the static site generation feature on Nuxt3 by building a small shop, accept Stripe payments and deploy it on Firebase.

I found the process of building the online shop with Nuxt3 and deploying the statically generated pages to Firebase to be a breeze. I will be sharing the steps I've taken to create this website here, with you all.  A useful point of reference for all new Nuxt3 static websites.

> ### 🥱 TLDR
> All the code for setting up a static website with Stripe Checkout using NuxtJs is available on <a href='https://github.com/keithmifsud/nuxt3-static-shop-demo/tree/v1.0-initial-store' title='Demo code on GitHub'>GitHub</a>.

## Getting started - installing Nuxt3, Pinia Store and TailwindCSS

Installing Nuxt3 is, as expected, straight forward.

> The official <a href='https://v3.nuxtjs.org/getting-started/installation' title='Nuxt3 Installation documentation'>installation docs</a> require Node.js version 16.11 or above. If like myself you have several projects requiring different Node.js versions, you can consider using <a destination='https://github.com/nvm-sh/' title='Node version manager'>NVM</a> (Node Version Manage) to easily switch between Node.js versions.

```shell
npx nuxi init my-shop-name

cd my-shop-name

npm install

npm run dev
```

The new Nuxt3 site will be available at <a href='http://localhost:3000' title='Preview the new Nuxt3 website'>http://localhost:3000</a>.

### Installing and configuring a Pinia Store on Nuxt3

This simple static online shop will not be fetching the products or any content from an external source, instead I have all the data in a json file, however, I still wanted to use Pinia Store for a couple of reasons. The first being I wanted to see if it is working as expected on Nuxt3 as I use it on almost on every VueJS project. Second, I think it is easier to swap the data sources from within stores' actions instead of the components directly.

Just run:

```shell
npm install @pinia/nuxt
```

to install the plugin and then add it as a module (with auto-import) to the Nuxt config file `nuxt.config.ts`.

```js
export default defineNuxtConfig({
  modules: [
    [
      '@pinia/nuxt',
      {
        autoImports: [
          ['defineStore', 'definePiniaStore'],
        ],
      },
    ],
  ],
})
```

I then added the initial products store in `./stores/products.js`.

```js
export const useProductsStore = definePiniaStore(
  'products-store',
  {
    state : () => (
      {
        products: [],
      }
    ),
    getters: {},
    actions: {},
  }
)
```


<a href="https://keith-mifsud.me/blog/build-and-deploy-nuxt3-static-site-with-pinia-and-stripe-checkout-on-firebase" title="Build and deploy a static online shop with Nuxt3 using Pinia Store and Stripe Checkout to Firebase">Continue reading...</a>