Build and deploy a static online shop with Nuxt3 using Pinia Store and Stripe Checkout to Firebase

Nuxt3 final release is due in a few days 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 GitHub.

Getting started - installing Nuxt3, Pinia Store and TailwindCSS

Installing Nuxt3 is, as expected, straight forward.

The official installation docs require Node.js version 16.11 or above. If like myself you have several projects requiring different Node.js versions, you can consider using NVM (Node Version Manage) to easily switch between Node.js versions.

npx nuxi init my-shop-name

cd my-shop-name

npm install

npm run dev

The new Nuxt3 site will be available at http://localhost:3000.

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:

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.

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

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

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

Continue reading...