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.

First, register the Tile UI namespace in components.json so shadcn can resolve shared registry dependencies without hardcoding the docs domain into each item:

{
	"registries": {
		"@tile-ui": "https://vue.tileui.zmorg.cn/r/{name}.json"
	}
}

pnpm dlx shadcn@latest add @tile-ui/styles @tile-ui/button
pnpm dlx shadcn@latest add @tile-ui/card

The CLI will resolve shared items such as @tile-ui/core and @tile-ui/utils automatically.

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 '~/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.