Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to set loadingTemplate inside custom Nuxt Module

I’m building a nuxt module, and want to set loadingTemplate within this module.

What I tried so far is modifying devServer inside module like below (But no luck)

import { loadingTemplate } from './loadingTemplate'

export default defineNuxtModule<ModuleOptions>({
    ...
    async setup (options, nuxt) {
        nuxt.options.devServer = {
            ...nuxt.options.devServer,
            loadingTemplate
        }
    }
})

I’ve also tried doing it via hooks:

import { loadingTemplate } from './loadingTemplate'

export default defineNuxtModule<ModuleOptions>({
    ...
    async setup (options, nuxt) {
        nuxt.hook('ready', (nuxtApp) => {
            nuxtApp.devServer = {
                ...nuxt.devServer,
                loadingTemplate
            }
        })
    }
})

I’ve tried different hooks: ready, listen

Can someone point me in correct direction on how to use custom loadingTemplate that will be set from my nuxt module?

Tags:

2

Answers


  1. 0

    Try using Nuxt hooks. If that doesn’t work, you can check out this link

    async setup(options, nuxt) {
    // modules:before hook to set the custom loading template
    nuxt.hook('modules:before', () => {
        nuxt.options.loading = {
            template: loadingTemplate
        };
    });
}
    Login or Signup to reply.
  2. 0

    You’re on the right track! Here’s how to correctly set the loadingTemplate within your Nuxt module:

    The Key: buildModules

    The loadingTemplate is set during the build process, so you need to modify the Nuxt configuration within the buildModules array of your module.

    Revised Module Structure:

    import { defineNuxtModule } from '@nuxt/kit'
import { loadingTemplate } from './loadingTemplate'

export default defineNuxtModule({
  // ... (other module options)

  setup (options, nuxt) {
    nuxt.hook('build:before', () => {
      // Modify Nuxt's build configuration
      nuxt.options.buildModules.push({
        name: 'your-module-name', 
        // Your custom loading template
        loadingTemplate
      })
    })
  }
})

    Explanation:

    1. build:before Hook: The build:before hook runs before the Nuxt build process starts. This is the ideal place to modify build configuration.
    2. buildModules Array: The buildModules array holds configuration for additional build-time modules. We push a new module object that defines a name (your module’s name) and loadingTemplate to use.
    3. loadingTemplate: This should contain your custom loading template content (a string) or a function that returns a string.

    Example loadingTemplate:

    // in ./loadingTemplate.js
export const loadingTemplate = `
  <div class="loading-container">
    <div class="loading-spinner"></div>
    <p>Loading...</p>
  </div>
`

    Make sure you register your custom module in your nuxt.config.js file:

      export default defineNuxtConfig({
    buildModules: [
      // ... other modules
      '@your-module/your-module'
    ]
  })

    Nuxt 3: The loadingTemplate is set in the app.template field for Nuxt 3.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search