typescript - NUXT 3 - ცალ-ცალკე შაბლონი vue ფაილში, სკრიპტი TS ფაილში, scss scss ფაილში

როგორ შეგვიძლია გავაყოფოთ Templelate, Script(TS), Style(SCSS) ინდივიდუალურ ფაილში Nuxt3-ში?

მე ვცადე Nuxt2-ის მითითებით, მაგრამ ეს არ იმუშავე - https://stackoverflow.com/a/50956376/

პასუხი #1

ჩემი ფაილების განცალკევების გზა არის კომპოზიციური (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 };
}

პასუხი #2

.vue ფაილებმა შეუძლიათ ნებისმიერი მათი ტეგის ჩატვირთვა src იმპორტების გამოყენებით ურთიერთობებით მარშრუტებით:

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

დაიცავით კითხვა "რას ვამბობთ ინტერესების განცალკევებაზე?"