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:

    /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.

  2. 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.

  3. 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.

  4. 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.