Getting Started with Vue Ribbon 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/ribbon/events/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">
<div class="document-container">
<smart-ribbon id="ribbon"></smart-ribbon>
<div class="document">
Events Log:
<ul id="events"></ul>
</div>
</div>
</div>
</template>
<script>
import { onMounted } from "vue";
import "smart-webcomponents/source/styles/smart.default.css";
import "smart-webcomponents/source/modules/smart.ribbon.js";
import "smart-webcomponents/source/modules/smart.colorpicker.js";
export default {
name: "app",
setup() {
onMounted(() => {
window.Smart('#ribbon', class {
get properties() {
return {
dataSource: [{
label: 'Home',
ribbonGroups: [{
label: 'Clipboard',
icon: 'content_paste material-icons',
ribbonItems: [{
label: 'Paste',
icon: 'content_paste material-icons',
size: 'normal',
cssClass: 'flat',
type: 'button',
allowedSizes: ['normal']
},
{
type: 'group',
direction: 'vertical',
ribbonItems: [{
label: 'Cut',
icon: 'content_cut material-icons',
type: 'button',
cssClass: 'flat',
size: 'verySmall',
},
{
label: 'Copy',
icon: 'content_copy material-icons',
type: 'button',
cssClass: 'flat',
size: 'verySmall'
}
]
}
]
},
{
label: 'Font',
icon: 'format_bold material-icons',
ribbonItems: [{
type: 'group',
direction: 'vertical',
ribbonItems: [{
type: 'group',
direction: 'horizontal',
ribbonItems: [{
label: 'Font',
type: 'input',
settings: {
dataSource: ['Arial', 'Arial Black', 'Calibri'],
value: 'Arial',
dropDownButtonPosition: 'right'
},
cssClass: 'font-family-input'
},
{
label: 'Font size',
type: 'input',
settings: {
dataSource: [8, 9, 10, 11, 12, 14, 16, 18, 20, 22, 24, 28, 36, 48, 72],
value: '11',
dropDownButtonPosition: 'right'
},
cssClass: 'font-size-input'
},
]
},
{
type: 'group',
direction: 'horizontal',
ribbonItems: [{
label: 'Bold',
icon: 'format_bold material-icons',
type: 'button',
cssClass: 'flat',
size: 'iconOnly'
},
{
label: 'Italic',
icon: 'format_italic material-icons',
type: 'button',
cssClass: 'flat',
size: 'iconOnly'
},
{
label: 'Underline',
icon: 'format_underlined material-icons',
type: 'button',
cssClass: 'flat',
size: 'iconOnly'
},
{
type: 'separator'
},
{
label: '',
tooltip: 'Font color',
itemTemplate: '<smart-color-picker></smart-color-picker>',
settings: {
value: '#000000',
valueDisplayMode: 'colorBox',
dropDownAppendTo: 'body',
},
}
]
}
]
}]
},
{
label: 'Paragraph',
icon: 'format_align_left material-icons',
ribbonItems: [{
type: 'group',
direction: 'vertical',
ribbonItems: [{
type: 'group',
direction: 'horizontal',
ribbonItems: [{
label: 'Align left',
icon: 'format_align_left material-icons',
type: 'button',
cssClass: 'flat',
size: 'iconOnly'
},
{
label: 'Align center',
icon: 'format_align_center material-icons',
type: 'button',
cssClass: 'flat',
size: 'iconOnly'
},
{
label: 'Align right',
icon: 'format_align_right material-icons',
type: 'button',
cssClass: 'flat',
size: 'iconOnly'
},
{
type: 'separator'
},
{
label: 'Justify',
icon: 'format_align_justify material-icons',
type: 'button',
cssClass: 'flat',
size: 'iconOnly'
}
]
},
{
type: 'group',
direction: 'horizontal',
ribbonItems: [{
label: 'Numbered list',
icon: 'format_list_numbered material-icons',
type: 'button',
cssClass: 'flat',
size: 'iconOnly'
},
{
label: 'Bulleted list',
icon: 'format_list_bulleted material-icons',
type: 'button',
cssClass: 'flat',
size: 'iconOnly'
},
{
type: 'separator'
},
{
label: 'Decrease indent',
icon: 'format_indent_decrease material-icons',
type: 'button',
cssClass: 'flat',
size: 'iconOnly'
},
{
label: 'Increase indent',
icon: 'format_indent_increase material-icons',
type: 'button',
cssClass: 'flat',
size: 'iconOnly'
}
]
}
]
},
{
type: 'separator'
},
{
type: 'group',
direction: 'vertical',
ribbonItems: [{
label: 'Wrap text',
icon: 'wrap_text material-icons',
type: 'button',
cssClass: 'flat',
size: 'verySmall',
allowedSizes: ['iconOnly','verySmall']
},
{
label: 'Sort Selection',
icon: 'sort_by_alpha material-icons',
type: 'button',
cssClass: 'flat',
size: 'verySmall',
allowedSizes: ['iconOnly','verySmall']
}
]
}
]
},
{
label: 'Editing',
icon: 'edit material-icons',
ribbonItems: [{
type: 'group',
wrapSize: 'verySmall',
ribbonItems: [{
label: 'Find',
icon: 'search material-icons',
type: 'button',
cssClass: 'flat',
size: 'normal',
allowedSizes: ['verySmall', 'normal']
},
{
type: 'group',
wrapSize: 'small',
ribbonItems: [
{
label: 'Replace',
icon: 'find_replace material-icons',
type: 'button',
cssClass: 'flat',
size: 'normal',
allowedSizes: ['verySmall', 'small', 'normal']
},
{
label: 'Select all',
icon: 'select_all material-icons',
type: 'button',
cssClass: 'flat',
size: 'normal',
allowedSizes: ['verySmall', 'small', 'normal']
}
]
},
]
}]
}
]
},
{
label: 'Insert',
ribbonGroups: [{
label: 'Tables',
icon: 'table_chart material-icons',
ribbonItems: [{
type: 'group',
direction: 'vertical',
ribbonItems: [{
type: 'group',
direction: 'horizontal',
ribbonItems: [{
label: 'Insert table',
icon: 'table_chart material-icons',
type: 'button',
cssClass: 'flat',
size: 'iconOnly'
},
{
label: 'Insert row above',
icon: 'keyboard_arrow_up material-icons',
type: 'button',
cssClass: 'flat',
size: 'iconOnly'
},
{
label: 'Insert row below',
icon: 'keyboard_arrow_down material-icons',
type: 'button',
cssClass: 'flat',
size: 'iconOnly'
},
{
label: 'Insert column left',
icon: 'keyboard_arrow_left material-icons',
type: 'button',
cssClass: 'flat',
size: 'iconOnly'
},
{
label: 'Insert column right',
icon: 'keyboard_arrow_right material-icons',
type: 'button',
cssClass: 'flat',
size: 'iconOnly'
},
{
type: 'separator'
},
{
label: 'Delete row',
icon: 'delete_sweep material-icons',
type: 'button',
cssClass: 'flat',
size: 'iconOnly'
},
{
label: 'Delete column',
icon: 'delete_sweep material-icons',
type: 'button',
cssClass: 'flat',
size: 'iconOnly'
},
{
label: 'Delete table',
icon: 'delete_sweep material-icons',
type: 'button',
cssClass: 'flat',
size: 'iconOnly'
}
]
},
{
label: 'Table styles',
itemTemplate: '<smart-drop-down-list></smart-drop-down-list>',
settings: {
dataSource: ['Table style 1', 'Table style 2', 'Table style 3', 'Table style 4', 'Table style 5'],
selectedValues: ['Table style 1'],
dropDownAppendTo: 'body',
},
cssClass: 'table-styles-drop-down'
}
]
}]
},
{
label: 'Illustrations',
icon: 'insert_photo material-icons',
ribbonItems: [{
type: 'group',
direction: 'vertical',
ribbonItems: [{
label: 'Pictures',
icon: 'insert_photo material-icons',
type: 'button',
cssClass: 'flat',
size: 'verySmall',
allowedSizes: ['verySmall']
},
{
label: 'Online pictures',
icon: 'cloud_upload material-icons',
type: 'button',
cssClass: 'flat',
size: 'verySmall',
allowedSizes: ['verySmall']
},
{
label: 'Shapes',
icon: 'bubble_chart material-icons',
type: 'button',
cssClass: 'flat',
size: 'verySmall',
allowedSizes: ['verySmall']
},
]
},
{
type: 'separator'
},
{
type: 'group',
wrapSize: 'small',
ribbonItems: [
{
label: 'Icons',
icon: 'insert_emoticon material-icons',
type: 'button',
cssClass: 'flat',
size: 'normal',
allowedSizes: ['small','normal']
},
{
label: '3D models',
icon: 'aspect_ratio material-icons',
type: 'button',
cssClass: 'flat',
size: 'normal',
allowedSizes: ['small','normal']
}]
}
]
}
]
},
{
label: 'View',
ribbonGroups: [{
label: 'Show',
icon: 'visibility material-icons',
wrapSize: 'small',
ribbonItems: [{
label: 'Gridlines',
icon: 'grid_on material-icons',
type: 'button',
cssClass: 'flat',
size: 'normal',
allowedSizes: ['small','normal']
},
{
label: 'Headings',
icon: 'view_headline material-icons',
type: 'button',
cssClass: 'flat',
size: 'normal',
allowedSizes: ['small','normal']
}
]
},
{
label: 'Zoom',
icon: 'zoom_out_map material-icons',
wrapSize: 'small',
ribbonItems: [{
label: 'Zoom to page',
icon: 'pageview material-icons',
type: 'button',
cssClass: 'flat',
size: 'normal',
allowedSizes: ['small','normal']
},
{
label: 'Zoom to selection',
icon: 'zoom_out_map material-icons',
type: 'button',
cssClass: 'flat',
size: 'normal',
allowedSizes: ['small','normal']
},
]
}
]
},
{
label: 'Help',
wrapSize: 'small',
ribbonGroups: [{
label: 'Help',
icon: 'help_outline material-icons',
ribbonItems: [{
label: 'Help',
icon: 'help_outline material-icons',
type: 'button',
cssClass: 'flat',
size: 'normal',
allowedSizes: ['verySmall','small','normal']
},
{
label: 'About',
icon: 'info_outline material-icons',
type: 'button',
cssClass: 'flat',
size: 'normal',
allowedSizes: ['verySmall','small','normal']
}
]
}]
}
],
fileMenu: {
type: 'dropDown',
items: [{
label: 'New',
shortcut: 'Ctrl+N'
},
{
label: 'Open',
shortcut: 'Ctrl+0'
},
{
label: 'Open Containing Folder',
items: [{
label: 'Explorer'
},
{
label: 'cmd'
}
]
},
{
label: 'Save',
shortcut: 'Ctrl+S',
disabled: true,
separator: true
},
{
label: 'Exit',
shortcut: 'Alt+F4'
}
]
}
}
}
});
const eventLog = document.getElementById('events');
const ribbon = document.getElementById('ribbon');
ribbon.addEventListener('click', function (event) {
//check if button was clicked
const button = event.target.closest('smart-button.smart-ribbon-item');
if (button) {
eventLog.innerHTML += '<li>Event: Button Click, Label: ' + button.parentNode.label + '</li>';
}
});
ribbon.addEventListener('change', function (event) {
const input = event.target.closest('smart-input');
if (input) {
eventLog.innerHTML += '<li>Event: Change, Label: ' + input.parentNode.label + ', Value: ' + input.value + '</li>';
return;
}
const dropDownList = event.target.closest('smart-drop-down-list');
if (dropDownList) {
eventLog.innerHTML += '<li>Event: Change, Label: ' + dropDownList.parentNode.label + ', Value: ' + dropDownList.selectedValues + '</li>';
return;
}
const colorPicker = event.target.closest('smart-color-picker');
if (colorPicker) {
eventLog.innerHTML += '<li>Event: Change, Label: Color Picker' + ', Value: ' + colorPicker.value + '</li>';
return;
}
});
ribbon.addEventListener('select', function(event){
eventLog.innerHTML += '<li>Event: Tab Select, Index: ' + event.detail.index + '</li>';
})
ribbon.addEventListener('dialogLauncherClick', function(event){
eventLog.innerHTML += '<li>Event: Dialog Launcher Click, Label: ' + event.detail.groupLabel + '</li>';
});
ribbon.addEventListener('expand', function(){
eventLog.innerHTML += '<li>Event: Ribbon Expanded</li>';
})
ribbon.addEventListener('collapse', function(){
eventLog.innerHTML += '<li>Event: Ribbon Collapsed</li>';
});
});
}
};
</script>
<style>
#events{
margin-top: 10px;
}
.smart-drop-down{
--smart-ribbon-border-color: #e7eaed;
}
smart-ribbon-item smart-color-picker{
width: fit-content;
}
smart-ribbon-item .font-family-input{
width: 140px;
margin-right: 5px;
}
smart-ribbon-item .font-size-input{
width: 60px;
}
.document-container{
background-color: #f4f4f4;
width: 90%;
min-height: 800px;
margin: auto;
}
.document {
width: 80%;
height: 600px;
margin: auto;
margin-top: 50px;
background-color: #fff;
padding: 50px;
}
.content_paste:after{
content: 'content_paste';
}
.content_cut:after{
content: 'content_cut';
}
.content_copy:after{
content: 'content_copy';
}
.format_bold:after{
content: 'format_bold';
}
.format_italic:after{
content: 'format_italic';
}
.format_underlined:after{
content: 'format_underlined';
}
.format_align_left:after{
content: 'format_align_left';
}
.format_align_center:after{
content: 'format_align_center';
}
.format_align_right:after{
content: 'format_align_right';
}
.format_align_justify:after{
content: 'format_align_justify';
}
.format_indent_increase:after{
content: 'format_indent_increase';
}
.format_indent_decrease:after{
content: 'format_indent_decrease';
}
.format_list_bulleted:after{
content: 'format_list_bulleted';
}
.format_list_numbered:after{
content: 'format_list_numbered';
}
.wrap_text:after{
content: 'wrap_text';
}
.search:after{
content: 'search';
}
.find_replace:after{
content: 'find_replace';
}
.select_all:after{
content: 'select_all';
}
.table_chart:after{
content: 'table_chart';
}
.insert_chart:after{
content: 'insert_chart';
}
.keyboard_arrow_up:after{
content: 'keyboard_arrow_up';
}
.keyboard_arrow_down:after{
content: 'keyboard_arrow_down';
}
.keyboard_arrow_left:after{
content: 'keyboard_arrow_left';
}
.keyboard_arrow_right:after{
content: 'keyboard_arrow_right';
}
.delete_sweep:after{
content: 'delete_sweep';
}
.insert_photo:after{
content: 'insert_photo';
}
.cloud_upload:after{
content: 'cloud_upload';
}
.bubble_chart:after{
content: 'bubble_chart';
}
.insert_emoticon:after{
content: 'insert_emoticon';
}
.aspect_ratio:after{
content: 'aspect_ratio';
}
.grid_on:after{
content: 'grid_on';
}
.view_headline:after{
content: 'view_headline';
}
.pageview:after{
content: 'pageview';
}
.zoom_out_map:after{
content: 'zoom_out_map';
}
.help_outline:after{
content: 'help_outline';
}
.info_outline:after{
content: 'info_outline';
}
.sort_by_alpha:after{
content: 'sort_by_alpha';
}
.edit:after{
content: 'edit';
}
.visibility:after{
content: 'visibility';
}
/* fallback */
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/materialicons/v31/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: inherit;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
.material-icons::after{
font-size: 20px;
}
</style>
You can now use smart-ribbon 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.
Accessibility
The Ribbon 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.