activate-classification-nuxt3-complete

tip

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

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

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