Installation

Tile UI Vue can be consumed as packages or as copy-paste registry items distributed from the Vue site.

What to choose

• Use the package when you want the quickest setup for a Nuxt or Vue app already aligned to the Tile UI runtime.
• Use the registry when you want to own the component source inside your app and customize implementation details directly.

Package install

pnpm add @tile-ui/vue @tile-ui/styles @tile-ui/core

App styles

Import the shared global styles once in your app entry.

import '@tile-ui/styles/scss/globals.scss';

In Nuxt, a common option is to add the stylesheet in nuxt.config.ts.

export default defineNuxtConfig({
	css: ['@tile-ui/styles/scss/globals.scss'],
});

Package usage

import { TButton, TInput } from '@tile-ui/vue';

export default defineComponent({
	setup() {
		return () => (
			<form class="form-group">
				<TInput label="Project name" helperText="Shown in the dashboard and generated URLs." />
				<TButton type="submit">Create project</TButton>
			</form>
		);
	},
});

Registry install

Use the registry when you want to pull source files into your project rather than consume the published package.

pnpm dlx shadcn@latest add https://vue.tileui.zmorg.cn/r/button.json
pnpm dlx shadcn@latest add https://vue.tileui.zmorg.cn/r/card.json

Recommended registry baseline

Most Vue registry installs should start with these shared items so component dependencies resolve cleanly.

pnpm dlx shadcn@latest add https://vue.tileui.zmorg.cn/r/styles.json
pnpm dlx shadcn@latest add https://vue.tileui.zmorg.cn/r/core.json
pnpm dlx shadcn@latest add https://vue.tileui.zmorg.cn/r/utils.json

Registry output

Registry items currently write files into a structure like this:

components/ui/*
composables/*
styles/*

That keeps Vue components, composables, and shared SCSS assets colocated in a way that works well for Nuxt projects.

Global styles for registry installs

import '@tile-ui/styles/scss/globals.scss';

If you are consuming copied registry styles locally, point the import at the generated path instead.

import '~/styles/globals.scss';

Next steps

1. Review Components for the core primitives.
2. Review Composables for app-level helpers.
3. Review Registry if you plan to copy source into your project.