<template>
, corresponding <script>
, and CSS <style>
all together in a single file ending in .vue. <script src="./my-component.js"></script>
and <style src="./my-component.css"></style>
.<template>
tag, you can use Pug template syntax instead of standard HTML β <template lang="pug">
. v-if
- conditional rendering (see the v-if documentation), and v-on
- event handling (see the v-on documentation). v-if
directive renders the block if config
returns 'true'. <script>
tag needs to have a default exported JS object. This object is where you locally register components, define component inputs (props), handle local state, define methods, and more. Your build step will process this object and transform it (with your template) into a Vue component with a render() function.<script>
tag to signify to the compiler that you're using TypeScript β <script lang="ts">
.export default{}
(2) is a component object, the .vue files` syntax that makes the following object definition available for use.data()
function (3) describes variables that we can use in the <template>
.methods
block. Methods are closely interlinked to events because they are used as event handlers. Every time an event occurs, that method is called. <template>
the widgetChangeHandler
method (4) is called on click (v-on
directive) to emit the value to the application that uses the button component.this.data.config
, just this.config
. Vue does provide a transparent binding for us. Using this.data.config
will raise an error.props
block (6) defines variables, that are used in the Vue locally. <style>
is where you write your CSS for the component. If you add a scoped attribute <style scoped>
Vue will scope the styles to the contents of your SFC. This works similar to CSS-in-JS solutions but allows you to just write plain CSS.<style>
tag so that the contents can be processed by Webpack at build time. For example, <style lang="scss">
will allow you to use SCSS syntax in your styling information.button-widget
class. If you want the widget field to occupy the entire cell on the dashboard - set width
and height
to 100%
. A user will be able to adjust the widget field in the previewer or on the dashboard. Also, choose the background
color. button-widget
the button
appearance is nested: button-widget__button
. See the <template>
block.medium
custom property defines minimal height and padding of the button.contained
defines the button`s background-color
and the color on hover (again, nested in contained
).button-widget__button--contained
. See the <template>
block.