Cetera Vue Utilities

0.3.0 verified Sat Apr 25 auth: no javascript

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.

Common errors

error Failed to resolve import "cetera-vue-utils/nuxt" from "nuxt.config.ts". Does the file exist? ↓

cause Incorrect path for Nuxt module registration or missing package installation.

fix

Ensure cetera-vue-utils is installed via npm install cetera-vue-utils and verify modules: ['cetera-vue-utils/nuxt'] in nuxt.config.ts.

error ReferenceError: useNotify is not defined ↓

cause Composable not imported or Nuxt auto-imports not configured/working.

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.

error SyntaxError: Named export 'Notifications' not found. The requested module 'cetera-vue-utils' does not provide an export named 'Notifications' ↓

cause Attempting to use CommonJS `require` or incorrect named import.

fix

Always use ES Module named imports: import { Notifications } from 'cetera-vue-utils'.

error Styles are missing or incorrect for components like Button, Dialog, etc. ↓

cause Tailwind CSS not configured to scan the library's files or `style.css` not imported.

fix

Add @source "../../../node_modules/cetera-vue-utils/dist/"; to your main CSS file and ensure @import "cetera-vue-utils/style.css"; is present.

Warnings

gotcha The library relies heavily on Tailwind CSS for its styling. If Tailwind is not configured in your project, components will render unstyled or incorrectly. ↓

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`.

gotcha 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`. ↓

fix In `nuxt.config.ts`, change `modules: ['cetera-vue-utils']` to `modules: ['cetera-vue-utils/nuxt']`.

gotcha 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`). ↓

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>`.

gotcha The datepicker styles for `InputDate` and `InputTime` components, as well as general component base styles, require importing `cetera-vue-utils/style.css`. ↓

fix Add `@import "cetera-vue-utils/style.css";` to your main CSS entry point (e.g., `app/assets/css/main.css` in Nuxt projects).

Install

npm install cetera-vue-utils

yarn add cetera-vue-utils

pnpm add cetera-vue-utils

Imports

Notifications
wrong
```
const { Notifications } = require('cetera-vue-utils')
```
correct
```
import { Notifications } from '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
wrong
```
const { useNotify } = require('cetera-vue-utils')
```
correct
```
import { useNotify } from '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
wrong
```
import Spinner from 'cetera-vue-utils'
```
correct
```
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)

wrong

export default defineNuxtConfig({
    modules: ['cetera-vue-utils'],
})

correct

export default defineNuxtConfig({
    modules: ['cetera-vue-utils/nuxt'],
})

For Nuxt, ensure you specify the `/nuxt` submodule path to enable global component registration and composable auto-imports.

Quickstart

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>