Getting Started with Vue Editor Component
Smart UI Vue examples target Vue 3 and Vite; enable TypeScript in create-vue when you want typed SFCs.
Demo source (Smart UI repo): vue/vue-3/src/editor/overview/App.vue
Scaffold with Vite (Vue 3)
Run the official scaffolding tool:
npm create vue@latest
You will be prompted for TypeScript, Router, Pinia, and other options. When unsure, accept defaults and enable features later.
cd <your-project-name> npm install npm install smart-webcomponents npm run dev
Vue + TypeScript
If you enabled TypeScript, use vite.config.ts with the same isCustomElement configuration as below so the compiler treats Smart UI tags as native custom elements.
Teach Vue about custom elements
Without this, Vue warns about unknown custom elements. Open vite.config.js or vite.config.ts and configure the Vue plugin so smart-* and legacy jqx-* tags are passed through to the DOM:
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [
vue({
template: {
compilerOptions: {
isCustomElement: tag => tag.startsWith('smart-') || tag.startsWith('jqx-')
}
}
})
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})
App.vue example
Example from Smart UI Vue 3 demos for this widget:
<template>
<div class="vue-root">
<smart-editor id="editor">
<div>
<h2>What is Lorem Ipsum?</h2>
<p>
<strong>Lorem Ipsum</strong> is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's standard
dummy text ever since the 1500s, when an unknown printer took a galley
of type and scrambled it to make a type specimen book. It has survived
not only five centuries, but also the leap into electronic
typesetting, remaining essentially unchanged. It was popularised in
the 1960s with the release of Letraset sheets containing Lorem Ipsum
passages, and more recently with desktop publishing software like
Aldus PageMaker including versions of Lorem Ipsum.
<a href="www.htmlelements.com" title="Smart Elements"
>Smart Elements</a
>
</p>
<table class="wd-Table">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jane</td>
<td>Doe</td>
<td>sample@example.org</td>
<td>
<a href="#">View</a> - <a href="#">Edit</a> -
<a href="#">Delete</a>
</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
<td>sample@example.org</td>
<td>
<a href="#">View</a> - <a href="#">Edit</a> -
<a href="#">Delete</a>
</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
<td>sample@example.org</td>
<td>
<a href="#">View</a> - <a href="#">Edit</a> -
<a href="#">Delete</a>
</td>
</tr>
</tbody>
</table>
</div>
<div>
<h2>Why do we use it?</h2>
<p>
It is a long established fact that a reader will be distracted by the
readable content of a page when looking at its layout. The point of
using Lorem Ipsum is that it has a more-or-less normal distribution of
letters, as opposed to using 'Content here, content here', making it
look like readable English. Many desktop publishing packages and web
page editors now use Lorem Ipsum as their default model text, and a
search for 'lorem ipsum' will uncover many web sites still in their
infancy. Various versions have evolved over the years, sometimes by
accident, sometimes on purpose (injected humour and the like).
</p>
<p>
<img
src="./../../../src/images/Album.png"
width="100"
height="100"
/>
</p>
</div>
<br />
<div>
<h2>Where does it come from?</h2>
<p>
Contrary to popular belief, Lorem Ipsum is not simply random text. It
has roots in a piece of classical Latin literature from 45 BC, making
it over 2000 years old. Richard McClintock, a Latin professor at
Hampden-Sydney College in Virginia, looked up one of the more obscure
Latin words, consectetur, from a Lorem Ipsum passage, and going
through the cites of the word in classical literature, discovered the
undoubtable source. Lorem Ipsum comes from sections 1.10.32 and
1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and
Evil) by Cicero, written in 45 BC. This book is a treatise on the
theory of ethics, very popular during the Renaissance. The first line
of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in
section 1.10.32.
</p>
<p>
The standard chunk of Lorem Ipsum used since the 1500s is reproduced
below for those interested. Sections 1.10.32 and 1.10.33 from "de
Finibus Bonorum et Malorum" by Cicero are also reproduced in their
exact original form, accompanied by English versions from the 1914
translation by H. Rackham.
</p>
</div>
<div>
<h2>Where can I get some?</h2>
<p>
There are many variations of passages of Lorem Ipsum available, but
the majority have suffered alteration in some form, by injected
humour, or randomised words which don't look even slightly believable.
If you are going to use a passage of Lorem Ipsum, you need to be sure
there isn't anything embarrassing hidden in the middle of text. All
the Lorem Ipsum generators on the Internet tend to repeat predefined
chunks as necessary, making this the first true generator on the
Internet. It uses a dictionary of over 200 Latin words, combined with
a handful of model sentence structures, to generate Lorem Ipsum which
looks reasonable. The generated Lorem Ipsum is therefore always free
from repetition, injected humour, or non-characteristic words etc.
</p>
</div>
</smart-editor>
</div>
</template>
<script>
import { onMounted } from "vue";
import "smart-webcomponents/source/styles/smart.default.css";
import "smart-webcomponents/source/modules/smart.editor.js";
export default {
name: "app",
setup() {
onMounted(() => {
window.Smart(
"#editor",
class {
get properties() {
return {
//Properties
toolbarItems: [
"Bold",
"Italic",
"Underline",
"StrikeThrough",
"FontName",
"FontSize",
"FontColor",
"BackgroundColor",
"LowerCase",
"UpperCase",
"|",
"Formats",
"Alignment",
"OrderedList",
"UnorderedList",
"Outdent",
"Indent",
"|",
"hyperlink",
"table",
"Image",
"|",
"ClearFormat",
"Print",
"SourceCode",
"splitmode",
"FullScreen",
"|",
"Undo",
"Redo",
"subscript",
"superscript",
"delete",
],
};
}
}
);
const editor = document.getElementById("editor");
editor.expandToolbar();
});
},
};
</script>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0 auto;
}
.smart-editor {
width: 100%;
height: 100%;
}
.options {
padding: 20px;
background-color: rgba(191, 191, 191, 0.15);
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 260px;
}
@media (max-width: 750px) {
.options {
position: relative;
top: 30px;
width: 240px;
margin: 0 auto;
}
}
#app,
.vue-root {
width: 100%;
height: 100%;
}
</style>
You can now use smart-editor in templates; bindings and events follow Vue's normal syntax.
Run and build
Development server:
npm run dev
Then open http://localhost:5173/.
Production build:
npm run build
Output goes to ./dist.
Read more about using Smart UI for Vue.
Troubleshooting
- How do I get the editor content?
- Use editor.value to get the HTML content, or editor.textContent for plain text.
- How do I insert content at cursor position?
- Use editor.executeCommand('insertHTML', '<span>inserted</span>') to insert at the current cursor position.
Accessibility
The Editor component follows WAI-ARIA best practices:
- Keyboard navigation - Tab, Arrow keys, Enter, and Escape are supported
- ARIA roles - Appropriate roles and labels are applied automatically
- Focus management - Visible focus indicators for keyboard users
- Screen readers - State changes are announced to assistive technology
- High contrast - Supports Windows High Contrast Mode and forced colors
For custom labeling, set aria-label or aria-labelledby attributes on the component.
Supported stacks: Smart UI targets Angular 17+, React 18+, Vue 3+, Node 18 LTS, and evergreen browsers; pin exact package versions to your org policy.