Lazy Loading & Transitions

Preview — 3 of 10 questions

What is the difference between using webpackChunkName comments and Vite's rollupOptions.manualChunks for route splitting?

javascript

// Webpack — magic comments group chunks
const routes = [
  {
    path: '/admin/users',
    component: () => import(/* webpackChunkName: "admin" */ './AdminUsers.vue')
  },
  {
    path: '/admin/settings',
    component: () => import(/* webpackChunkName: "admin" */ './AdminSettings.vue')
  }
  // Both go into 'admin.[hash].js'
]

// Vite — vite.config.ts
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('/views/admin/')) {
            return 'admin'
          }
          if (id.includes('/views/auth/')) {
            return 'auth'
          }
        }
      }
    }
  }
})

// Or use vite-plugin-chunk-split for route-based grouping:
import { chunkSplitPlugin } from 'vite-plugin-chunk-split'

plugins: [
  chunkSplitPlugin({
    strategy: 'default',
    customSplitting: {
      'admin-routes': [/src\/views\/admin/]
    }
  })
]

AThey are identical — both achieve the same result regardless of bundler

BNeither approach provides chunk grouping — each import() always creates its own chunk

CwebpackChunkName works in Vite by default; manualChunks is only for Webpack

DwebpackChunkName is a Webpack magic comment for grouping chunks; Vite uses rollupOptions.manualChunks or vite-plugin-chunk-split for equivalent control

How do you implement different transition animations for different routes?

javascript

<!-- App.vue -->
<template>
  <router-view v-slot="{ Component, route }">
    <transition
      :name="route.meta.transition || 'fade'"
      mode="out-in"
    >
      <component :is="Component" :key="route.path" />
    </transition>
  </router-view>
</template>

<style>
/* Fade transition */
.fade-enter-active, .fade-leave-active { transition: opacity 0.3s ease; }
.fade-enter-from, .fade-leave-to { opacity: 0; }

/* Slide transition */
.slide-enter-active, .slide-leave-active { transition: transform 0.3s ease; }
.slide-enter-from { transform: translateX(100%); }
.slide-leave-to { transform: translateX(-100%); }
</style>

AUse <router-view v-slot="{ Component, route }"> with a <transition> whose name comes from route.meta.transition

BUse CSS transitions in the <router-view> without any special configuration

CConfigure transition directly in the router scrollBehavior option

DUse the transition prop on <router-link> components

How do you handle navigation to the same route with different params without component remount?

javascript

import { ref } from 'vue'
import { useRoute, useRouter, onBeforeRouteUpdate } from 'vue-router'

const route = useRoute()
const router = useRouter()
const product = ref(null)

async function loadProduct(id) {
  product.value = null // Show loading state
  product.value = await fetchProduct(id)
}

// Load on initial mount
onMounted(() => loadProduct(route.params.id))

// React to param changes without remount
onBeforeRouteUpdate(async (to, from) => {
  if (to.params.id !== from.params.id) {
    await loadProduct(to.params.id)
  }
})

// Navigation — same route, different param — component is REUSED
function goToProduct(id) {
  router.push({ name: 'product', params: { id } })
}

// Force remount (when you need clean state):
// Add :key="$route.params.id" to <router-view> in parent

AIt's impossible — same-route navigation always causes a full remount

BVue Router automatically reuses the component; use onBeforeRouteUpdate to react to param changes

CUse router.replace() instead of router.push() to prevent remount

DAdd { replace: true, force: true } to the navigation options

Answer all 10 questions (7 more), see explanations for every answer, and track your score.