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
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
Notifications
✓ import { Notifications } from 'cetera-vue-utils'
✗ const { Notifications } = require('cetera-vue-utils')
Notifications is a component. CommonJS `require` is not supported; use ES Module imports. In Nuxt, it must be imported manually even with the module enabled.
useNotify
✓ import { useNotify } from 'cetera-vue-utils'
✗ const { useNotify } = require('cetera-vue-utils')
useNotify is a composable. CommonJS `require` is not supported. In Nuxt projects, `useNotify` is automatically imported when the module is enabled in `nuxt.config.ts`.
Spinner
✓ import { Spinner } from 'cetera-vue-utils'
✗ import Spinner from 'cetera-vue-utils'
Spinner is a named export component. Do not use default import syntax. In Nuxt, components are globally registered by the module, making explicit imports optional in templates but good practice in scripts.
module registration (Nuxt)
✓ export default defineNuxtConfig({
modules: ['cetera-vue-utils/nuxt'],
})
✗ export default defineNuxtConfig({
modules: ['cetera-vue-utils'],
})
For Nuxt, ensure you specify the `/nuxt` submodule path to enable global component registration and composable auto-imports.
Demonstrates how to integrate the Notifications component, use the `useNotify` composable for various notification types, and display both `Spinner` and `InlineLoading` components. This example also includes the necessary CSS imports and Tailwind `@source` directive for full functionality.
<template>
<Notifications />
<div class="p-4 flex flex-col gap-4 items-start">
<button class="px-4 py-2 bg-blue-500 text-white rounded" @click="notify.success('Action completed successfully!')">Show Success</button>
<button class="px-4 py-2 bg-red-500 text-white rounded" @click="notify.error('Oops, something went wrong!')">Show Error</button>
<div class="relative p-8 border rounded-md w-64 h-32 flex items-center justify-center">
<Spinner :isLoading="showSpinner" size="lg" />
<p v-if="!showSpinner">Content loaded</p>
</div>
<InlineLoading :isLoading="showInlineLoading" loadingText="Processing data..." />
<button class="px-4 py-2 bg-gray-200 rounded" @click="toggleLoading">Toggle Loading</button>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { Notifications, useNotify, Spinner, InlineLoading } from 'cetera-vue-utils';
const notify = useNotify();
const showSpinner = ref(true);
const showInlineLoading = ref(true);
const toggleLoading = () => {
showSpinner.value = !showSpinner.value;
showInlineLoading.value = !showInlineLoading.value;
if (showSpinner.value) {
notify.info('Loading indicators activated.');
} else {
notify.info('Loading indicators deactivated.');
}
};
// Simulate initial loading
setTimeout(() => {
showSpinner.value = false;
showInlineLoading.value = false;
notify.success('Initial content loaded!');
}, 3000);
</script>
<style>
/* Basic Tailwind setup for demonstration */
@tailwind base;
@tailwind components;
@tailwind utilities;
/* Required for InputDate/InputTime and general component styling */
@import "cetera-vue-utils/style.css";
/* Ensure Tailwind scans library's dist for classes */
@source "../../../node_modules/cetera-vue-utils/dist/";
html, body, #app {
height: 100%;
margin: 0;
font-family: sans-serif;
}
</style>
Errors
Common errors & fixes
Failed to resolve import "cetera-vue-utils/nuxt" from "nuxt.config.ts". Does the file exist?
Incorrect path for Nuxt module registration or missing package installation.
fixEnsure `cetera-vue-utils` is installed via `npm install cetera-vue-utils` and verify `modules: ['cetera-vue-utils/nuxt']` in `nuxt.config.ts`.
ReferenceError: useNotify is not defined
Composable not imported or Nuxt auto-imports not configured/working.
fixIf not using Nuxt, ensure `import { useNotify } from 'cetera-vue-utils'` is present. If using Nuxt, confirm `cetera-vue-utils/nuxt` is correctly listed in `nuxt.config.ts` modules and restart your development server. SyntaxError: Named export 'Notifications' not found. The requested module 'cetera-vue-utils' does not provide an export named 'Notifications'
Attempting to use CommonJS `require` or incorrect named import.
fixAlways use ES Module named imports: `import { Notifications } from 'cetera-vue-utils'`. Styles are missing or incorrect for components like Button, Dialog, etc.
Tailwind CSS not configured to scan the library's files or `style.css` not imported.
fixAdd `@source "../../../node_modules/cetera-vue-utils/dist/";` to your main CSS file and ensure `@import "cetera-vue-utils/style.css";` is present.
Audit
Dependencies
vuerequiredPeer dependency required for all Vue 3 applications using this library.