Going Further
Hooks
Hooks for the Nuxt Shopify module
The module provides several hooks that can be used to customize its behavior.
These hooks are available in the hooks property of the module configuration and within your Nuxt and Nitro app.
Using client runtime hooks
You can use the client runtime hooks in a Nuxt plugin or Nitro plugin to customize the behavior of any client:
export default defineNuxtPlugin((app) => {
app.hooks.hook('storefont:client:configure', ({ config }) => {
// Modify the config of the client before it is created
config.logger = logContent => console.log(logContent)
})
app.hooks.hook('storefont:client:create', ({ client }) => {
console.log('Storefront client created:', client)
})
app.hooks.hook('storefont:client:request', ({ operation, options }) => {
console.log('Storefront client request sent:', operation, options)
})
app.hooks.hook('storefont:client:response', ({ response, operation, options }) => {
console.log('Storefront client response received:', response, operation, options)
})
app.hooks.hook('storefont:client:errors', ({ errors }) => {
console.log('Storefront client errors:', errors)
})
})
export default defineNitroPlugin((app) => {
app.hooks.hook('storefont:client:configure', ({ config }) => {
// Modify the config of the client before it is created
config.logger = logContent => console.log(logContent)
})
app.hooks.hook('storefont:client:create', ({ client }) => {
console.log('Storefront client created:', client)
})
app.hooks.hook('storefont:client:request', ({ operation, options }) => {
console.log('Storefront client request sent:', operation, options)
})
app.hooks.hook('storefont:client:response', ({ response, operation, options }) => {
console.log('Storefront client response received:', response, operation, options)
})
app.hooks.hook('storefont:client:errors', ({ errors }) => {
console.log('Storefront client errors:', errors)
})
})
export default defineNitroPlugin((app) => {
app.hooks.hook('admin:client:configure', ({ config }) => {
// Modify the config of the client before it is created
config.logger = logContent => console.log(logContent)
})
app.hooks.hook('admin:client:create', ({ client }) => {
console.log('Admin client created:', client)
})
app.hooks.hook('admin:client:request', ({ operation, options }) => {
console.log('Admin client request sent:', operation, options)
})
app.hooks.hook('admin:client:response', ({ response, operation, options }) => {
console.log('Admin client response received:', response, operation, options)
})
app.hooks.hook('admin:client:errors', ({ errors }) => {
console.log('Admin client errors:', errors)
})
})
Hooks reference
Hooks allows you to hook into the different stages of the module lifecycle.
Nuxt Hooks (Build Time)
| Hook | Arguments | Environments | Description |
|---|---|---|---|
shopify:config | nuxt, config | Server | Called before the parsed module config is persisted into the runtime config |
storefront:generate:introspection | nuxt, config | Server | Called before the storefront introspection schema is generated |
storefront:generate:types | nuxt, config | Server | Called before the storefront types are generated |
storefront:generate:operations | nuxt, config | Server | Called before the storefront operations are generated |
admin:generate:introspection | nuxt, config | Server | Called before the admin introspection schema is generated |
admin:generate:types | nuxt, config | Server | Called before the admin types are generated |
admin:generate:operations | nuxt, config | Server | Called before the admin operations are generated |
App Hooks (Runtime)
| Hook | Arguments | Environments | Description |
|---|---|---|---|
storefront:client:configure | config | Server & Client | Called before the storefront client is created |
storefront:client:create | client | Server & Client | Called after the storefront client is created |
storefront:client:request | operation, options | Server & Client | Called before the storefront client sends a request |
storefront:client:response | response, operation, options | Server & Client | Called after the storefront client receives a response |
storefront:client:errors | errors | Server & Client | Called when a storefront client request contains errors |
Server Hooks (Runtime)
| Hook | Arguments | Environments | Description |
|---|---|---|---|
storefront:client:configure | config | Server | Called before the storefront client is created |
storefront:client:create | client | Server | Called after the storefront client is created |
storefront:client:request | operation, options | Server | Called before the storefront client sends a request |
storefront:client:response | response, operation, options | Server | Called after the storefront client receives a response |
storefront:client:errors | errors | Server | Called when a storefront client request contains errors |
admin:client:configure | config | Server | Called before the admin client is created |
admin:client:create | client | Server | Called after the admin client is created |
admin:client:request | operation, options | Server | Called before the admin client sends a request |
admin:client:response | response, operation, options | Server | Called after the admin client receives a response |
admin:client:errors | errors | Server | Called when an admin client request contains errors |