Upgrading @artisanpack-ui/vue 1.x to 2.0

@artisanpack-ui/vue 2.0 is rebuilt on the ArtisanPack UI design system. The components keep their purpose, and three things change underneath them:

• DaisyUI is gone. Components are styled by @artisanpack-ui/css: plain CSS in cascade layers, driven by design tokens. Tailwind is optional.
• One API across Livewire, React and Vue. Some components, props and events were renamed to match. Most 1.x exports still work in 2.0, marked @deprecated, so an app keeps building while you migrate, but they go in the next major.
• Theming is tokens. @artisanpack-ui/tokens 2.0 replaces the DaisyUI color maps with presets built on the tokens.

The codemod does the mechanical part. This guide covers it and what is left for you.

How long the old version is supported

The previous major gets security fixes only for 12 months after the new one ships. No features or component fixes are backported. Each repository's SECURITY.md carries the end date from launch day.

The old and new majors can't be mixed in one app: the new CSS replaces DaisyUI, and the two style the same components differently. Upgrade a whole app at once, on a branch.

1. Update the packages

Commit your work first, then:

npm install @artisanpack-ui/vue@^2 @artisanpack-ui/css
npm uninstall daisyui

2. Run the codemod

Preview the changes:

npx @artisanpack-ui/codemods vue src --dry-run

The dry run prints a diff of every file it would change and writes nothing. Run it without --dry-run to apply them:

npx @artisanpack-ui/codemods vue src

It reads .vue, .ts, .js, .tsx and .jsx files and skips node_modules, build output and dot-directories. It edits in place and keeps your formatting and comments; run your formatter afterwards if a rewritten line runs long.

What it rewrites. In <script>, imports from @artisanpack-ui/vue and every reference to a renamed component, including a components option. In <template>, tags in PascalCase or kebab-case, props (bound or not, in the case you wrote them), events, v-model arguments and slots. Flags that became values (vertical to orientation="vertical"), values that changed with the name (position="left" to placement="start") and per-part class props (merged into classes) are rewritten too. Only tags a file imports from the package are touched, unless you pass --global.

What it reports and leaves alone. Each line of the report has the file, line and column:

It can't see through v-bind="props" or a dynamic value (:vertical="isTall"); both are reported. Templates in other languages, such as Pug, are not rewritten. You can run the codemod again after you fix things by hand: migrated code has nothing left for it to rewrite. The exception is a 1.x name that 2.0 reuses with a new meaning, such as label on Code. Preview a second run with --dry-run.

3. Remove DaisyUI and adopt the new CSS

Load the CSS once. Without Tailwind, import it in your app's entry:

import '@artisanpack-ui/css';

With Tailwind v4, import it from your Tailwind entry stylesheet instead. Declare the layer order first, so Preflight never restyles a component and a utility on a component still wins. The last import is optional: it adds utilities generated from the tokens (bg-surface-page, text-muted, rounded-control).

@layer theme, base, apui, components, utilities;
@import 'tailwindcss';
@import '@artisanpack-ui/css';
@import '@artisanpack-ui/css/tailwind';

Then delete @plugin "daisyui"; and any @plugin "daisyui/theme" block from your CSS.

To bring your own styles, import @artisanpack-ui/css/headless instead: the same markup, ARIA and behavior with no component CSS.

Replace raw DaisyUI classes

Markup that used DaisyUI classes directly (btn, card, badge, bg-base-200) has no styles once DaisyUI is gone. The upgrade tool lists every one with its file and line and never rewrites them, because the right replacement depends on the element. For each:

The tool marks names such as input, table, link and label as "may be": they are DaisyUI classes and also common class names of your own. Check each.

Left and right are logical now. Use ms-*, me-*, ps-*, pe-*, start-* and end-* next to components so layouts mirror in right-to-left languages.

4. Migrate your theme

@artisanpack-ui/tokens 1.x shipped DaisyUI color maps, cn(), resolveColor(), glass helpers and a Tailwind plugin. 2.0 replaces all of them with the design tokens as --apui-* custom properties, which @artisanpack-ui/css already includes. Remove the 1.x Tailwind plugin from your config and any imports of those helpers.

A brand is a preset. The generator ships with the tokens package, so install it, then generate a preset from your colors:

npm install --save-dev @artisanpack-ui/tokens@^2
npx apui-generate-preset --name acme --primary "#7c3aed" > acme.css

The generator refuses a preset that fails WCAG 2.2 AA contrast in any theme. Import the file after @artisanpack-ui/css and switch it on with <html data-preset="acme">.

The theme lives in data-theme on <html>. ThemeToggle sets and stores it and reports a change as update:modelValue. Render ThemeScript in the document head to apply the stored theme before first paint.

Repoint theme variables

DaisyUI's custom properties are gone, and nothing aliases them. The tool lists each reference:

--color-* is also a Tailwind theme namespace, so some of these may be yours and not DaisyUI's. The tool can't tell; you can.

Themes and presets

Theme, preset and density (data-density="compact") combine, and any element can set them for its subtree.

5. Renamed and consolidated components

6. Changes by component

Every 1.x prop, slot and event that changed. "Automatic" says whether the codemod makes the change for you.

<Accordion>

<Alert>

<Avatar>

<Badge>

<Breadcrumbs>

<Button>

<Calendar>

<Card>

<Carousel>

<Chart>

<Checkbox>

<Clipboard>

<Code>

<ColorPicker>

<DatePicker>

<Diff>

<Divider>

<Drawer>

<Dropdown> → <DropdownMenu>

<EmptyState>

<ErrorDisplay> → <ErrorState>

<FileUpload> → <File>

<Grid>

<Icon>

<Input>

<Loading>

<Markdown>

<Menu>

<Modal> → <Dialog>

<Navbar>

<Pagination>

<Password>

<Pin>

<Popover>

<Progress>

<Radio> → <RadioGroup>

<RichTextEditor>

<Select>

<Skeleton>

<Sparkline>

<SpotlightSearch> → <Spotlight>

<Stack>

<Stat>

<Steps>

<Table>

<Tabs>

<Textarea>

<ThemeToggle>

<Timeline>

<Toggle>

<Tooltip>

7. After the codemod

• Work through the manual lines of the report, then the class lines.
• Events. Value and open changes are update:modelValue and update:open, so v-model and v-model:open cover them. The codemod renames handlers and marks each for review, because the payload is now the value and not a DOM event.
• Toasts. ToastProvider no longer wraps the app. Render one Toaster and create toasts with toast.create().
• Left and right. Placement and side props take start and end, so layouts mirror in right-to-left languages.
• Run the type checker: every prop the codemod left behind is a type error that points at the line.
• Look at each page in light, dark and high-contrast themes.