EBT-Vue: SuttaCentral Vue/Vuetify Components

Common errors

• Failed to compile component: template option only works when compiling templates in the browser

  cause Vuetify is not correctly set up or the Vue build configuration is missing the template compiler.
  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.

• Component is not registered: <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.
  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 } }`.

• Cannot find module 'ebt-vue' or its corresponding type declarations.

  cause The package `ebt-vue` is not installed, or the import path is incorrect, or TypeScript cannot find its declaration files.
  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`.

Warnings

• breaking 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.
  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.
• gotcha 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.
  Fix: Install Vuetify (`npm install vuetify@^2.x`) and initialize it in your Vue application's main entry point (`Vue.use(Vuetify);`).
• gotcha 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.
  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.

Install

• npm install ebt-vue npm
• yarn add ebt-vue yarn
• pnpm add ebt-vue pnpm

Imports

• EbtButton
  wrong:

  const EbtButton = require('ebt-vue').EbtButton;

  correct:

  import { EbtButton } from 'ebt-vue';

  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.
• EbtCard

  import { EbtCard } from 'ebt-vue';

  Another hypothetical common component. The library likely exports multiple components directly.
• EbtVuePlugin
  wrong:

  import { EbtVuePlugin } from 'ebt-vue';

  correct:

  import EbtVuePlugin from 'ebt-vue/plugin';
  Vue.use(EbtVuePlugin);

  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.

Quickstart

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.

import Vue from 'vue';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';

// Assuming named exports for individual components
import { EbtToolbar, EbtCard } from 'ebt-vue';

// Initialize Vuetify globally before your Vue instance
Vue.use(Vuetify);

new Vue({
  el: '#app',
  vuetify: new Vuetify(), // Pass a new Vuetify instance to Vue
  components: {
    EbtToolbar,
    EbtCard
  },
  template: `
    <v-app>
      <v-main>
        <v-container>
          <ebt-toolbar title="SuttaCentral Browser">
            <v-btn icon><v-icon>mdi-magnify</v-icon></v-btn>
            <v-btn icon><v-icon>mdi-dots-vertical</v-icon></v-btn>
          </ebt-toolbar>
          <ebt-card title="Example Sutta" class="mt-4">
            <p>This is a hypothetical card component displaying Sutta content.</p>
            <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>
            <v-btn color="primary">Read More</v-btn>
          </ebt-card>
          <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>
        </v-container>
      </v-main>
    </v-app>
  `
});