Zywave User Interface (ZUI) Snippets

This is a preview extension for Visual Studio Code adds snippets for zui-components in HTML in .vue files.

ZUI

Since ZUI doesn't directly support vue, you will need to use events instead of v-model, these snippets will guide you in the right direction to setting up components quicker. That being said, you will probably still need to reference the ZUI repo at some point during your development if you're utilizing ZUI.

Usage

Basic

After installation, it is as simple as typing the component you are about to use, i.e. <zui-button or zui-button and pressing TAB or ENTER. This will auto generate your code in HTML along with possible bindings or classes that you can apply to the component you just generated.

Larger components

Sometimes, when you generate a larger, wrapper component, this will generate more inner components just to show you its full capabilities. For example, generating a <zui-radio-group> will generate sub <zui-radio>s. Give <zui-shell> a go and you'll see this example in full effect.

Component variants

You can also generate variants of components that will include certain attributes, bindings, or components that wouldn't be normally included with that component. <button:icon-left>, for example, generates with a <zui-icon> properly placed for the icon to be placed in the left slot of the button.

Snippet Index

What's the prefix? The prefix is what VSCode is looking for you to type. When you start typing in HTML in a vue file, VSCode uses these prefixes to determine what it suggests to you.