# `LiveVue`
[🔗](https://github.com/Valian/live_vue/blob/v1.2.1/lib/live_vue.ex#L1)

LiveVue provides seamless integration between Phoenix LiveView and Vue.js components.

## Installation and Configuration

See README.md for installation instructions and usage.

In the standard `~H` setup generated by `mix live_vue.install`, `LiveVue.SharedPropsView`
rewrites LiveVue component tags to inject shared props and `v-socket` automatically.
You usually don't need to pass `v-socket` manually unless you call `LiveVue.vue/1`
directly or bypass that `~H` override.

## Component Options

When using the `vue/1` component or `~V` sigil, the following options are supported:

### Required Attributes
  * `v-component` (string) - Name of the Vue component (e.g., "YourComponent", "directory/Example")

> #### Tip {: .tip}
>
> Value of `v-component` will be directly passed to `resolve` function of the `createLiveVue` instance.
> It should return Vue component or a promise that resolves to a Vue component.
> In a standard setup, you can find it in `assets/vue/index.js`.

### Optional Attributes
  * `id` (string) - Explicit ID of the wrapper component. If not provided, a random one will be
    generated. Useful to keep ID consistent in development (e.g., "vue-1")
  * `class` (string) - CSS class(es) to apply to the Vue component wrapper
    (e.g., "my-class" or "my-class another-class")
  * `v-ssr` (boolean) - Whether to render the component on the server. Defaults to the value set
    in config (default: true)
  * `v-socket` (LiveView.Socket) - LiveView socket. Usually injected automatically for LiveVue
    component tags in standard `~H` templates; pass it manually when calling `LiveVue.vue/1`
    directly or bypassing `LiveVue.SharedPropsView`
  * `v-inject` (string) - Render this component into the default slot of another LiveVue
    component by passing the target component's `id`
  * `v-inject:*` (string) - Render this component into a named slot of another LiveVue
    component, e.g. `v-inject:sidebar="layout"`

### Event Handlers
  * `v-on:*` - Vue event handlers can be attached using the `v-on:` prefix
    (e.g., `v-on:click`, `v-on:input`)

### Props and Slots
  * All other attributes are passed as props to the Vue component
  * Slots can be passed as regular Phoenix slots

# `sigil_VUE`
*macro* 

Inlines a Vue single-file component inside a LiveView. This is the new recommended way over the `~V` sigil.

# `vue`

Renders a Vue component within Phoenix LiveView.

## Examples

    <.vue
      v-component="MyComponent"
      message="Hello"
      v-on:click="handleClick"
      class="my-component"
    />

    <.vue
      v-component="nested/Component"
      v-ssr={false}
      items={@items}
    >
      <:default>Default slot content</:default>
      <:named>Named slot content</:named>
    </.vue>

---

*Consult [api-reference.md](api-reference.md) for complete listing*