flex-render-vue

Vue 3 component for rendering LINE Flex Messages (Bubbles & Carousels).

flex-render-vue provides a native Vue 3 component (<FlexPreview />) to display raw LINE Flex Message JSON specs directly in Vue 3 applications.

📦 Installation

# pnpm
pnpm add flex-render-vue flex-render

# npm
npm install flex-render-vue flex-render

# yarn
yarn add flex-render-vue flex-render

# bun
bun add flex-render-vue flex-render

🚀 Quick Start

Import <FlexPreview /> in your Vue 3 SFC (Single File Component) and pass your Flex Message JSON object to the :json prop:

<script setup lang="ts">
import { FlexPreview } from 'flex-render-vue'
import type { FlexContainer } from 'flex-render'

const flexJSON: FlexContainer = {
  type: 'bubble',
  body: {
    type: 'box',
    layout: 'vertical',
    contents: [
      {
        type: 'text',
        text: 'Hello from Vue 3!',
        weight: 'bold',
        size: 'lg',
        color: '#1DB446',
      },
    ],
  },
}
</script>

<template>
  <div class="preview-container">
    <FlexPreview :json="flexJSON" />
  </div>
</template>

Note: Required CSS styles are bundled and automatically imported within the component. You can also manually import import 'flex-render-vue/css' if needed.

⚙️ Props API Reference

<FlexPreview /> Props

| Prop Name | Type | Required | Description | | :-------- | :----------------------------------------------- | :------- | :-------------------------------------------------------------------------------------------------------------------- | | json | FlexContainer (FlexBubble | FlexCarousel) | Yes | The Flex Message JSON object exported from LINE Flex Message Simulator. |

🔗 Related Packages

• flex-render - Core Vanilla JS rendering engine.
• flex-render-react - React component wrapper.

For a full working example, check out apps/vue in the main repository.

🐛 Bug Reports

If you encounter any issues, please file a report on our GitHub Issue Tracker.

📄 License

MIT © Supakarn Laorattanakul (iamprompt)