How to do it...

When you are writing an <svg> element, you usually have to put data in the attributes of elements inside it to actually draw shapes. For example, if you want to draw a triangle, you have to write the following:

<svg>  <path d="M 100 30 L 200 30 L 150 120 z"/></svg>

The text inside the d attribute is a series of instructions that make a virtual cursor move to draw: M moves the cursor to the (100, 30) coordinate inside the <svg>, then L traces a line up until (200, 30) and then again to the (150, 120) coordinate. Finally, z closes the path we are drawing, and the result is always a triangle.

We would like to write a triangle with a component, but we don't like attributes and we want to write in our own language, so we would ...

Get Vue.js 2 Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.