vuejstips.

Write better Vue and Nuxt code.

A highly curated collection of practical tips, advanced patterns, and performance tweaks for Vue & Nuxt.

useTip.ts
const { tip } = useAsyncData(
  'awesome-trick',
  () => queryContent().findOne()
)

Popular Topics
vue
nuxt
vite
previousnext

Nuxt 3.11's `usePreviewMode()` composable lets you toggle preview mode for draft content with a single call.

<!-- pages/[...slug].vue -->
<script setup>
const { enabled, state } = usePreviewMode()
</script>

<template>
  <div>
    <div v-if="enabled" class="preview-banner">
      Preview mode is active
    </div>
    <ContentRenderer :value="page" />
  </div>
</template>

// Activate by visiting: /my-page?preview=true&token=my-secret

// You can also customize the enable check:
const { enabled, state } = usePreviewMode({
  shouldEnable: () => {
    return route.query.preview === 'true'
      && route.query.token === 'my-secret'
  },
  getState: (currentState) => {
    return { token: route.query.token, ...currentState }
  },
})