1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162---
id: 75acf155-0662-4b74-8555-52e5cf02446c
slug: set-up-live-preview-with-nuxt
title: Set Up Live Preview with Nuxt
technologies:
- nuxt
authors:
- name: Kevin Lewis
title: Director, Developer Experience
description: Learn how to create a Nuxt preview plugin to configure Live Preview.
---
Directus' Live Preview feature allows you to show changes in your website collection before publishing and without the
need to refresh the browser.
By adding a preview URL and setting up your Nuxt 3 application, you can instantly see live changes made to your
collection inside of Directus. This is useful when using Directus as a
[Headless CMS](https://directus.io/solutions/headless-cms).
## Before You Start
You will need:
- A Directus project. The easiest way to get started with Directus is with our
[managed Directus Cloud service](https://directus.cloud). You can also self-host Directus.
- A Nuxt 3 application.
- Some knowledge of Vue and Nuxt.
If you're just getting started with Nuxt and Directus, reference our
[guide](/tutorials/getting-started/fetch-data-from-directus-with-nuxt) to set up Nuxt 3 with Directus by creating a custom
plugin. This guide assumes you have already set up the plugin and have access to `this.$directus`, `this.$readItem` and
`this.$readItems` in your project.
In your Directus project, create a new `posts` collection. Add `title` and `content` fields to your collection. Create
an item in the new collection, and make sure the Public role has Read access to the collection.
## Set Up Nuxt
Create an `index.vue` file to load all of the items in the posts collection:
```vue
<template>
<h1>Blog</h1>
<ul>
<li v-for="post in posts" :key="post.id">
<NuxtLink :href="`/${post.slug}`">
<h2>{{ post.title }}</h2>
</NuxtLink>
</li>
</ul>
</template>
<script setup>
const { $directus, $readItems } = useNuxtApp()
const posts = await useAsyncData('posts', () => {
return $directus.request($readItems('posts'))
})
</script>
```
Create a `[id].vue` file that will load for single items in the collection:
```vue
<template>
<NuxtLink to="/">Home</NuxtLink>
<h1>{{ post.title }}</h1>
<div v-html="post.content"></div>
</template>
<script setup>
const { $directus, $readItem } = useNuxtApp();
const route = useRoute();
const post = await useAsyncData('post', () => {
return $directus.request($readItem('posts', route.params.id))
});
if (!post.value) throw createError({
statusCode: 404,
statusMessage: 'Post Not Found'
});
</script>
```
## Configure Live Preview URL in Directus
Navigate to Settings -> Data Model and select the `posts` collection. In the "Preview URL" section, specify the Preview
URL for your Nuxt project by selecting ID from the dropdown and entering a URL in this format:
`http://your-website-url/ID?preview=true`
## Set Up Preview Plugin
Nuxt 2 had a Preview mode feature, but it has not yet been included in Nuxt 3. A preview mode plugin for Nuxt 3 can be
created using [this snippet](https://github.com/nuxt/nuxt/discussions/18407) from GitHub user `JonathanDoelan`.
Create a `plugins/preview.js` file:
```js
export default defineNuxtPlugin((nuxtApp) => {
const route = useRoute();
const preview = route.query.preview && route.query.preview === 'true';
if (preview) {
nuxtApp.hook('page:finish', () => {
refreshNuxtData();
});
}
return { provide: { preview } };
});
```
This plugin checks for the use of a `preview=true` URL parameter. If present, it waits for the page to finish loading
and re-fetches all data dynamically, even if the page is statically-built.
## Fetch Post Data With The `$preview` Helper
In `[id].vue`, access the new `$preview` helper and re-fetch data if `$preview` is true:
```vue
<script setup>
const { $directus, $readItem } = useNuxtApp(); // [!code --]
const { $directus, $readItem, $preview } = useNuxtApp(); // [!code ++]
const route = useRoute();
if ($preview) { // [!code ++]
const post = await useAsyncData('post', () => { // [!code ++]
return $directus.request($readItem('posts', route.params.id)) // [!code ++]
}); // [!code ++]
} // [!code ++]
const post = await useAsyncData('post', () => {
return $directus.request($readItem('posts', route.params.id))
});
if (!post.value) throw createError({
statusCode: 404,
statusMessage: 'Post Not Found'
});
</script>
```
## Preview Content in Directus
In an item page, toggle "Enable Preview" at the top of the page. Whenever you create or edit an item in your collection
and “click” save, you should see a live preview of the item on the right-hand side of the screen.
<video title="Enable Preview Mode in Directus" autoplay playsinline muted loop controls>
<source src="/docs/img/088b8fa3-da4d-48ae-bb2d-a4df5b875c56.mp4" type="video/mp4" />
</video>
Clicking on the "Dimensions Display" icon also lets you preview your content on desktop and mobile screens.
## Next Steps
Through this guide, you have successfully set up the live preview feature in Directus for your Nuxt 3 project.
Share the preview URL with your team members, stakeholders, or clients to allow them to see how content changes would
look.