{"id":10775,"library":"ebt-vue","title":"EBT-Vue: SuttaCentral Vue/Vuetify Components","description":"ebt-vue is a specialized Vue 2 and Vuetify-based component library meticulously crafted for the EBT-Site project, which is integral to the SuttaCentral and SuttaCentral Voice initiatives. It delivers a collection of reusable UI components specifically tailored for applications that handle Pali texts, the Buddha's teachings, and Sutta translations, likely integrating with `bilara-data`. The package's current stable version is 1.55.3312, suggesting an active development lifecycle with frequent minor updates and patches. Its primary differentiator lies in its deep integration with the specific domain of Buddhist texts and the SuttaCentral ecosystem, providing purpose-built UI solutions rather than general-purpose components. The library's release cadence appears consistent, reflecting ongoing development efforts for its target application.","status":"active","version":"1.55.3312","language":"javascript","source_language":"en","source_url":"https://github.com/ebt-site/ebt-vue","tags":["javascript","SuttaCentral","SuttaCentral Voice","EBT","Voice","Buddha","Pali","translation","Javascript"],"install":[{"cmd":"npm install ebt-vue","lang":"bash","label":"npm"},{"cmd":"yarn add ebt-vue","lang":"bash","label":"yarn"},{"cmd":"pnpm add ebt-vue","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency, required for the Vue component library to function.","package":"vue","optional":false},{"reason":"Peer dependency, the library is built on Vuetify components.","package":"vuetify","optional":false}],"imports":[{"note":"A common component, assuming named exports are preferred for individual components. CommonJS `require` might work in older Node.js contexts but is not idiomatic for modern Vue.","wrong":"const EbtButton = require('ebt-vue').EbtButton;","symbol":"EbtButton","correct":"import { EbtButton } from 'ebt-vue';"},{"note":"Another hypothetical common component. The library likely exports multiple components directly.","symbol":"EbtCard","correct":"import { EbtCard } from 'ebt-vue';"},{"note":"Many Vue component libraries provide a plugin for global registration of all components, often as a default export from a sub-path or named 'default' export. The specific path `ebt-vue/plugin` is a common convention.","wrong":"import { EbtVuePlugin } from 'ebt-vue';","symbol":"EbtVuePlugin","correct":"import EbtVuePlugin from 'ebt-vue/plugin';\nVue.use(EbtVuePlugin);"}],"quickstart":{"code":"import Vue from 'vue';\nimport Vuetify from 'vuetify';\nimport 'vuetify/dist/vuetify.min.css';\n\n// Assuming named exports for individual components\nimport { EbtToolbar, EbtCard } from 'ebt-vue';\n\n// Initialize Vuetify globally before your Vue instance\nVue.use(Vuetify);\n\nnew Vue({\n  el: '#app',\n  vuetify: new Vuetify(), // Pass a new Vuetify instance to Vue\n  components: {\n    EbtToolbar,\n    EbtCard\n  },\n  template: `\n    <v-app>\n      <v-main>\n        <v-container>\n          <ebt-toolbar title=\"SuttaCentral Browser\">\n            <v-btn icon><v-icon>mdi-magnify</v-icon></v-btn>\n            <v-btn icon><v-icon>mdi-dots-vertical</v-icon></v-btn>\n          </ebt-toolbar>\n          <ebt-card title=\"Example Sutta\" class=\"mt-4\">\n            <p>This is a hypothetical card component displaying Sutta content.</p>\n            <p>The card can be used to encapsulate text, metadata, or other UI elements relevant to the EBT-Site project. Ensure all peer dependencies like Vue and Vuetify are correctly installed and configured.</p>\n            <v-btn color=\"primary\">Read More</v-btn>\n          </ebt-card>\n          <p class=\"mt-5\">This quickstart demonstrates the setup of an EBT-Vue application, integrating it with Vue 2 and Vuetify. It shows how to import and register components for immediate use. For a full application, consider global registration via a plugin if available.</p>\n        </v-container>\n      </v-main>\n    </v-app>\n  `\n});","lang":"typescript","description":"Demonstrates how to set up a basic Vue 2 application, import EBT-Vue and Vuetify, and render a simple component from the library, including typical Vuetify integration."},"warnings":[{"fix":"Continue using Vue 2 or seek a Vue 3 compatible alternative. If migrating an existing Vue 2 app, ensure Vue 3 compatibility is considered across the entire dependency tree.","message":"This library is built specifically for Vue 2. It is not compatible with Vue 3 and will require significant refactoring or a complete re-write to migrate.","severity":"breaking","affected_versions":"All versions"},{"fix":"Install Vuetify (`npm install vuetify@^2.x`) and initialize it in your Vue application's main entry point (`Vue.use(Vuetify);`).","message":"ebt-vue relies heavily on Vuetify as a peer dependency. Your project must have Vuetify (v2.x) installed and correctly configured for ebt-vue components to render and function as expected.","severity":"gotcha","affected_versions":"All versions"},{"fix":"Evaluate if the components align with your project's domain and design system. Expect to potentially override styles or adapt functionality if used outside of the EBT-Site context.","message":"The components are domain-specific to the SuttaCentral and EBT-Site ecosystem. While reusable, their styling, naming, and functionality might be tightly coupled to this context, making them less suitable for general-purpose Vue applications.","severity":"gotcha","affected_versions":"All versions"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `vuetify: new Vuetify()` is passed to your Vue instance options, and if using a build system, verify that Vue's runtime-only build is not being used without a pre-compiler. Install `@vue/cli-plugin-babel` if needed.","cause":"Vuetify is not correctly set up or the Vue build configuration is missing the template compiler.","error":"Failed to compile component: template option only works when compiling templates in the browser"},{"fix":"Import the component (`import { EbtToolbar } from 'ebt-vue';`) and then register it: either `Vue.use(EbtVuePlugin)` if a plugin is available, or add it to the `components` option of your Vue instance/component: `{ components: { EbtToolbar } }`.","cause":"The EBT-Vue component was imported but not registered with the Vue instance, either globally via a plugin or locally within the `components` option.","error":"Component is not registered: <EbtToolbar>"},{"fix":"Run `npm install ebt-vue` or `yarn add ebt-vue`. Verify the import path is correct (`from 'ebt-vue'`). If using TypeScript, ensure `allowSyntheticDefaultImports` and `esModuleInterop` are true in `tsconfig.json`.","cause":"The package `ebt-vue` is not installed, or the import path is incorrect, or TypeScript cannot find its declaration files.","error":"Cannot find module 'ebt-vue' or its corresponding type declarations."}],"ecosystem":"npm"}