Tip #1: Use Placeholders to Make Your Users Feel Like Your Component Is Loading Faster (Vue & Nuxt)

• Vue Content Placeholders (I usually use this one)
• Vue Content Loader

<template>
  <div>
    <content-placeholders v-if="loading">
      <content-placeholders-heading :img="true" />
      <content-placeholders-text :lines="3" />
    </content-placeholders>

    <div v-else>My Component</div>
  </div>
</template>

<script>
export default {
  props: {
    loading: {
      type: Boolean,
      default: false
    }
  }
}
</script>

⚠️ Note: If you are using Nuxt, make sure that you are familiar with the fetch function and $fetchState.pending. It will allow you to display a placeholder when fetch is being called on client-side.

Tip #2: Add a Specific Prop to Reverse Your Buttons (Vue & Nuxt) Tip #3: Add a Loading State to Your Button (Vue & Nuxt)

⚠️ Note: If you want your button to keep the same width while transitioning from one state to another, you can switch the content opacity to zero when the button is loading and center the spinner using absolute positioning.

Tip #4: Prefetch Some of Your Data Server-side (Nuxt)

If the action nuxtServerInit is defined in the store and the mode is universal, Nuxt.js will call it with the context (only from the server-side). It’s useful when we have some data on the server we want to give directly to the client-side.

export const actions = {
  /**
   * Called server-side at initialization
   * @param {Object} context
   * @param {Object} req
   */
  async nuxtServerInit(context, { req }) {
    // Set token from cookies when defined and fetch user
    if (req && req.headers.cookie) {
      const cookie = cookieparser.parse(req.headers.cookie)

      if (cookie.token) {
        try {
          await context.commit('auth/setToken', { token: cookie.token }, { root: true })

          await context.dispatch('user/fetchUser', {}, { root: true })
        } catch (error) {
          return Promise.reject(error)
        }
      } else {
        await context.commit('user/setUser', { user: false }, { root: true })
      }
    }
  }
}

Tip #5: Use TailwindCSS to Get a Clean, Responsive Website with Sizzy (Vue & Nuxt) Tip #6: Interfaces with Infinite Load Should Always Come with a “Scroll to Top” Button (Vue & Nuxt) Tip #7: Lazy Load Your Images and Scripts (Vue & Nuxt)

<img src="image.png" loading="lazy" alt="…" width="200" height="200">

/**
 * Lazy load an external script
 * @param {String} slug
 * @return {Object} script
 */
export const loadScript = function(src, force = false) {
  return new Promise(function(resolve, reject) {
        let existingEl = document.querySelector(`script[src="https://www.telerik.com${src}"]`);

        if (existingEl && !force) {
            if (existingEl.classList.contains("is-loading")) {
                existingEl.addEventListener("load", resolve);
                existingEl.addEventListener("error", reject);
                existingEl.addEventListener("abort", reject);
            } else {
                resolve();
            }
            return;
        }

        const el = document.createElement("script");

        el.type = "text/javascript";
        el.async = true;
        el.src = src;
        el.classList.add("is-loading");

        el.addEventListener("load", () => {
            el.classList.remove("is-loading");
            resolve();
        });

        el.addEventListener("error", reject);
        el.addEventListener("abort", reject);

        document.head.appendChild(el);
    });
}

// With a promise
loadScript("myscript.js").then(() => {
   console.log("script loaded")
})

// Or with async await
await loadScript("myscript.js")
console.log("script loaded")

Tip #8: Help Users Know Where They Are on Your Website : Use Breadcrumbs (Vue & Nuxt)

<template>
  <div class="flex items-center px-4 py-2 mb-6 bg-gray-200 border rounded select-none">
    <div v-for="(item, index) in itemsWithHome" :key="item.label" class="flex items-center">
      <component
        :is="item.to ? 'nuxt-link' : 'div'"
        :class="[
          {
            'font-bold': index + 1 !== itemsWithHome.length,
            underline: index + 1 === itemsWithHome.length
          }
        ]"
        :to="item.to"
        class="text-xs uppercase shadow-none last:mr-0"
      >
        {{ item.label }}
      </component>

      <span class="mx-1">></span>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    itemsWithHome() {
      const routeItems = this.$route.path.split('/').filter((item) => item)
      const nonRouteItems = ['lists']

      const items = [
        {
          label: 'Home',
          link: {
            name: 'homepage'
          }
        }
      ]

      // Build breadcrumb items with links
      routeItems.forEach((routeItem, index) => {
        if (index === 0) {
          items.push({
            label: routeItem,
            to: {
              name: routeItem
            }
          })
        } else {
          const item = {
            label: this.$filters.unslugify(routeItem)
          }

          if (!nonRouteItems.includes(routeItem)) {
            item.to = {
              name: this.$route.name,
              params: this.$route.params
            }
          }

          items.push(item)
        }
      })

      return items
    }
  }
}
</script>

Tip #9: Use Accordions to Compress Lengthy Content for Small Devices (Vue & Nuxt) Tip #10: Allow the User to Share Pages with Filtered Content by Adding Filter Parameters to Your URLs (Vue & Nuxt)

https://www.mywebsite.com/companies/?c1=country,fr,equals,or&c2=social_networks.name,behance_page,facebook_group,equals,and&page=1

---