activate-classification-nuxt3-complete
This section gets you to activating classification as quickly as possible. It does not explain each line of code.
Open a terminal window in the root of the repository.
Enter the following command:
npm install @uniformdev/canvas @uniformdev/canvas-vue @uniformdev/context @uniformdev/context-vue @uniformdev/uniform-nuxt
Enter the following command:
npm install -D @uniformdev/cli npm-run-all
About this stepThis 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.
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 stepThis 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.
Enter the following command:
npm run download:manifest
About this stepThis 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.Edit the following file:
/nuxt.config.tsimport { 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,
},
});