Loading data into the Nuxt store upon application launch

Question

Loading data into the Nuxt store upon application launch

Currently, I'm working on an app using Nuxt where I preload some data at nuxtServerInit and store it successfully. However, as I have multiple projects with similar initial-preload requirements, I thought of creating a reusable module for this logic. The idea was to easily add the module to the nuxt.config.js in all my other projects to automatically populate the store. But, during the module creation process, I realized that there seems to be no way to access the store at that point. Am I correct in this assumption?

I attempted to use

nuxt.hook('ready', (nuxt) => {...}

, but unfortunately, the nuxt-parameter provided in the callback does not include a reference to the store.

As someone new to Nuxt, I may be missing something crucial or handling my preload issue incorrectly. Is there a better approach to solving this dilemma?

Shown below is my attempt at creating the module named modules/mymodule.ts:

const mymodule: Module<Options> = function (moduleOptions: Options) {
  const { nuxt } = this

  nuxt.hook('ready', async (__nuxt: any) => {
    // __nuxt ... no store reference :(
  })
}
export default mymodule

typescript nuxt.js

Answer 1

Answer №1

Insight on Vue 2:

In a similar situation, I found the solution by locating the store within the moduleOptions.

To access the store in my case, I implemented a plugin.

// nuxt.config.js

buildModules: [
    '@unique_namespace/node_modules_path',
]

// custom-plugin.js

// Ensure that when initializing module in nuxt.config, 
// only the plugin is relocated (not dependencies) to prevent resolution errors.
// REFERENCE: https://github.com/nuxt/nuxt.js/issues/9876
import CustomStore from '@unique_namespace/node_modules_path/store'

export default function ({ store }) {
  store.registerModule('custom-store', CustomStore())
}

// specific-module.js


module.exports = async function (moduleOptions) {
  const options = {
    ...this.options['my-custom-plugin'],
    ...moduleOptions,
  }

  this.addPlugin({
    src: resolve(__dirname, 'custom-plugin.js'),
    fileName: 'my-custom-plugin.js',
    options,
  })
}

module.exports.meta = require('../package.json')

Answer 2

Insight on Vue 2:

In a similar situation, I found the solution by locating the store within the moduleOptions.

To access the store in my case, I implemented a plugin.

// nuxt.config.js

buildModules: [
    '@unique_namespace/node_modules_path',
]

// custom-plugin.js

// Ensure that when initializing module in nuxt.config, 
// only the plugin is relocated (not dependencies) to prevent resolution errors.
// REFERENCE: https://github.com/nuxt/nuxt.js/issues/9876
import CustomStore from '@unique_namespace/node_modules_path/store'

export default function ({ store }) {
  store.registerModule('custom-store', CustomStore())
}

// specific-module.js


module.exports = async function (moduleOptions) {
  const options = {
    ...this.options['my-custom-plugin'],
    ...moduleOptions,
  }

  this.addPlugin({
    src: resolve(__dirname, 'custom-plugin.js'),
    fileName: 'my-custom-plugin.js',
    options,
  })
}

module.exports.meta = require('../package.json')

Loading data into the Nuxt store upon application launch

Answer №1

Similar questions

Adjust the specific data type to match its relevant category

I encountered an error stating "Buffer is not defined" originating from the Deode/Encode Stream Bundle.js script, not from my own code

I am looking for an Angular Observable that only returns a single value without any initial value

The React Typescript error message: "Type '' is not compatible with type 'null'"

Testing Angular2 / TypeScript HTTPService without Mocking: A Guide

I'm encountering an issue with my array in JavaScript while using // @ts-check in VS Code. Why am I receiving an error stating that property 'find' does not exist on my array? (typescript 2.7

Solving the 'never' type issue in Vue3 and TypeScript for an empty array reference

constrain a data structure to exclusively contain elements of a particular data type

Creating a dedicated class or module specifically designed for handling import and export tasks is a highly efficient approach towards stream

The function in Angular 5/Typescript disappears when attempting to call it from within another function

Choose a row by selecting the checkbox in the Kendo UI grid using TypeScript

Issue: The element '[object Object]' is of type 'object', which is not supported by NgFor. NgFor only works with Iterables like Arrays. - Problem encountered in an Ionic Project

Encountering challenges with reusing modules in Angular2

Angular Dialog Component: Passing and Populating an Array with Mat-Dialog

Learn how to set up a class using TypeScript decorators

Acquired this as empty

Is there a way to customize the default MuiCheckbox icon in theme.ts?

implementing firestore onsnapshotListner feature with pagination

Setting up the TypeScript compiler locally in the package.json file

In case of an API error with the Nuxt fetch method, ensure that the entire site responds with a 404