Registry / web-framework / nuxt-site-config-kit

nuxt-site-config-kit

library4.0.8jsnpmunverified

Nuxt Site Config Kit is a utility package for Nuxt 3 modules, providing a centralized and consistent way to manage site-wide configuration. It offers both build-time utilities and runtime composables, enabling module authors and application developers to define, extend, and consume common site metadata such as name, URL, and language. The current stable version is 4.0.8, with frequent patch releases addressing bug fixes, and major versions introducing breaking changes as demonstrated with v4.0.0. Its key differentiator is establishing a standardized API for site configuration across the Nuxt ecosystem, which allows various modules (e.g., SEO, sitemaps, PWA) to leverage a unified, extensible data source, thereby reducing configuration duplication and enhancing developer consistency.

web-framework

npm install nuxt-site-config-kit

github ↗package ↗

INSTALL

IMPORT

SIG · NUXT-SITE-CONFIG-K

nuxt-site-config-kit

web-frameworkjavascriptv4.0.8

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

useSiteConfig

✓ import { useSiteConfig } from '#imports'

✗ import { useSiteConfig } from 'nuxt-site-config-kit'

As a Nuxt composable, `useSiteConfig` is typically auto-imported. Explicit import from `#imports` or `vue` is often preferred for clarity, but direct import from the package is generally incorrect.

defineSiteConfig

✓ import { defineSiteConfig } from 'nuxt-site-config-kit'

✗ const defineSiteConfig = require('nuxt-site-config-kit').defineSiteConfig

Used primarily in `nuxt.config.ts` or Nuxt modules to define or extend site configuration. Expects ESM import syntax.

createSiteConfigStack

✓ import { createSiteConfigStack } from 'nuxt-site-config-kit'

An advanced utility for module authors to programmatically build and manage layers of site configuration, often not directly used by application developers. Uses ESM imports.

Demonstrates setting basic site configuration in `nuxt.config.ts` and then consuming it within a Vue component using the `useSiteConfig` composable.

/* nuxt.config.ts */ import { defineNuxtConfig } from 'nuxt' import { defineSiteConfig } from 'nuxt-site-config-kit' export default defineNuxtConfig({ modules: [ // ... other modules 'nuxt-site-config-kit' // This module needs to be enabled ], site: defineSiteConfig({ name: 'My Awesome Nuxt Site', url: process.env.NUXT_PUBLIC_SITE_URL ?? 'https://example.com', description: 'A fantastic site built with Nuxt 3 and Site Config Kit.', language: 'en-US' }) }) /* app.vue */ <script setup lang="ts"> import { useSiteConfig } from '#imports' const siteConfig = useSiteConfig() </script> <template> <div> <h1>Welcome to {{ siteConfig.name }}</h1> <p>URL: {{ siteConfig.url }}</p> <p>Description: {{ siteConfig.description }}</p> <p>Language: {{ siteConfig.language }}</p> <p>Current path: {{ siteConfig.path }}</p> </div> </template>

Debug

Known issues

breakingImplicit `site.name` inference from `package.json` or directory name was removed. This was done to prevent leakage of internal package names in public APIs. You must now explicitly define `site.name` in your Nuxt configuration.

fix

Explicitly set `site.name` in `nuxt.config.ts` under the `site` property:
```ts
export default defineNuxtConfig({
  site: {
    name: 'My Website',
  }
})
```
Alternatively, use the `NUXT_SITE_NAME` environment variable.

affects: >=4.0.0

gotchaSite configuration values, especially URLs, may differ between development and production environments. It's crucial to correctly configure environment variables for deployment.

fix

Always use environment variables for sensitive or environment-dependent values like `url`. For example, `url: process.env.NUXT_PUBLIC_SITE_URL ?? 'https://localhost:3000'`.

affects: >=1.0.0

gotchaWhen using `useSiteConfig` in a component, ensure it's called within `setup()` or `<script setup>` context. Calling it globally or outside the component lifecycle will lead to errors.

fix

Wrap `useSiteConfig()` within a component's `setup()` function or directly in `<script setup>` to ensure it's executed in the correct Nuxt context.

affects: >=1.0.0

Errors

Common errors & fixes

Cannot read properties of undefined (reading 'name')

`site.name` was not explicitly defined in `nuxt.config.ts` after the v4.0.0 breaking change, leading to `undefined` when attempting to access it.

fix

Add a `site.name` property to your `nuxt.config.ts` file or set the `NUXT_SITE_NAME` environment variable.

[nuxt] A composable that requires access to the Nuxt App instance was called outside of a plugin, Nuxt hook, or component setup function.

`useSiteConfig()` or similar composables were called in an incorrect context, such as directly in a global script or outside of Vue's component lifecycle.

fix

Ensure `useSiteConfig()` is called within a `<script setup>` block of a Vue component, inside a component's `setup()` method, or within a Nuxt plugin or hook that provides the necessary context.

TypeError: Cannot destructure property 'site' of 'undefined' as it is undefined.

The `nuxt-site-config-kit` module was not properly registered in `nuxt.config.ts`, or the `site` property in `defineNuxtConfig` was not correctly structured.

fix

Verify that `'nuxt-site-config-kit'` is included in the `modules` array of your `nuxt.config.ts` and that the `site` object within `defineNuxtConfig` is correctly defined and populated.

Upgrade

Version history

4.0.8latest on npm

Audit

Dependencies

nuxtrequiredCore framework for Nuxt modules and composables.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/harlan-zw/nuxt-site-config ↗

packagehttps://www.npmjs.com/package/nuxt-site-config-kit ↗