Vue Trix

Simple and lightweight Trix rich-text editor for Vue.js. - See a live demo here.

Documentation

Read the full documentation here

Features

• A simple and lightweight rich-text editor for writing daily.
• Two-way binding with v-model easily.
• Auto-save editor data temporally what you have typed into the form input in case something goes wrong (for example, the browser could crash or you could accidentally refresh the page without submit saving).

Installation

1npm install @toneflix/vue-trix
2#or
3yarn add @toneflix/vue-trix
4#or
5pnpm add @toneflix/vue-trix

Usage

Global Registration

You can make Vue Trix available throughout your Vue project.

main.js or main.ts

1import 'trix/dist/trix.css'
2import { createApp } from 'vue'
3import App from './app.vue'
4import VueTrix from '@toneflix/vue-trix'
5
6const app = createApp(App)
7app.use(VueTrix)
8app.mount('#app')

Local Registration

You can also import the component in your Vue component.

SomeComponent.vue

1<script setup>
2import 'trix/dist/trix.css'
3import { VueTrix } from '@toneflix/vue-trix'
4</script>

Create a simple editor in your single component file

SomeComponent.vue

1<script setup lang="ts">
2import 'trix/dist/trix.css'
3import { VueTrix } from '@toneflix/vue-trix'
4import { ref } from 'vue'
5
6const value = ref<string>('')
7</script>
8
9<template>
10  <div style="display: flex; flex-direction: row;">
11    <vue-trix v-model="value" />
12  </div>
13</template>