تایپاسکریپت - NUXT 3 - جدا کردن قالب در فایل vue، اسکریپت در فایل TS، SCSS در فایل SCSS

چگونه میتوانیم قالب، اسکریپت (TS)، و استایل (scss) را در فایلهای جداگانه در nuxt3 جدا کنیم؟

من با استفاده از مرجع Nuxt2 تلاش کردم اما کار نکرد - https://stackoverflow.com/a/50956376/

پاسخ شماره ۱

روش من برای جدا کردن فایلها استفاده از یک composable (به صورت خودکار توسط Nuxt وارد شده) برای منطقم است و وارد کردن یک فایل scss در تگ style، مثل این.

فایل مؤلفه من:

<script lang="ts" setup>
  const { isLoadingComponent, fetchComponentData } = useComponent();

  fetchComponentData();
</script>

<template> 
  <ComponentLoader :is-loading="isLoadingComponent " /> 
</template>

<style lang="scss">
  @import 'file.scss'
</style>

فایل قابل ترکیب من:

export function useComponent() {
  const isLoadingComponent = ref<boolean>(false);

  const fetchComponentData = async () => { 
    isLoadingComponent.value = true;
    const data = await useFetch('api');
    isLoadingComponent.value = false;
  }
  
  return { isLoadingComponent, fecthComponentData };
}

پاسخ شماره ۲

فایلهای .vue میتوانند هر یک از تگهای خود را با استفاده از واردات src با مسیرهای نسبی بارگذاری کنند:

<template src="./template.html"></template>
<style src="./style.scss" lang="scss"></style>
<script src="./script.ts" lang="ts"></script>

مطمئن شوید که «نگاه به تفکیک مسئولیتها چیست؟» را بخوانید