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...