Should I use cache component for this project?

nuxt
webpack
vue-cli

#1

Hey I am absolutely a beginner in deploy
I am building a apartement rental website to just show the pics and info
I am using Nuxt for this project
On this project it gonna show a lot of pics on the website and I am sure it gonna caused a performance website
I did compress the pics
When on the gallery page
The loading is a bit slow in local host
I have not deploy it get because I still learning
On this case
Should I use cache component ? I have read on nuxt about the cache component but I am a bit confused how to use it?
Is there anyone can help me ?

And by they way, should I use adios also for this ?


#2

Without any code it’s difficult to help you.

How many pictures are we talking about? How many records? Are you using lazy loading?


#3

So far about 10 and I do love to add more later, I have not use lazy loading yet
Can you give me example recommendation config for caching? And how to use it?
I have look on Google for using cache in nuxt or vue
I have no luck, @andris.vilde

I have to put a YouTube video also inside the web
for lazy loading route, i am using the config of nuxt


#4

this is my ghallery.vue file

            <section class="container-fluid">
  <div class="d-flex flex-row flex-wrap justify-content-center">
    <div class="d-flex flex-column">
      <img v-for="{ img, id, alt, classs} in foto.fluid" :src="img" :alt="alt" :key="id" :class="[classs]">
    </div>
    <div class="d-flex flex-column">
      <img v-for="{ img, id, alt , classOne, classTwo} in foto.scale" :src="img" :alt="alt" :key="id" v-bind:class="[classOne, {scale: classTwo}]">
    </div>
    <div class="d-flex flex-column">
      <img v-for="{ img, id, alt, classOne, classTwo, classThree, classFour} in foto.pp" :src="img" :alt="alt" :key="id" v-bind:class="[classOne, {scale: classTwo},{'mb-2': classThree},{'img-fluid': classFour}]">
    </div>
    <div class="d-flex flex-column">
      <img v-for="{ img, id, alt, classOne, classTwo, classThree, classFour} in foto.mb" :src="img" :alt="alt" :key="id" v-bind:class="[classOne, classTwo,classThree, {'p-1': classFour}]">
    </div>

  </div>
</section>
</template>

<script>
export default {
  data() {
    return {
      foto: {
        fluid: [{
            img: require('@/assets/pic/foto2.jpg'),
            id: 1,
            alt: "Alla fenice Pictures",
            classs: "img-fluid"
          },
          {
            img: require('@/assets/pic/foto3.jpg'),
            id: 2,
            alt: "Alla fenice Pictures",
            classs: "img-fluid"
          }
        ],
        scale: [{
            img: require('@/assets/pic/foto22.jpg'),
            id: 1,
            alt: "Alla fenice Pictures",
            classOne: "img-fluid",
            classTwo: false
          },
          {
            img: require('@/assets/pic/foto5.jpg'),
            id: 2,
            alt: "Alla fenice Pictures",
            classOne: "img-fluid",
            classTwo: true
          }
        ],
        pp: [{
            img: require('@/assets/pic/foto6.jpg'),
            id: 1,
            alt: "Alla fenice Pictures",
            classOne: "img-fluid",
            classTwo: true,
            classThree: true,
            classFour: false
          },
          {
            img: require('@/assets/pic/city.jpg'),
            id: 2,
            alt: "Alla fenice Pictures",
            classOne: "img-fluid",
            classTwo: false,
            classThree: false,
            classFour: false
          }
        ],
        mb: [{
            img: require('@/assets/pic/foto21.jpg'),
            id: 1,
            alt: "Alla fenice Pictures",
            classOne: "img-fluid",
            classTwo: "m-1",
            classThree: "p-1",
            classFour: false
          },
          {
            img: require('@/assets/pic/foto9.jpg'),
            id: 2,
            alt: "Alla fenice Pictures",
            classOne: "img-fluid",
            classTwo: "image",
            classThree: "m-1",
            classFour: true
          }
        ]
      }
    }
  }

and here is the nuxt.conf.js file from loading till end

loading: { color: ‘pink’ },

  /*
  ** Global CSS
  */
  css: [
    '@/assets/css/main.css'
  ],

  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
  ],

  /*
  ** Nuxt.js modules
  */
  modules: [
    ['nuxt-i18n', I18N]
  ],

  /*
  ** Build configuration
  */
  build: {
    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {

    }
  }
}

#5

You should use a custom component for each image to better handle it’s own state. Also the element class logic is absurd. Try doing it like this.


#6

How about the cache? Should I use?
Is about the component you tell me about make the pic like a slide? Right?