Vue provides a special file format to combine the template, logic, and styling of a component in a single file. This format is called Single-File Component (SFC) also known as *.vue file.
Component.vue
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>
<template>
<p class="greeting">{{ count }}</p>
</template>
<style scoped>
.counter {
color: orangered;
}
</style>
This format is very convenient for small components, but it can become a bit overwhelming for larger components. In this case, you can split your SFC into multiple files using the src attribute to import an external file for a language block:
Component.vue
<script src="./script.js"></script>
<template src="./template.html"></template>
<style scoped src="./styles.css"></style>
This approach doesn't work with the
<script setup> block. Compiler macros like defineProps or defineEmits are compiler macros only usable inside <script setup>.But you can import any JavaScript/Typescript file:Component.vue
<script setup lang="ts">
defineProps<{ msg: string }>()
import { msg } from './script.ts'
</script>
<template src="./template.html"></template>
<style scoped src="./styles.css"></style>
Try it yourself:
I personally never needed and used this feature, but I think it's good to know that it exists.Instead, I prefer to use Composition API to extract shared logic in a separate file or split the component into multiple components.
If you liked this Vue tip, follow me on BlueSky to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue & Nuxt newsletter :