Nuxt•2y 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!

Nuxt•2y ago

Edik

Plugins - inject Component & hook into API Request

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
  });
});

Plugins - inject Component & hook into API Request

Similar Threads

Plugins - inject Component & hook into API Request

Similar Threads

Similar Threads

Similar Threads