Getting Started

Installation

Install with npm:

npm install ew-vue-component

Install with yarn:

yarn add ew-vue-component

Install with pnpm:

pnpm add ew-vue-component

Basic Usage

1. Global Registration

import { createApp } from 'vue'
import { EwVueComponent } from 'ew-vue-component'
import App from './App.vue'

const app = createApp(App)
app.component('EwVueComponent', EwVueComponent)
app.mount('#app')

2. Local Registration

<template>
  <EwVueComponent :is="currentComponent" />
</template>

<script setup>
import { ref } from 'vue'
import { EwVueComponent } from 'ew-vue-component'

const currentComponent = ref('div')
</script>

3. Basic Example

<template>
  <div>
    <button @click="switchComponent">Switch Component</button>
    <EwVueComponent 
      :is="currentComponent" 
      :class="componentClass"
      @error="handleError"
    >
      <template #default>
        <p>This is slot content</p>
      </template>
    </EwVueComponent>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { EwVueComponent } from 'ew-vue-component'

const currentComponent = ref('div')
const componentClass = ref('my-component')

const switchComponent = () => {
  currentComponent.value = currentComponent.value === 'div' ? 'span' : 'div'
}

const handleError = (error) => {
  console.error('Component loading failed:', error)
}
</script>

Supported Component Types

EwVueComponent supports multiple component types:

1. HTML Tags

<template>
  <EwVueComponent is="div" class="container">
    <p>This is a div element</p>
  </EwVueComponent>
</template>

2. Vue Components

<template>
  <EwVueComponent :is="MyComponent" :title="title" />
</template>

<script setup>
import { ref } from 'vue'
import { EwVueComponent } from 'ew-vue-component'
import MyComponent from './MyComponent.vue'

const title = ref('Hello World')
</script>

3. Async Components

<template>
  <EwVueComponent :is="asyncComponent" />
</template>

<script setup>
import { ref } from 'vue'
import { EwVueComponent } from 'ew-vue-component'

const asyncComponent = ref(() => import('./AsyncComponent.vue'))
</script>

4. Component Objects

<template>
  <EwVueComponent :is="componentObject" />
</template>

<script setup>
import { ref, h } from 'vue'
import { EwVueComponent } from 'ew-vue-component'

const componentObject = ref({
  render() {
    return h('div', { class: 'custom-component' }, 'Dynamically created component')
  }
})
</script>

Props Forwarding

EwVueComponent automatically forwards all props (except is):

<template>
  <EwVueComponent 
    :is="currentComponent"
    :title="title"
    :count="count"
    :disabled="disabled"
    @click="handleClick"
  />
</template>

<script setup>
import { ref } from 'vue'
import { EwVueComponent } from 'ew-vue-component'

const currentComponent = ref('button')
const title = ref('Click me')
const count = ref(0)
const disabled = ref(false)

const handleClick = () => {
  count.value++
}
</script>

Slot Support

Supports default slots and named slots:

<template>
  <EwVueComponent :is="currentComponent">
    <!-- Default slot -->
    <template #default>
      <p>Default content</p>
    </template>
    
    <!-- Named slots -->
    <template #header>
      <h2>Header content</h2>
    </template>
    
    <template #footer>
      <p>Footer content</p>
    </template>
  </EwVueComponent>
</template>

Error Handling

When component loading fails, an error event is triggered:

<template>
  <EwVueComponent 
    :is="currentComponent"
    @error="handleError"
  />
</template>

<script setup>
import { ref } from 'vue'
import { EwVueComponent } from 'ew-vue-component'

const currentComponent = ref('NonExistentComponent')

const handleError = (error) => {
  console.error('Component error:', error)
  // You can set a fallback component here
  currentComponent.value = 'div'
}
</script>

Next Steps

• Check out the API documentation for complete API reference
• Browse examples to learn more usage patterns
• Learn about advanced features and best practices