Advanced Vue.js - Directives, Plugins, and Render Functions Chapter 17.replace(/traceLine/g, 'L')
.replace(/closePath/g, 'z')
}).join(' ').trim(),
fill: 'black',
stroke: 'orange',
'stroke-width': '4'
}
})
]
)
}The highlighted code creates a path element and then sets some attributes, such as fill
and stroke. The d attribute takes the text from inside the component, makes some
substitutions, and then returns it.
We just need to create the Vue instance in the JavaScript:
new Vue({
el: '#app',
components: {
OrangeLine
}
})Now, loading the app, we should see a triangle, which is shown in the following
screenshot: