Nuxt•4mo ago

Plugins - inject Component & hook into API Request

Hello, I am trying to make an Application modular. Means it will have default Features, but can also be extended. For this I am looking to modules as "pakets" with multiple plugins which do changes. E.g. There is a form with TextInputs "Name", and "Surname" and an "Submit"-Button. A Module is adding a plugin "advancedForm": /modules/customModule/index.ts:

import { defineNuxtModule, addPlugin, createResolver } from '@nuxt/kit'

export default defineNuxtModule({
  setup(moduleOptions, nuxt) {
    const { resolve } = createResolver(import.meta.url)

    addPlugin({
      src: resolve('./plugins/advancedForm'),
      mode: "client"
    })
  }
})

import { defineNuxtModule, addPlugin, createResolver } from '@nuxt/kit'

export default defineNuxtModule({
  setup(moduleOptions, nuxt) {
    const { resolve } = createResolver(import.meta.url)

    addPlugin({
      src: resolve('./plugins/advancedForm'),
      mode: "client"
    })
  }
})

Plugin does Tasks: /modules/customModule/plugins/advancedForm.ts:

export default defineNuxtPlugin((nuxtApp) => {
  // Hook into the `page:start` event
  nuxtApp.hook('page:start', (pageComponent) => {
    // inject component
  });
});

export default defineNuxtPlugin((nuxtApp) => {
  // Hook into the `page:start` event
  nuxtApp.hook('page:start', (pageComponent) => {
    // inject component
  });
});

Thats how far i got. The Task of the Plugin must do a) add 1 or more components between the textInputs 2) hook into the submit button and api call, so I can manipulate the call and callback The documentation stops at the point "you can do many things with plugins". So sadly I cant find anything related to this. Any help would be appreciated!

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

Plugins - inject Component & hook into API Request