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

Retrieve input from text field and showcase in angular 6 with material design components

Hide the MaterialTopTabNavigator from view

Removing scrollbar from table in React using Material UI

I am experiencing import issues with ts-node/ts-jest and unable to import the necessary modules

retrieve a shared string from an array when toggled

Sort through the files for translation by utilizing a feature within Typewriter

Understanding Typings in Typescript

Verify if a given string exists within a defined ENUM in typescript

Is it possible to utilize TypeScript code to dynamically update the JSON filter with variable values?

Utilize TypeScript function types in React for enhanced functionality

Ways to extend the default timeout duration in Angular

What is the best approach in Typescript to ensure type understanding when importing using require()?

Unable to assign user roles in next-auth due to the absence of matching modifiers for user

Issue arose following the update from Angular 5 to 6, impacting the VSTS build process

Construct an outdated angular project from scratch

Leveraging import and export functionality in TypeScript while utilizing RequireJS as a dependency

Execute --runTestsByPath on two or more distinct paths

Problem with dynamic page routes in Next.js (and using TypeScript)

Difficulty with two-dimensional arrays in Angular and Typescript

Fixing the "Module not found" error in an Angular library using npm link