When to split your code into components in Nuxt?

user_7936850 0
Viewed 55

I'm coding a project in Vue, Nuxt and vuetify as UI library.

In my index page I have to show a lot of static contents and images with slides and carousels. I have coded it and everything works fine but my index.vue file in pages directory looks messy and I feel there is too many lines of code in there.

For instance I have the following code for showing a carousel in index.vue:

<v-carousel 
          height="90vh"
          vertical
          vertical-delimiters="right"
          interval="9000"
          cycle
          :show-arrows="false"
          hide-delimiter-background
        >
          <v-carousel-item
            v-for="(item,i) in carouselItems" :key="i"
            :src="item.src"
            reverse-transition="scroll-y-transition"
            transition="scroll-y-transition"
          >
              <div
                class="d-flex transition-fade-in white--text"
                style="height: 100%;background: linear-gradient(rgba(0,0,0,.1), rgba(0,0,0,.9));"
              >
                  <v-row
                    class="fill-height pb-9 mx-5 flex-column"
                    align="start"
                    justify="end"
                  >
                    <div class="text-h3 white--text d-block mb-2">
                      {{ item.title }}
                    </div>
                    <div class="text-h6 white--text mx-1 text-justify"> {{ item.description }} </div>
                  </v-row>
              </div>
          </v-carousel-item>
        </v-carousel>

Now my question is should I separate this code into a component and pass the options and items as props to that component or should I leave it as it is and it's OK to have a page component with many lines of code?

nuxt.js vue-component vue.js
1 Answers

It all depends on you, the way you work and how you/your team feel like about splitting into components. There is no standard as of to say something like "a component needs to be at max 300 lines" or something alike.

It also comes down to logic with your components, make them do 1 thing well rather than too much at the same time. But don't over-engineer it by having 50 lines of components that could totally be a single component neither because it will also introduce some complexity that is not needed.

Just code and split when you feel like it's doing too much or it's to big. I usually have components from 5 lines of code up to 300~400 as a maximum depending of their complexity/implementation.

user_88165850
Related