BestRyzeeuu
BestRyzeeuu
PostsComments
NNuxt
Created by BestRyzeeuu on 5/28/2024 in #❓・help
Switched from react to nuxt2 for a legacy project and need help
Hello everyone. I switched jobs, they are using nuxt2, it seems like completely different from what i am used to in React. I have went through the docs for the past week, but i still encounter some weird patterns in the code, and i am going to share on of those, which got me confused right now. So, theres this file, where windowModal component is imported, and then it is used in the templte of the same file as window-modal, looks like they pass all the properties to this window-modal custom element? (There is no custom element like this defined in the application code anywhere). Then there is the actual implementation of imported windowModal component that you can see the code of below. 
<template>
  <div v-if="!!isOpen" class="modal-window" @click.self="$emit('close')">
    <div
      class="dashboard-reserve-general-block white-block"
      :class="extraClass"
      style="height:auto;"
    >
      <div class="wrap-block">
        <div class="title-block" style="padding:20px">
          <slot name="header" />
          <span @click="$emit('close')">
            <i class="fal fa-times" />
          </span>
        </div>
        <slot />

        <slot name="footer" />
      </div>
      <!--<load v-if="!isLoad"/>-->
    </div>
  </div>
</template>

<script>
export default {
  props: {
    size: {
      type: String,
      default: "medium",
      validator: value => {
        return ["small", "medium", "large"].indexOf(value) !== -1;
      }
    },
    extraClass: {
      type: String,
      default: ""
    },
    isOpen: {
      type: Boolean,
      default: false
    },
    isLoad: {
      type: Boolean,
      default: true
    }
  }
};
</script>
<template>
  <div v-if="!!isOpen" class="modal-window" @click.self="$emit('close')">
    <div
      class="dashboard-reserve-general-block white-block"
      :class="extraClass"
      style="height:auto;"
    >
      <div class="wrap-block">
        <div class="title-block" style="padding:20px">
          <slot name="header" />
          <span @click="$emit('close')">
            <i class="fal fa-times" />
          </span>
        </div>
        <slot />

        <slot name="footer" />
      </div>
      <!--<load v-if="!isLoad"/>-->
    </div>
  </div>
</template>

<script>
export default {
  props: {
    size: {
      type: String,
      default: "medium",
      validator: value => {
        return ["small", "medium", "large"].indexOf(value) !== -1;
      }
    },
    extraClass: {
      type: String,
      default: ""
    },
    isOpen: {
      type: Boolean,
      default: false
    },
    isLoad: {
      type: Boolean,
      default: true
    }
  }
};
</script>
my question is, the window-modal element that is used in the main file, is the same component that is exported in that file? windowModal if yes, how does that even work? why is it not <windowModal isOpen isLoad etc etc? what's this pattern of reusing imported module ?
10 replies