{"id":18031,"library":"cetera-vue-utils","title":"Cetera Vue Utilities","description":"cetera-vue-utils is a collection of essential Vue 3 components, composables, and utility functions designed to streamline development of Vue applications. Currently at version 0.3.0, it appears to be under active development, though a specific release cadence isn't published. Key components include rich form elements (InputDate, MultiSelect), layout helpers (Dialog, DataTable, Accordion), and interaction patterns (Notifications, Spinner). The library emphasizes compatibility with Nuxt 3, offering a dedicated module for global component registration and auto-import of composables. A notable differentiator is its reliance on Tailwind CSS for styling, requiring specific configuration within the consuming project to ensure proper visual integration and theme customization. It ships with TypeScript types, promoting a type-safe development experience.","status":"active","version":"0.3.0","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","vue","vue3","components","composables","utils","typescript"],"install":[{"cmd":"npm install cetera-vue-utils","lang":"bash","label":"npm"},{"cmd":"yarn add cetera-vue-utils","lang":"bash","label":"yarn"},{"cmd":"pnpm add cetera-vue-utils","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for all Vue 3 applications using this library.","package":"vue","optional":false}],"imports":[{"note":"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.","wrong":"const { Notifications } = require('cetera-vue-utils')","symbol":"Notifications","correct":"import { Notifications } from 'cetera-vue-utils'"},{"note":"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`.","wrong":"const { useNotify } = require('cetera-vue-utils')","symbol":"useNotify","correct":"import { useNotify } from 'cetera-vue-utils'"},{"note":"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.","wrong":"import Spinner from 'cetera-vue-utils'","symbol":"Spinner","correct":"import { Spinner } from 'cetera-vue-utils'"},{"note":"For Nuxt, ensure you specify the `/nuxt` submodule path to enable global component registration and composable auto-imports.","wrong":"export default defineNuxtConfig({\n    modules: ['cetera-vue-utils'],\n})","symbol":"module registration (Nuxt)","correct":"export default defineNuxtConfig({\n    modules: ['cetera-vue-utils/nuxt'],\n})"}],"quickstart":{"code":"<template>\n  <Notifications />\n  <div class=\"p-4 flex flex-col gap-4 items-start\">\n    <button class=\"px-4 py-2 bg-blue-500 text-white rounded\" @click=\"notify.success('Action completed successfully!')\">Show Success</button>\n    <button class=\"px-4 py-2 bg-red-500 text-white rounded\" @click=\"notify.error('Oops, something went wrong!')\">Show Error</button>\n    <div class=\"relative p-8 border rounded-md w-64 h-32 flex items-center justify-center\">\n      <Spinner :isLoading=\"showSpinner\" size=\"lg\" />\n      <p v-if=\"!showSpinner\">Content loaded</p>\n    </div>\n    <InlineLoading :isLoading=\"showInlineLoading\" loadingText=\"Processing data...\" />\n    <button class=\"px-4 py-2 bg-gray-200 rounded\" @click=\"toggleLoading\">Toggle Loading</button>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Notifications, useNotify, Spinner, InlineLoading } from 'cetera-vue-utils';\n\nconst notify = useNotify();\nconst showSpinner = ref(true);\nconst showInlineLoading = ref(true);\n\nconst toggleLoading = () => {\n  showSpinner.value = !showSpinner.value;\n  showInlineLoading.value = !showInlineLoading.value;\n  if (showSpinner.value) {\n    notify.info('Loading indicators activated.');\n  } else {\n    notify.info('Loading indicators deactivated.');\n  }\n};\n\n// Simulate initial loading\nsetTimeout(() => {\n  showSpinner.value = false;\n  showInlineLoading.value = false;\n  notify.success('Initial content loaded!');\n}, 3000);\n</script>\n\n<style>\n/* Basic Tailwind setup for demonstration */\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n/* Required for InputDate/InputTime and general component styling */\n@import \"cetera-vue-utils/style.css\";\n\n/* Ensure Tailwind scans library's dist for classes */\n@source \"../../../node_modules/cetera-vue-utils/dist/\";\n\nhtml, body, #app {\n  height: 100%;\n  margin: 0;\n  font-family: sans-serif;\n}\n</style>","lang":"typescript","description":"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."},"warnings":[{"fix":"Ensure Tailwind CSS is installed and configured in your project. Refer to the README for instructions on adding the `@source` directive to your CSS entry point and importing `cetera-vue-utils/style.css`.","message":"The library relies heavily on Tailwind CSS for its styling. If Tailwind is not configured in your project, components will render unstyled or incorrectly.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"In `nuxt.config.ts`, change `modules: ['cetera-vue-utils']` to `modules: ['cetera-vue-utils/nuxt']`.","message":"When using with Nuxt 3, it's crucial to explicitly import `cetera-vue-utils/nuxt` in your `nuxt.config.ts` file, not just `cetera-vue-utils`.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Import `Notifications` and place it in your root layout: `<script setup> import { Notifications } from 'cetera-vue-utils' </script> <template> <Notifications /> <NuxtLayout> <NuxtPage /> </NuxtLayout> </template>`.","message":"The `Notifications` component is not automatically placed by the Nuxt module. It must be manually added to your root layout (e.g., `app.vue` or `layouts/default.vue`).","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Add `@import \"cetera-vue-utils/style.css\";` to your main CSS entry point (e.g., `app/assets/css/main.css` in Nuxt projects).","message":"The datepicker styles for `InputDate` and `InputTime` components, as well as general component base styles, require importing `cetera-vue-utils/style.css`.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Ensure `cetera-vue-utils` is installed via `npm install cetera-vue-utils` and verify `modules: ['cetera-vue-utils/nuxt']` in `nuxt.config.ts`.","cause":"Incorrect path for Nuxt module registration or missing package installation.","error":"Failed to resolve import \"cetera-vue-utils/nuxt\" from \"nuxt.config.ts\". Does the file exist?"},{"fix":"If 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.","cause":"Composable not imported or Nuxt auto-imports not configured/working.","error":"ReferenceError: useNotify is not defined"},{"fix":"Always use ES Module named imports: `import { Notifications } from 'cetera-vue-utils'`.","cause":"Attempting to use CommonJS `require` or incorrect named import.","error":"SyntaxError: Named export 'Notifications' not found. The requested module 'cetera-vue-utils' does not provide an export named 'Notifications'"},{"fix":"Add `@source \"../../../node_modules/cetera-vue-utils/dist/\";` to your main CSS file and ensure `@import \"cetera-vue-utils/style.css\";` is present.","cause":"Tailwind CSS not configured to scan the library's files or `style.css` not imported.","error":"Styles are missing or incorrect for components like Button, Dialog, etc."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}