При использовании в разработке vue-cli с webpack со специальным модулем vue-loader становится возможным использование однофайловых компонентов.

Однофайловые компоненты в процессе сборки компилируются в обычный JavaScript.

Однофайловые компоненты имеют расширение *.vue и следующий синтаксис:

<template>

<p>{{ hello }}</p>

</template>

<script>

export default {

data() {

return {

hello: 'Hello, World!'

}

}

}

</script>

<style>

</style>

Можно увидеть три основные секции:

1. template -- содержит шаблон компонента, который будет обработан Vue; ограничение: в секции template должен быть только один корневой элемент!
2. script -- содержит описание компонента на JavaScript; можно использовать любые команды обычного JavaScript ES6 (import, let, ...).
3. style -- содержит CSS-стили, принадлежащие данному компоненту; стили можно сделать изолированными с помощью атрибута scoped: <style scoped></style>.

Обязательно должна присутствовать только секция template.