JavaScriptJavaScriptAngularAngularVueVueReactReact

Getting Started with Vue MultiSplitButton 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/multisplitbutton/basic/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-multi-split-button buttons-data-source="['1', '2', '3']">
      <smart-list-item value="Afghanistan">Afghanistan</smart-list-item>
      <smart-list-item selected value="Albania">Albania</smart-list-item>
      <smart-list-item value="Algeria">Algeria</smart-list-item>
      <smart-list-item value="American Samoa">American Samoa</smart-list-item>
      <smart-list-item value="Andorra">Andorra</smart-list-item>
      <smart-list-item value="Angola">Angola</smart-list-item>
      <smart-list-item value="Anguilla">Anguilla</smart-list-item>
      <smart-list-item value="Antarctica">Antarctica</smart-list-item>
      <smart-list-item value="Antigua and Barbuda">Antigua and Barbuda</smart-list-item>
      <smart-list-item value="Argentina">Argentina</smart-list-item>
      <smart-list-item value="Armenia">Armenia</smart-list-item>
      <smart-list-item value="Aruba">Aruba</smart-list-item>
      <smart-list-item value="Australia">Australia</smart-list-item>
      <smart-list-item value="Austria">Austria</smart-list-item>
      <smart-list-item value="Azerbaijan">Azerbaijan</smart-list-item>
      <smart-list-item value="Bahamas">Bahamas</smart-list-item>
      <smart-list-item value="Bahrain">Bahrain</smart-list-item>
      <smart-list-item value="Bangladesh">Bangladesh</smart-list-item>
      <smart-list-item value="Barbados">Barbados</smart-list-item>
      <smart-list-item value="Belarus">Belarus</smart-list-item>
      <smart-list-item value="Belgium">Belgium</smart-list-item>
      <smart-list-item value="Belize">Belize</smart-list-item>
      <smart-list-item value="Benin">Benin</smart-list-item>
      <smart-list-item value="Bermuda">Bermuda</smart-list-item>
      <smart-list-item value="Bhutan">Bhutan</smart-list-item>
      <smart-list-item value="Bolivia">Bolivia</smart-list-item>
      <smart-list-item value="Bosnia and Herzegovina">Bosnia and Herzegovina</smart-list-item>
      <smart-list-item value="Botswana">Botswana</smart-list-item>
      <smart-list-item value="Bouvet Island">Bouvet Island</smart-list-item>
      <smart-list-item value="Brazil">Brazil</smart-list-item>
      <smart-list-item value="British Indian Ocean Territory">British Indian Ocean Territory</smart-list-item>
      <smart-list-item value="Brunei Darussalam">Brunei Darussalam</smart-list-item>
      <smart-list-item value="Bulgaria">Bulgaria</smart-list-item>
      <smart-list-item value="Burkina Faso">Burkina Faso</smart-list-item>
      <smart-list-item value="Burundi">Burundi</smart-list-item>
      <smart-list-item value="Cambodia">Cambodia</smart-list-item>
      <smart-list-item value="Cameroon">Cameroon</smart-list-item>
      <smart-list-item value="Canada">Canada</smart-list-item>
      <smart-list-item value="Cape Verde">Cape Verde</smart-list-item>
      <smart-list-item value="Cayman Islands">Cayman Islands</smart-list-item>
      <smart-list-item value="Central African Republic">Central African Republic</smart-list-item>
      <smart-list-item value="Chad">Chad</smart-list-item>
      <smart-list-item value="Chile">Chile</smart-list-item>
      <smart-list-item value="China">China</smart-list-item>
      <smart-list-item value="Christmas Island">Christmas Island</smart-list-item>
      <smart-list-item value="Cocos (Keeling) Islands">Cocos Islands</smart-list-item>
      <smart-list-item value="Colombia">Colombia</smart-list-item>
      <smart-list-item value="Comoros">Comoros</smart-list-item>
      <smart-list-item value="Congo">Congo</smart-list-item>
      <smart-list-item value="Congo, The Democratic Republic of The">Congo</smart-list-item>
      <smart-list-item value="Cook Islands">Cook Islands</smart-list-item>
      <smart-list-item value="Costa Rica">Costa Rica</smart-list-item>
      <smart-list-item value="Cote D'ivoire">Cote D'ivoire</smart-list-item>
      <smart-list-item value="Croatia">Croatia</smart-list-item>
      <smart-list-item value="Cuba">Cuba</smart-list-item>
      <smart-list-item value="Cyprus">Cyprus</smart-list-item>
      <smart-list-item value="Czech Republic">Czech Republic</smart-list-item>
      <smart-list-item value="Denmark">Denmark</smart-list-item>
      <smart-list-item value="Djibouti">Djibouti</smart-list-item>
      <smart-list-item value="Dominica">Dominica</smart-list-item>
      <smart-list-item value="Dominican Republic">Dominican Republic</smart-list-item>
      <smart-list-item value="Ecuador">Ecuador</smart-list-item>
      <smart-list-item value="Egypt">Egypt</smart-list-item>
      <smart-list-item value="El Salvador">El Salvador</smart-list-item>
      <smart-list-item value="Equatorial Guinea">Equatorial Guinea</smart-list-item>
      <smart-list-item value="Eritrea">Eritrea</smart-list-item>
      <smart-list-item value="Estonia">Estonia</smart-list-item>
      <smart-list-item value="Ethiopia">Ethiopia</smart-list-item>
      <smart-list-item value="Falkland Islands (Malvinas)">Falkland Islands</smart-list-item>
      <smart-list-item value="Faroe Islands">Faroe Islands</smart-list-item>
      <smart-list-item value="Fiji">Fiji</smart-list-item>
      <smart-list-item value="Finland">Finland</smart-list-item>
      <smart-list-item value="France">France</smart-list-item>
      <smart-list-item value="French Guiana">French Guiana</smart-list-item>
      <smart-list-item value="French Polynesia">French Polynesia</smart-list-item>
      <smart-list-item value="French Southern Territories">French Southern Territories</smart-list-item>
      <smart-list-item value="Gabon">Gabon</smart-list-item>
      <smart-list-item value="Gambia">Gambia</smart-list-item>
      <smart-list-item value="Georgia">Georgia</smart-list-item>
      <smart-list-item value="Germany">Germany</smart-list-item>
      <smart-list-item value="Ghana">Ghana</smart-list-item>
      <smart-list-item value="Gibraltar">Gibraltar</smart-list-item>
      <smart-list-item value="Greece">Greece</smart-list-item>
      <smart-list-item value="Greenland">Greenland</smart-list-item>
      <smart-list-item value="Grenada">Grenada</smart-list-item>
      <smart-list-item value="Guadeloupe">Guadeloupe</smart-list-item>
      <smart-list-item value="Guam">Guam</smart-list-item>
      <smart-list-item value="Guatemala">Guatemala</smart-list-item>
      <smart-list-item value="Guinea">Guinea</smart-list-item>
      <smart-list-item value="Guinea-bissau">Guinea-bissau</smart-list-item>
      <smart-list-item value="Guyana">Guyana</smart-list-item>
      <smart-list-item value="Haiti">Haiti</smart-list-item>
      <smart-list-item value="Heard Island and Mcdonald Islands">Heard Island and Mcdonald Islands</smart-list-item>
      <smart-list-item value="Holy See (Vatican City State)">Holy See</smart-list-item>
      <smart-list-item value="Honduras">Honduras</smart-list-item>
      <smart-list-item value="Hong Kong">Hong Kong</smart-list-item>
      <smart-list-item value="Hungary">Hungary</smart-list-item>
      <smart-list-item value="Iceland">Iceland</smart-list-item>
      <smart-list-item value="India">India</smart-list-item>
      <smart-list-item value="Indonesia">Indonesia</smart-list-item>
      <smart-list-item value="Iran, Islamic Republic of">Iran</smart-list-item>
      <smart-list-item value="Iraq">Iraq</smart-list-item>
      <smart-list-item value="Ireland">Ireland</smart-list-item>
      <smart-list-item value="Israel">Israel</smart-list-item>
      <smart-list-item value="Italy">Italy</smart-list-item>
      <smart-list-item value="Jamaica">Jamaica</smart-list-item>
      <smart-list-item value="Japan">Japan</smart-list-item>
      <smart-list-item value="Jordan">Jordan</smart-list-item>
      <smart-list-item value="Kazakhstan">Kazakhstan</smart-list-item>
      <smart-list-item value="Kenya">Kenya</smart-list-item>
      <smart-list-item value="Kiribati">Kiribati</smart-list-item>
      <smart-list-item value="Korea, Democratic People's Republic of">Korea</smart-list-item>
      <smart-list-item value="Korea, Republic of">Korea, Republic of</smart-list-item>
      <smart-list-item value="Kuwait">Kuwait</smart-list-item>
      <smart-list-item value="Kyrgyzstan">Kyrgyzstan</smart-list-item>
      <smart-list-item value="Lao People's Democratic Republic">Lao People's Democratic Republic</smart-list-item>
      <smart-list-item value="Latvia">Latvia</smart-list-item>
      <smart-list-item value="Lebanon">Lebanon</smart-list-item>
      <smart-list-item value="Lesotho">Lesotho</smart-list-item>
      <smart-list-item value="Liberia">Liberia</smart-list-item>
      <smart-list-item value="Libyan Arab Jamahiriya">Libyan Arab Jamahiriya</smart-list-item>
      <smart-list-item value="Liechtenstein">Liechtenstein</smart-list-item>
      <smart-list-item value="Lithuania">Lithuania</smart-list-item>
      <smart-list-item value="Luxembourg">Luxembourg</smart-list-item>
      <smart-list-item value="Macao">Macao</smart-list-item>
      <smart-list-item value="Macedonia, The Former Yugoslav Republic of">Macedonia</smart-list-item>
      <smart-list-item value="Madagascar">Madagascar</smart-list-item>
      <smart-list-item value="Malawi">Malawi</smart-list-item>
      <smart-list-item value="Malaysia">Malaysia</smart-list-item>
      <smart-list-item value="Maldives">Maldives</smart-list-item>
      <smart-list-item value="Mali">Mali</smart-list-item>
      <smart-list-item value="Malta">Malta</smart-list-item>
      <smart-list-item value="Marshall Islands">Marshall Islands</smart-list-item>
      <smart-list-item value="Martinique">Martinique</smart-list-item>
      <smart-list-item value="Mauritania">Mauritania</smart-list-item>
      <smart-list-item value="Mauritius">Mauritius</smart-list-item>
      <smart-list-item value="Mayotte">Mayotte</smart-list-item>
      <smart-list-item value="Mexico">Mexico</smart-list-item>
      <smart-list-item value="Micronesia, Federated States of">Micronesia</smart-list-item>
      <smart-list-item value="Moldova, Republic of">Moldova, Republic of</smart-list-item>
      <smart-list-item value="Monaco">Monaco</smart-list-item>
      <smart-list-item value="Mongolia">Mongolia</smart-list-item>
      <smart-list-item value="Montserrat">Montserrat</smart-list-item>
      <smart-list-item value="Morocco">Morocco</smart-list-item>
      <smart-list-item value="Mozambique">Mozambique</smart-list-item>
      <smart-list-item value="Myanmar">Myanmar</smart-list-item>
      <smart-list-item value="Namibia">Namibia</smart-list-item>
      <smart-list-item value="Nauru">Nauru</smart-list-item>
      <smart-list-item value="Nepal">Nepal</smart-list-item>
      <smart-list-item value="Netherlands">Netherlands</smart-list-item>
      <smart-list-item value="Netherlands Antilles">Netherlands Antilles</smart-list-item>
      <smart-list-item value="New Caledonia">New Caledonia</smart-list-item>
      <smart-list-item value="New Zealand">New Zealand</smart-list-item>
      <smart-list-item value="Nicaragua">Nicaragua</smart-list-item>
      <smart-list-item value="Niger">Niger</smart-list-item>
      <smart-list-item value="Nigeria">Nigeria</smart-list-item>
      <smart-list-item value="Niue">Niue</smart-list-item>
      <smart-list-item value="Norfolk Island">Norfolk Island</smart-list-item>
      <smart-list-item value="Northern Mariana Islands">Northern Mariana Islands</smart-list-item>
      <smart-list-item value="Norway">Norway</smart-list-item>
      <smart-list-item value="Oman">Oman</smart-list-item>
      <smart-list-item value="Pakistan">Pakistan</smart-list-item>
      <smart-list-item value="Palau">Palau</smart-list-item>
      <smart-list-item value="Palestinian Territory, Occupied">Palestinian Territory, Occupied</smart-list-item>
      <smart-list-item value="Panama">Panama</smart-list-item>
      <smart-list-item value="Papua New Guinea">Papua New Guinea</smart-list-item>
      <smart-list-item value="Paraguay">Paraguay</smart-list-item>
      <smart-list-item value="Peru">Peru</smart-list-item>
      <smart-list-item value="Philippines">Philippines</smart-list-item>
      <smart-list-item value="Pitcairn">Pitcairn</smart-list-item>
      <smart-list-item value="Poland">Poland</smart-list-item>
      <smart-list-item value="Portugal">Portugal</smart-list-item>
      <smart-list-item value="Puerto Rico">Puerto Rico</smart-list-item>
      <smart-list-item value="Qatar">Qatar</smart-list-item>
      <smart-list-item value="Reunion">Reunion</smart-list-item>
      <smart-list-item value="Romania">Romania</smart-list-item>
      <smart-list-item value="Russian Federation">Russian Federation</smart-list-item>
      <smart-list-item value="Rwanda">Rwanda</smart-list-item>
      <smart-list-item value="Saint Helena">Saint Helena</smart-list-item>
      <smart-list-item value="Saint Kitts and Nevis">Saint Kitts and Nevis</smart-list-item>
      <smart-list-item value="Saint Lucia">Saint Lucia</smart-list-item>
      <smart-list-item value="Saint Pierre and Miquelon">Saint Pierre and Miquelon</smart-list-item>
      <smart-list-item value="Saint Vincent and The Grenadines">Saint Vincent and The Grenadines</smart-list-item>
      <smart-list-item value="Samoa">Samoa</smart-list-item>
      <smart-list-item value="San Marino">San Marino</smart-list-item>
      <smart-list-item value="Sao Tome and Principe">Sao Tome and Principe</smart-list-item>
      <smart-list-item value="Saudi Arabia">Saudi Arabia</smart-list-item>
      <smart-list-item value="Senegal">Senegal</smart-list-item>
      <smart-list-item value="Serbia and Montenegro">Serbia and Montenegro</smart-list-item>
      <smart-list-item value="Seychelles">Seychelles</smart-list-item>
      <smart-list-item value="Sierra Leone">Sierra Leone</smart-list-item>
      <smart-list-item value="Singapore">Singapore</smart-list-item>
      <smart-list-item value="Slovakia">Slovakia</smart-list-item>
      <smart-list-item value="Slovenia">Slovenia</smart-list-item>
      <smart-list-item value="Solomon Islands">Solomon Islands</smart-list-item>
      <smart-list-item value="Somalia">Somalia</smart-list-item>
      <smart-list-item value="South Africa">South Africa</smart-list-item>
      <smart-list-item value="South Georgia and The South Sandwich Islands">South Georgia</smart-list-item>
      <smart-list-item value="Spain">Spain</smart-list-item>
      <smart-list-item value="Sri Lanka">Sri Lanka</smart-list-item>
      <smart-list-item value="Sudan">Sudan</smart-list-item>
      <smart-list-item value="Suriname">Suriname</smart-list-item>
      <smart-list-item value="Svalbard and Jan Mayen">Svalbard and Jan Mayen</smart-list-item>
      <smart-list-item value="Swaziland">Swaziland</smart-list-item>
      <smart-list-item value="Sweden">Sweden</smart-list-item>
      <smart-list-item value="Switzerland">Switzerland</smart-list-item>
      <smart-list-item value="Syrian Arab Republic">Syrian Arab Republic</smart-list-item>
      <smart-list-item value="Taiwan, Province of China">Taiwan, Province of China</smart-list-item>
      <smart-list-item value="Tajikistan">Tajikistan</smart-list-item>
      <smart-list-item value="Tanzania, United Republic of">Tanzania, United Republic of</smart-list-item>
      <smart-list-item value="Thailand">Thailand</smart-list-item>
      <smart-list-item value="Timor-leste">Timor-leste</smart-list-item>
      <smart-list-item value="Togo">Togo</smart-list-item>
      <smart-list-item value="Tokelau">Tokelau</smart-list-item>
      <smart-list-item value="Tonga">Tonga</smart-list-item>
      <smart-list-item value="Trinidad and Tobago">Trinidad and Tobago</smart-list-item>
      <smart-list-item value="Tunisia">Tunisia</smart-list-item>
      <smart-list-item value="Turkey">Turkey</smart-list-item>
      <smart-list-item value="Turkmenistan">Turkmenistan</smart-list-item>
      <smart-list-item value="Turks and Caicos Islands">Turks and Caicos Islands</smart-list-item>
      <smart-list-item value="Tuvalu">Tuvalu</smart-list-item>
      <smart-list-item value="Uganda">Uganda</smart-list-item>
      <smart-list-item value="Ukraine">Ukraine</smart-list-item>
      <smart-list-item value="United Arab Emirates">United Arab Emirates</smart-list-item>
      <smart-list-item value="United Kingdom">United Kingdom</smart-list-item>
      <smart-list-item value="United States">United States</smart-list-item>
      <smart-list-item
        value="United States Minor Outlying Islands"
      >United States Minor Outlying Islands</smart-list-item>
      <smart-list-item value="Uruguay">Uruguay</smart-list-item>
      <smart-list-item value="Uzbekistan">Uzbekistan</smart-list-item>
      <smart-list-item value="Vanuatu">Vanuatu</smart-list-item>
      <smart-list-item value="Venezuela">Venezuela</smart-list-item>
      <smart-list-item value="Viet Nam">Viet Nam</smart-list-item>
      <smart-list-item value="Virgin Islands, British">Virgin Islands, British</smart-list-item>
      <smart-list-item value="Virgin Islands, U.S.">Virgin Islands, U.S.</smart-list-item>
      <smart-list-item value="Wallis and Futuna">Wallis and Futuna</smart-list-item>
      <smart-list-item value="Western Sahara">Western Sahara</smart-list-item>
      <smart-list-item value="Yemen">Yemen</smart-list-item>
      <smart-list-item value="Zambia">Zambia</smart-list-item>
      <smart-list-item value="Zimbabwe">Zimbabwe</smart-list-item>
    </smart-multi-split-button>
  </div>
</template>

<script>
import { onMounted } from "vue";
import "smart-webcomponents/source/styles/smart.default.css";
import "smart-webcomponents/source/modules/smart.multisplitbutton.js";

export default {
  name: "app",
  setup() {
    onMounted(() => {});
  }
};
</script>

<style>
smart-multi-split-button {
  min-height: 35px;
  height: auto;
  width: 300px;
}
</style>

You can now use smart-multi-split-button 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 MultiSplitButton 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.

Live demos

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.