Your first Vue component

It turns out that we've been using components all along inside of our Vue applications! Using the webpack-simple template, we have support for Single File Components (SFC), which is essentially just a template, script, and style tag with a .vue extension:

# Create a new Vue project
$ vue init webpack-simple vue-component-1

# Navigate to directory
$ cd vue-component-1

# Install dependencies
$ npm install

# Run application
$ npm run dev

As we're using the Vetur extension for Visual Studio Code, we're able to type scaffold and hit Tab, this then creates an SFC that can be used inside of our project. If we overwrite App.vue with an empty component, by our current definition it will look as follows:

That's it! Sort of. We've still got to add some functionality to our component, and if we were creating a new file (that is, not using the default App.vue component), register it somewhere to be used. Let's see this in action by creating a new file under src/components/FancyButton...