Setting up pinia persistent store on an individual web page

Question

I have a simple vue js app and its only for one page only but i also want to access pinia stores when a i navigate to another page of the larger app.

I have setup vue 3, pinia and pinia persistent storage like this

<script src="https://unpkg.com/vue@3"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pinia/2.0.14/pinia.iife.js"></script>
<script src="https://unpkg.com/pinia-plugin-persistedstate-2"></script>

This works

const { createApp } = Vue

  createApp({
    data() {
      return {
        firstname: 'Hello Vue!'
      }
    }
  }).mount('#app')

Since pinia and pinia persistent state are available on the cdn, how can i port this to work entirely on the browser and can i access the stored data if i navigate to another browser page?

import { defineStore } from 'pinia'
import { createPersistedStatePlugin } from 'pinia-plugin-persistedstate-2'

export const useStore = defineStore('main', {
  state: () => {
    return {
      someState: 'hello pinia',
    }
  },
  persist: true,
})