add-canvas-nuxt3-complete

tip

This section gets you to activating canvas as quickly as possible. It does not explain each line of code.

1. Edit the following file:

   /nuxt.config.ts

   import { 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,
     },
   });

2. 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 { $useComposition } = useNuxtApp();
   const { data: compositionData } = await $useComposition({ slug });
   
   const composition = await doEnhance(compositionData.value.composition);
   </script>
   
   <template>
     <Composition
       v-if="composition"
       :data="composition"
       :resolve-renderer="resolveRenderer"
     >
       <LayoutCanvas :title="topic.fields.title" />
     </Composition>
   </template>
   About this step

   This is the completed page file.