Skip to main content

activate-classification-nuxt3-steps

tip

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

  1. Open a terminal window in the root of the repository.

  2. Enter the following command:

    npm install @uniformdev/canvas @uniformdev/canvas-vue @uniformdev/context @uniformdev/context-vue @uniformdev/uniform-nuxt
    About this step

    Even though you are not using Uniform Canvas in this tutorial, you still must add references to these packages. The Nuxt module has dependencies on these packages.

  3. Enter the following command:

    npm install -D @uniformdev/cli npm-run-all
    About this step

    This adds a reference to the package with the Uniform CLI, which is a tool that enables you to interact with Uniform from a command-line interface. This is needed in order to download the Uniform context manifest, which provides the instructions that power the classification process.

  4. Edit the following file:

    /package.json
    {
    "name": "my-uniform-app",
    "version": "0.1.0",
    "private": true,
    "scripts": {
    "dev": "run-s download:manifest nuxt:dev",
    "nuxt:dev": "nuxt dev",
    "build": "run-s download:manifest nuxt:build",
    "nuxt:build": "nuxt build",
    "download:manifest": "uniform context manifest download --output ./contextManifest.json",
    ...
    About this step

    This adds a step to the Nuxt 3 dev and build processes to download the context manifest from Uniform. This manifest includes information that tells Uniform how to classify visitors. Since the app doesn't make a call back to Uniform at runtime, this information is needed at build-time. All the details the app needs are provided at build-time.

  5. Enter the following command:

    npm run download:manifest
    About this step

    This command downloads the manifest immediately. The change you made previously configured the dev script so it downloads the manifest before the web app is started, but that only takes effect the next time you start the web app. The following steps expect the manifest has already been downloaded. This means you have two options: download the manifest manually, or restart the web app.

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

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

    The Nuxt module for Uniform requires these settings. The only one that is actually used in the manifest, but the others are needed in order to pass validation checks within the Nuxt module.

  8. Edit the following file:

    /nuxt.config.ts
    import { defineNuxtConfig } from "nuxt";
    import { ManifestV2 } from "@uniformdev/context";
    import manifest from "./contextManifest.json";

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

    This makes the manifest that you downloaded earlier available to the Nuxt module.