# Vue Template Node Style Demo

This demo presents the Vue template node style that leverages the powerful data binding and conditional rendering features of the Vue framework.

With this style, node visualizations are defined by SVG templates, similar to the template styles that are included in the library. However, since the templates of this style can use the powerful data binding of Vue, complex requirements are easier to realize.

The section Using Vue Templates in Node Styles in the Developer's Guide elaborates on how to create template strings and which properties are available for data binding.

Please ensure that the applied template is consistent with the Vue 3 guidelines. Template styles created with older versions of Vue might not work in this demo.

## Things to Try

Change the template of one or more nodes. Bind colors or text to properties in the tag. Then, apply the new template by pressing the button. Or modify the tag and see how the style changes.

## Related Documentation

- Using Vue Templates in Node Styles
- Using SVG Templates in Styles

## Related Demos

- Template Styles
- String Template Node Style
- React Template Node Style
- Lit Template Node Style

## Additional Tools

Graphs containing template node style are compatible with yEd Live.