Nuxt•5mo ago

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 ?

message.txt

3 Replies

manniL•5mo ago

You can write components in kebab-case and PascalCase. Both will work fine (even mixed but I'd not suggest to), while importing component does not work with kebab-case as - is reserved in JS.

BestRyzeeuu•5mo ago

so this means that, windowModal was imported but it can be written as window-modal? 😮 how isi t done behind the hood ? or why would they not use windowModal directly? what's the benefit of it? not readability for sure because even the component properties are written in kebab-case when used here

manniL•5mo ago

yes, correct. IDK why they don't write <WindowModal> instead but both is possible (and allowed) kebab was especially interesting when in-dom templates where important as PascalCase doesn't work for them same idea. HTML properties are also kebab-case by default 😄 (This is not JSX 😛 ) FYI - this is more a vue question than a nuxt quedtion

Gaming

Programming

Switched from react to nuxt2 for a legacy project and need help