add-canvas-nuxt3-complete
tip
This section gets you to activating canvas as quickly as possible. It does not explain each line of code.
Edit the following file:
/nuxt.config.tsimport { defineNuxtConfig } from "nuxt";
import { ManifestV2 } from "@uniformdev/context";
// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
css: ["~/styles/globals.css", "~/styles/page.css"],
modules: ["@uniformdev/uniform-nuxt"],
uniform: {
projectId: process.env.UNIFORM_PROJECT_ID,
readOnlyApiKey: process.env.UNIFORM_API_KEY,
apiHost: process.env.UNIFORM_CLI_BASE_URL,
manifest: {} as ManifestV2,
defaultConsent: true,
},
});Edit the following file:
/pages/index.vue<script lang="ts" setup>
import content from "../content/content.json";
import doEnhance from "../lib/enhancer";
import resolveRenderer from "../lib/resolveRenderer";
import LayoutCanvas from "../components/LayoutCanvas.vue";
const slug = "/";
const topic = content.find((e) => e.url == slug);
const { composition } = await useUniformComposition({
slug,
enhance: async (c) => await doEnhance(c)
});
</script>
<template>
<UniformComposition
v-if="composition"
:data="composition"
:resolve-renderer="resolveRenderer"
>
<LayoutCanvas :title="topic.fields.title" />
</UniformComposition>
</template>About this stepThis is the completed page file.