Props

This page demonstrates usage of the props exposed by Vue Trix.

modelValue | {string}

Must be a string; Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive.

Value: <p>Hello World</p>

<script setup lang="ts">
import { ref } from 'vue';
const content = ref<string>('<p>Hello World</p>');
</script>

<template>
  <vue-trix v-model="content" />
</template>

disabled {boolean | optional | false}

This prop will put the editor in read-only mode

<template>
  <vue-trix disabled model-value="<p>Hello World</p>" />
</template>

inputId {string | optional | random}

This is referenced id of the hidden input field defined. It is optional and will be a random string by default.

<template>
  <vue-trix input-id="description" model-value="<p>Hello World</p>" />
</template>

inputName {string | optional | 'content'}

This is referenced name of the hidden input field defined.

<template>
  <vue-trix input-name="content" model-value="<p>Hello World</p>" />
</template>

placeholder {string | optional }

The placeholder attribute specifies a short hint that describes the expected value of an editor.

<template>
  <vue-trix placeholder="Enter the description" model-value="<p>Hello World</p>" />
</template>

localStorage {boolean | optional| false}

The boolean attribute allows saving editor state into browser's localStorage.

<template>
  <vue-trix local-storage model-value="<p>Hello World</p>" />
</template>

autofocus {boolean | optional| false}

Focuses cursor in the editor when attached to the DOM.

<template>
  <vue-trix autofocus model-value="<p>Hello World</p>" />
</template>

config {object | optional| {}}

Object to override default editor configuration.

<script setup lang="ts">
import { ref } from 'vue';
const config = ref<Record<string, any>>({
  dompurify: {
    ADD_TAGS: [ "my-custom-tag" ]
  }
});
</script>

<template>
  <vue-trix :config="config" model-value="<p>Hello World</p>" />
</template>