How can I fetch data in a Nuxt 3 app when the app starts and persist that data?

In Nuxt 2, I used the nuxtServerInit() method within the Vuex store's index file to dispatch a store action that retrieved data from an API and committed to that to the store.

How can I achieve the same in Nuxt 3?

At present I have pinia installed with a simple store set up:

import { defineStore } from 'pinia'

export const usePersonalisationStore = defineStore({

  id: 'personalisation-store',

  state: () => {
    return {
      data: null,
    }
  },

  actions: {

    async setData (id) {

      if ( ! id) return

      this.data = {
        'someApp': {
          id: id
        }
      }

    }
  },

  getters: {
    practiceData: state => state.data,
  },

})

And the following plugin personalisation.server.js:

import { usePersonalisationStore } from "~/store/personalisation";

export default defineNuxtPlugin((nuxtApp) => {

  const store = usePersonalisationStore()
  const route = useRoute()
  const { setData } = store

  setData(route.query.id)

})

This just looks at the route querystring and updates the store. What I want to do here is make an asynchronous API call to fetch data, and then update the store with the data.

> "This just looks at the route querystring and updates the store. What I want to do here is make an asynchronous API call to fetch data, and then update the store with the data."

It is not apparent what you're trying to do there but I'll give it a shot.

If what you are wanting to do is have a plugin to fetch data, you will need to provide a helper for the NuxtApp to use the data from your plugin:

export default defineNuxtPlugin(() => {
  // fetch data here
  return {
    provide: {
      fetchedData: data
    }
  }
})

As stated in https://nuxt.com/docs/guide/directory-structure/plugins

Otherwise, if you're just trying to fetch data when the app is created, and persist it in the pinia state, you can just use the setup hook inside your app.vue. If you don't have an app.vue, just create it in your root directory, and Nuxt will use its directives to override the default Vue app that is instantiated by Nuxt.

In app.vue

<template>
    <!-- your app -->
<template/>
<script setup>
    import { usePersonalisationStore } from "~/store/personalisation";
    <!-- await fetch data here from pinia -->
    const store = usePersonalisationStore();
    await store.fetchData()
    <!-- data is now set and usable -->
    const fetchedData = computed(() => { return store.getFetchedData });
</script>

And in the ~/store/personalisation.js

import { defineStore } from 'pinia'

export const usePersonalisationStore = defineStore({

  id: 'personalisation-store',

  state: () => {
    return {
      data: null,
      fetchedData: null
    }
  },

  actions: {

    async setData (id) {

      if ( ! id) return

      this.data = {
        'someApp': {
          id: id
        }
      }

    },
    async fetchData() {
        const data = await useFetch('URI');
        this.fetchedData = data;
    }
  },

  getters: {
    practiceData: state => state.data,
    getFetchedData() { return this.fetchedData }
  },

})

These concepts are documented in https://nuxt.com/docs/getting-started/data-fetching, https://nuxt.com/docs/migration/pages-and-layouts#appvue, and https://pinia.vuejs.org/core-concepts/state.html

You're looking for Runtime Lifecycle Hooks. Your hook probably would be app:created, so:

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.hook('app:created', () => {
        /* data fetching here */
     })
})