Skip to main content

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.