N
Nuxt•5mo ago
Rylan

How can make my project's module composables be used my the server?

Hey Nuxt people! I have a basic Shopify module that is working correctly for me: 
import {
  defineNuxtModule,
  addImports,
  addServerImports,
  addServerHandler,
  createResolver,
} from '@nuxt/kit'

export default defineNuxtModule({
  meta: {
    name: '@nikkoel/shopify',
    configKey: 'shopify',
    compatibility: { nuxt: '^3.0.0' },
  },

  schema: {
    storefront: '',
    apiVersion: '',
    adminAccessToken: '',
    storefrontAccessToken: '',
  },

  setup(options, nuxt) {
    nuxt.options.runtimeConfig.shopify = {
      storefront: options.storefront,
      apiVersion: options.apiVersion,
      adminAccessToken: options.adminAccessToken,
      storefrontAccessToken: options.storefrontAccessToken,
    }

    const { resolve } = createResolver(import.meta.url)

    addImports({
      name: 'useShopify',
      from: resolve('runtime/composables/use-shopify.ts'),
    })

    addServerHandler({
      method: 'post',
      route: '/api/shopify-admin',
      handler: resolve('runtime/server/api/shopify-admin.post.ts'),
    })

    addServerHandler({
      method: 'post',
      route: '/api/shopify-storefront',
      handler: resolve('runtime/server/api/shopify-storefront.post.ts'),
    })
  },
})
import {
  defineNuxtModule,
  addImports,
  addServerImports,
  addServerHandler,
  createResolver,
} from '@nuxt/kit'

export default defineNuxtModule({
  meta: {
    name: '@nikkoel/shopify',
    configKey: 'shopify',
    compatibility: { nuxt: '^3.0.0' },
  },

  schema: {
    storefront: '',
    apiVersion: '',
    adminAccessToken: '',
    storefrontAccessToken: '',
  },

  setup(options, nuxt) {
    nuxt.options.runtimeConfig.shopify = {
      storefront: options.storefront,
      apiVersion: options.apiVersion,
      adminAccessToken: options.adminAccessToken,
      storefrontAccessToken: options.storefrontAccessToken,
    }

    const { resolve } = createResolver(import.meta.url)

    addImports({
      name: 'useShopify',
      from: resolve('runtime/composables/use-shopify.ts'),
    })

    addServerHandler({
      method: 'post',
      route: '/api/shopify-admin',
      handler: resolve('runtime/server/api/shopify-admin.post.ts'),
    })

    addServerHandler({
      method: 'post',
      route: '/api/shopify-storefront',
      handler: resolve('runtime/server/api/shopify-storefront.post.ts'),
    })
  },
})
But when I use my useShopify composable in the /server folder, it doesn't seem to register.. For instance on my /server/api/sitemap.ts I can't seem to reach my useShopify composable: 
import type { SitemapUrlInput } from '#sitemap/types'

const shopify = useShopify() // <- This doesnt work

export default defineSitemapEventHandler(async () => {
  const products = await shopify.sitmap.getProducts({ first: 250 })
  const productUrls: SitemapUrlInput[] = products.edges.map(({ node }) => ({
    loc: `/products/${node.handle}`,
    lastmod: node.updatedAt,
  }))

  return [
    ...productUrls,
    { loc: '/', lastmod: new Date(Date.now()) },
  ] satisfies SitemapUrlInput[]
})
import type { SitemapUrlInput } from '#sitemap/types'

const shopify = useShopify() // <- This doesnt work

export default defineSitemapEventHandler(async () => {
  const products = await shopify.sitmap.getProducts({ first: 250 })
  const productUrls: SitemapUrlInput[] = products.edges.map(({ node }) => ({
    loc: `/products/${node.handle}`,
    lastmod: node.updatedAt,
  }))

  return [
    ...productUrls,
    { loc: '/', lastmod: new Date(Date.now()) },
  ] satisfies SitemapUrlInput[]
})
Any help would be really appreciated!
3 Replies
kapa.ai
kapa.ai•5mo ago
Hi @Rylan. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To make your module's composables (like useShopify) available for use inside the /server directory (e.g., in server routes or API handlers), you need to register them as server imports rather than just regular imports. The addImports utility only makes composables available for auto-import in the Vue app context (client and universal composables), but not in the server context (Nitro server handlers). For server-side usage, you should use addServerImports (for individual files) or addServerImportsDir (for directories). This will allow Nitro to auto-import your composables in server files. Here's how you can update your module: 
import {
  defineNuxtModule,
  addImports,
  addServerImports,
  addServerHandler,
  createResolver,
} from '@nuxt/kit'

export default defineNuxtModule({
  // ...meta and schema as before...
  setup(options, nuxt) {
    // ...runtimeConfig and handlers as before...

    const { resolve } = createResolver(import.meta.url)

    // For client & universal composables
    addImports({
      name: 'useShopify',
      from: resolve('runtime/composables/use-shopify.ts'),
    })

    // For server composables (so you can use them in /server files)
    addServerImports({
      name: 'useShopify',
      from: resolve('runtime/composables/use-shopify.ts'),
    })
  },
})
import {
  defineNuxtModule,
  addImports,
  addServerImports,
  addServerHandler,
  createResolver,
} from '@nuxt/kit'

export default defineNuxtModule({
  // ...meta and schema as before...
  setup(options, nuxt) {
    // ...runtimeConfig and handlers as before...

    const { resolve } = createResolver(import.meta.url)

    // For client & universal composables
    addImports({
      name: 'useShopify',
      from: resolve('runtime/composables/use-shopify.ts'),
    })

    // For server composables (so you can use them in /server files)
    addServerImports({
      name: 'useShopify',
      from: resolve('runtime/composables/use-shopify.ts'),
    })
  },
})
Alternatively, if you have multiple composables, you can use addServerImportsDir to register a whole directory: 
addServerImportsDir(resolve('runtime/composables'))
addServerImportsDir(resolve('runtime/composables'))
Why is this needed?
Nuxt separates the auto-imports for the Vue app and the Nitro server. Composables registered with addImports are not available in the server context by default. Using addServerImports or addServerImportsDir ensures your composables are available for auto-import in server files like /server/api/sitemap.ts see official docs. References: - Injecting Composables With addImports and addImportsDir - addServerImportsDir API Summary:
Add your composable with addServerImports or addServerImportsDir in your module's setup to make it available in the server context. This will resolve the issue and allow you to use useShopify() in your /server files. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•5mo ago
<@622945064233992224> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Rylan
RylanOP•5mo ago
^ Surprisingly AI was right this time

Did you find this page helpful?