========================
CODE SNIPPETS
========================
TITLE: Install coderider-demo-vue Package (npm)
DESCRIPTION: Installs the coderider-demo-vue library using the npm package manager. This command is the first step to include the library in your project.

SOURCE: https://github.com/sonicrang/coderider-demo-vue-index/blob/main/coderider-demo-vue.md#_snippet_0

LANGUAGE: bash
CODE:
```
npm install coderider-demo-vue
```

----------------------------------------

TITLE: Import Specific coderider-demo-vue Components (JS)
DESCRIPTION: Imports individual components like AddressSelector, DateTimePicker, etc., directly from the coderider-demo-vue library. This allows for on-demand usage, potentially reducing bundle size. Requires `coderider-demo-vue`.

SOURCE: https://github.com/sonicrang/coderider-demo-vue-index/blob/main/coderider-demo-vue.md#_snippet_2

LANGUAGE: js
CODE:
```
import { AddressSelector, DateTimePicker, PersonSelector, RedButton, SelectInput, TableEditor, TextInput } from 'coderider-demo-vue'
```

----------------------------------------

TITLE: Globally Register coderider-demo-vue Plugin (Vue 3)
DESCRIPTION: Imports the coderider-demo-vue library and registers it as a global plugin in a Vue 3 application instance. This makes all components available without individual imports. Requires `vue` and `coderider-demo-vue`.

SOURCE: https://github.com/sonicrang/coderider-demo-vue-index/blob/main/coderider-demo-vue.md#_snippet_1

LANGUAGE: js
CODE:
```
import { createApp } from 'vue'
import CoderiderDemoVue from 'coderider-demo-vue'
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(CoderiderDemoVue)
```

----------------------------------------

TITLE: Use SelectInput Component (Vue Template)
DESCRIPTION: Demonstrates the basic usage of the SelectInput component within a Vue template. This component provides a dropdown selection input.

SOURCE: https://github.com/sonicrang/coderider-demo-vue-index/blob/main/coderider-demo-vue.md#_snippet_7

LANGUAGE: vue
CODE:
```
<SelectInput />
```

----------------------------------------

TITLE: Use RedButton Component (Vue Template)
DESCRIPTION: Demonstrates the basic usage of the RedButton component within a Vue template. This component provides a standard button element with specific styling.

SOURCE: https://github.com/sonicrang/coderider-demo-vue-index/blob/main/coderider-demo-vue.md#_snippet_6

LANGUAGE: vue
CODE:
```
<RedButton>Button</RedButton>
```

----------------------------------------

TITLE: Use AddressSelector Component (Vue Template)
DESCRIPTION: Demonstrates the basic usage of the AddressSelector component within a Vue template. This component provides address selection functionality.

SOURCE: https://github.com/sonicrang/coderider-demo-vue-index/blob/main/coderider-demo-vue.md#_snippet_3

LANGUAGE: vue
CODE:
```
<AddressSelector />
```

----------------------------------------

TITLE: Use TextInput Component (Vue Template)
DESCRIPTION: Demonstrates the basic usage of the TextInput component within a Vue template. This component provides a standard text input field.

SOURCE: https://github.com/sonicrang/coderider-demo-vue-index/blob/main/coderider-demo-vue.md#_snippet_9

LANGUAGE: vue
CODE:
```
<TextInput />
```

----------------------------------------

TITLE: Use DateTimePicker Component (Vue Template)
DESCRIPTION: Demonstrates the basic usage of the DateTimePicker component within a Vue template. This component provides date and time selection functionality.

SOURCE: https://github.com/sonicrang/coderider-demo-vue-index/blob/main/coderider-demo-vue.md#_snippet_4

LANGUAGE: vue
CODE:
```
<DateTimePicker />
```

----------------------------------------

TITLE: Use PersonSelector Component (Vue Template)
DESCRIPTION: Demonstrates the basic usage of the PersonSelector component within a Vue template. This component provides user or person selection functionality.

SOURCE: https://github.com/sonicrang/coderider-demo-vue-index/blob/main/coderider-demo-vue.md#_snippet_5

LANGUAGE: vue
CODE:
```
<PersonSelector />
```

----------------------------------------

TITLE: Use TableEditor Component (Vue Template)
DESCRIPTION: Demonstrates the usage of the TableEditor component within a Vue template, showing how to bind data (`modelValue`) and define columns (`columns`). This component provides table editing capabilities.

SOURCE: https://github.com/sonicrang/coderider-demo-vue-index/blob/main/coderider-demo-vue.md#_snippet_8

LANGUAGE: vue
CODE:
```
<TableEditor :modelValue="tableData" :columns="columns" />
```