Skip to content

Vue badge injection broken for JavaScript projects: openCeltrix never defined + className used in Vue template #275

Description

@vipul674

Bug

injectVueBadge() in utils/installer.js only injects the openCeltrix function when it matches a <script setup lang="ts"> block:

content.replace(
  /<script setup lang="ts">([\s\S]*?)<\/script>/,
  ...
)

The create-vue JavaScript template (used when --language javascript) generates <script setup> without lang="ts". So for JS MEVN projects the openCeltrix helper is never added, yet the badge button that calls it is always injected:

<button className="powered-badge" @click="openCeltrix">Powered by ...

Two consequences:

  1. Clicking the "Powered by Celtrix" badge throws ReferenceError: openCeltrix is not defined in every JavaScript MEVN / MEVN+tailwind+auth project (mevnSetup, mevnTailwindAuthSetup).
  2. The injected button uses className (React JSX style) inside a Vue template, where the attribute must be class. Vue renders className as a literal attribute, so the .powered-badge CSS class never applies — the badge is unstyled in both TS and JS projects.

Note BADGE_VUE in utils/shared.js:99 already contains the correct class="powered-badge" markup, but it is dead code — injectVueBadge hardcodes its own className string instead of using it.

Reproduction

  1. celtrix create → choose mevn stack, language javascript
  2. cd <project>/client && npm run dev
  3. Click the "Powered by Celtrix" badge in HelloWorld.vue

Expected

Badge click opens the Celtrix GitHub repo; badge styled correctly in both JS and TS Vue projects.

Actual

ReferenceError: openCeltrix is not defined (JS) / unstyled badge (all).

Suggested fix

  • Make the script-setup regex match <script setup> with or without lang="ts".
  • Use class= (or :class) instead of className= in the injected Vue button — prefer reusing BADGE_VUE.

Environment

  • celtrix v3.0.1
  • Node 18/20

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions