Skip to main content

add-canvas-nuxt3-steps

tip

This section guides you through the process of activating canvas by explaining each step. It takes longer to go through, but it will help you understand why each line of code is needed.

  1. Edit the following file:

    /nuxt.config.ts
    import { defineNuxtConfig } from "nuxt";

    // https://v3.nuxtjs.org/api/configuration/nuxt.config
    export default defineNuxtConfig({
    css: ["~/styles/globals.css", "~/styles/page.css"],
    modules: ["@uniformdev/uniform-nuxt"],
    });
    About this step

    This adds the Uniform module, which brings Uniform functionality to Nuxt.

  2. Edit the following file:

    /nuxt.config.ts
    import { defineNuxtConfig } from "nuxt";

    // 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,
    },
    });
    About this step

    This sets the values the Uniform modules uses to connect to Uniform. You set the project ID and API key values as environment variables in a previous step. The API host value is optional, and is used when you want to use an alternate endpoint for the Uniform API.

  3. 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,
    },
    });
    About this step

    The Nuxt module for Uniform requires a manifest be set in order to pass validation checks within the Nuxt module. This sets a manifest in order to meet this requirement.

  4. 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,
    },
    });
    About this step

    The Nuxt module for Uniform requires a manifest be set in order to pass validation checks within the Nuxt module. This sets a manifest in order to meet this requirement.

  5. Edit the following file:

    /pages/index.vue
    <script lang="ts" setup>
    import content from "../content/content.json";

    const slug = "/";
    const topic = content.find((e) => e.url == slug);

    const { $useComposition } = useNuxtApp();
    const { data: compositionData } = await $useComposition({ slug });
    </script>

    <template>
    <Layout :content="content" :fields="topic.fields" />
    </template>
    About this step

    This uses the Uniform module to retrieve the composition using the specified slug.

  6. Edit the following file:

    /pages/index.vue
    <script lang="ts" setup>
    import content from "../content/content.json";
    import doEnhance from "../lib/enhancer";

    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>
    <Layout :content="content" :fields="topic.fields" />
    </template>
    About this step

    This applies the enhancer to the composition.

  7. 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";

    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"
    >
    <Layout :content="content" :fields="topic.fields" />
    </Composition>
    </template>
    About this step

    In Canvas you added a component to a slot in a composition. The front-end application must determine which front-end component to use to render the Canvas component. The component you add in this step makes this decision.

  8. 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 adds the layout component you created earlier.