@uniformdev/uniform-nuxt 16.0.1-nuxt.181 → 16.2.1-nuxt.249

package/README.md

@@ -1,5 +1,16 @@
 # Uniform Nuxt module
 
+- [Uniform Nuxt module](#uniform-nuxt-module)
+  - [Getting started](#getting-started)
+  - [Features](#features)
+  - [API reference](#api-reference)
+    - [Options](#options)
+    - [Injected in the Nuxt instance](#injected-in-the-nuxt-instance)
+    - [Components](#components)
+      - [\<Composition />](#composition-)
+      - [\<SlotContent />](#slotcontent-)
+  - [Examples](#examples)
+
 ## Getting started
 
 Install the peer dependencies of the module (if you haven't already):
@@ -11,22 +22,17 @@ Install the module
 npm i @uniformdev/uniform-nuxt
 ```
 
-Add the module to you Nuxt config:
+Add the module to your Nuxt config:
 
-```ts
+```js
 import { defineNuxtConfig } from 'nuxt';
 
 export default defineNuxtConfig({
-  transpile: ['@uniformdev/canvas-vue', '@uniformdev/context-vue'],
-  modules: [
-    [
-      '@uniformdev/uniform-nuxt',
-      {
-        projectId: process.env.UNIFORM_PROJECT_ID,
-        readOnlyApiKey: process.env.UNIFORM_API_KEY,
-      },
-    ],
-  ],
+  modules: ['@uniformdev/uniform-nuxt'],
+  uniform: {
+    projectId: process.env.UNIFORM_PROJECT_ID,
+    readOnlyApiKey: process.env.UNIFORM_API_KEY,
+  }
 });
 ```
 
@@ -35,8 +41,8 @@ export default defineNuxtConfig({
 - Auto-registers the needed Uniform components.
 - Creates a Canvas client automatically.
 - Creates a Uniform Context instance and provides it through the whole app, without the need of a wrapping component.
-- Provides a handy `$useComposition` composable, build on top of Nuxt's [useAsyncData](https://v3.nuxtjs.org/api/composables/use-async-data).
-- Handle Live Preview.
+- Provides a handy `$useComposition` composable, built on top of Nuxt's [useAsyncData](https://v3.nuxtjs.org/api/composables/use-async-data).
+- Handles Live Preview.
 - Watches query string change, which Nuxt doesn't do by default.
 
 ## API reference
@@ -50,7 +56,12 @@ These are the option you pass to the module in `nuxt.config.ts`.
 | `readOnlyApiKey`* |  string | An API key that has read permissions to your Uniform project. ⚠️ Make sure the API key has only read access, because it's used in Nuxt's public runtime config |
 | `manifest` |  ManifestV2 | The Uniform Context manifest. This one is usually fetched right before the app is started using Uniform's CLI. Uniform Context won't be enabled if a manifest is missing. |
 | `outputType` | 'standard' \| 'edge' | Set it to 'edge' when building the app for the edge using [NESI technology](https://docs.uniform.app/context/reference/netlify). Defaults to 'standard' |
-| `apiHost` | string | The host to be used when calling the API. Defaults to 'https://uniform.app' |
+| `apiHost` | string | The host to be used when calling the API. Defaults to `https://uniform.app` |
+| `defaultConsent` | boolean | Sets the default value of the user consent. Defaults to `false` |
+| `enableContextDevTools` | boolean | Enables the [Context DevTools](https://docs.uniform.app/context/getting-started/browser-extension) plugin. Defaults to `true` |
+| `uniformContextPath` | string | The path to a file that exports a Unifrom Context instance as default.<br>This will override the values of `manifest`, `defaultConsent` and `enableContextDevTools`. Useful for advanced use cases (such us using plugins other than the Context DevTools one). |
+
+
 \* Required
 
 ### Injected in the Nuxt instance
@@ -58,38 +69,38 @@ These are the properties that the module injects in the Nuxt app instance, so yo
 
 | Property | Type | Description |
 |---|---|---|
-| `$useComposition` |  function | A compasable that you can use to fetch a Canvas composition. It's preview-aware, it will automatically fetch the draft composition if the app is in preview mode, otherwise it will return the published one. It uses Suspense under the hood, so you can have access to the error and pending states of the request |
-| `$useUniformContext` |  function | A compasable that returns the current Uniform Context instance which allows you interact with the context such updating the scores and so on. It also returns other provided properties such as `outputType` |
+| `$useComposition` |  function | A Vue composable that you can use to fetch a Canvas composition. It's preview-aware, it will automatically fetch the draft composition if the app is in preview mode, otherwise it will return the published one. It uses Suspense under the hood, so you can have access to the error and pending states of the request |
+| `$useUniformContext` |  function | A Vue composable that returns the current Uniform Context instance which allows you interact with the context such updating the scores and so on. It also returns other provided properties such as `outputType` |
 | `$preview` |  object \| undefined | This object is only defined in preview mode, so you can use it to adjust your app if it's in preview mode. It contains the slug of the current composition. |
 | `$uniformCanvasClient` |  CanvasClient | Returns the Canvas client which you can use to fetch or update compositions. For composition fetching, it's recommended to use `$useComposition` instead. |
-| `uniformCanvasClient` |  CanvasClient | Returns the Canvas client which you can use to fetch or update compositions. For composition fetching, it's recommended to use `$useComposition` instead. |
+
 
 ### Components
 These are the components that the module auto registers for you, so you can use them without import.
 
-#### <Composition />
+#### \<Composition />
 This component wraps the whole composition, it 
 
 | Prop | Type | Description |
 |---|---|---|
 | `data`* |  string | The data of the composition to be rendered, this is usually the `composition` object that you get from `$useComposition` |
-| `resolveRenderer` |  function | This function is responsible of mapping Canvas components to Vue components. It takes a ComponentInstance object and should return a Vue component (usually based on the component `type`). If no resolver is provided, it will try to resolve the componnet in on the global context of the app, so if you have globally defined components, it will try to map them based on the `name` of the Vue component and the `type` of Canvas component|
+| `resolveRenderer` |  function | This function is responsible of mapping Canvas components to Vue components. It takes a `ComponentInstance` object and should return a Vue component (usually based on the component `type`). If no resolver is provided, it will try to resolve the component on the global context of the app, so if you have globally defined components, it will try to map them based on the `name` of the Vue component and the `type` of the Canvas component.|
 
-* Required
+\* Required
 
-#### <SlotContent />
+#### \<SlotContent />
 This component is used to render the slots of a composition, and it can be only used inside a `<Composition />`.
 You can nest `<SlotContent />` inside each other if you have nested slots.
 
 | Prop | Type | Description |
 |---|---|---|
-| `name` |  string | The name of the Canvas slot to render. If no name is provided, all the slots will be rendered. This is not recommended as the order is not guaranteed |
+| `name` |  string | The name of the Canvas slot to render.<br>If no value is provided, all the slots will be rendered (this is not recommended as the order of the rendered slots is not guaranteed). |
 
-## Example
+## Examples
 
 Here are some example where the module is used:
 - https://github.com/uniformdev/uniformconf-nuxt
-- https://github.com/uniformdev/nuxt-canvas-nuxt
+- https://github.com/uniformdev/nuxt-canvas-context-helloworld
 
 
 

package/dist/module.d.ts

@@ -2,13 +2,33 @@ import * as _nuxt_schema from '@nuxt/schema';
 import { ManifestV2 } from '@uniformdev/context';
 
 interface UniformModuleOptions {
+    /** The ID of the Uniform project you want to use in your app. */
     projectId: string;
+    /** An API key that has read permissions to your Uniform project. ⚠️ Make sure the API key has only read access, because it's used in Nuxt's public runtime config */
     readOnlyApiKey: string;
+    /**
+     * The host to be used when calling the API.
+     * @default 'https://uniform.app'
+     */
     apiHost?: string;
+    /** The Uniform Context manifest. This one is usually fetched right before the app is started using Uniform's CLI. Uniform Context won't be enabled if a manifest is missing. */
     manifest?: ManifestV2;
+    /**
+     * Set it to 'edge' when building the app for the edge using [NESI technology](https://docs.uniform.app/context/reference/netlify)
+     * @default 'standard'
+     */
     outputType?: string;
+    /** The path to a file that exports a Unifrom Context instance as default.<br>This will override the values of `manifest`, `defaultConsent` and `enableContextDevTools`. Useful for advanced use cases (such us using plugins other than the Context DevTools one). */
     uniformContextPath?: string;
+    /**
+     * Sets the default value of the user consent.
+     * @default false
+     */
     defaultConsent?: boolean;
+    /**
+     * Enables the [Context DevTools](https://docs.uniform.app/context/getting-started/browser-extension) plugin.
+     * @default true
+     */
     enableContextDevTools?: boolean;
 }
 declare const _default: _nuxt_schema.NuxtModule<UniformModuleOptions>;

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "nuxt-uniform",
   "configKey": "uniform",
-  "version": "16.0.1-nuxt.181+d2c9a0bbf"
+  "version": "16.2.1-nuxt.249+6d2287689"
 }

package/dist/module.mjs

@@ -19,6 +19,7 @@ const module = defineNuxtModule({
     enableContextDevTools: true
   },
   setup(options, nuxt) {
+    options.apiHost;
     if (!options.projectId || !options.readOnlyApiKey) {
       throw new Error("uniform-nuxt: The module options 'projectId' and 'readOnlyApiKey' are required");
     }

package/dist/runtime/plugin.mjs

@@ -1,6 +1,7 @@
 import {
   defineNuxtPlugin,
   useRoute,
+  useRouter,
   useRuntimeConfig,
   useHead,
   refreshNuxtData,
@@ -17,6 +18,7 @@ import {
 } from "@uniformdev/canvas";
 import {
   Context,
+  SERVER_STATE_ID,
   CookieTransitionDataStore,
   enableContextDevTools,
   UNIFORM_DEFAULT_COOKIE_NAME
@@ -24,7 +26,8 @@ import {
 import { Composition, SlotContent, useCompositionEventEffect } from "@uniformdev/canvas-vue";
 import {
   provideUniformContext,
-  onRouteChange
+  onRouteChange,
+  useUniformContext
 } from "@uniformdev/context-vue";
 export default defineNuxtPlugin((nuxtApp) => {
   if (nuxtApp.$uniformIsSetup) {
@@ -40,6 +43,7 @@ export default defineNuxtPlugin((nuxtApp) => {
     return {
       provide: {
         uniformIsSetup: true,
+        useUniformContext,
         preview,
         uniformCanvasClient,
         uniformContext: uniformContextData.context,
@@ -47,7 +51,7 @@ export default defineNuxtPlugin((nuxtApp) => {
       }
     };
   } catch (e) {
-    console.log("uniform-nuxt: An error occurred while initializing the Uniform plugin", e);
+    console.error("uniform-nuxt: An error occurred while initializing the Uniform plugin", e);
   }
 });
 function setupContext(nuxtApp) {
@@ -74,10 +78,23 @@ function setupContext(nuxtApp) {
     outputType: options.outputType,
     vueAppInstance: nuxtApp.vueApp
   });
+  if (uniformContext && typeof window === "undefined") {
+    const transferState = uniformContext.getServerToClientTransitionState();
+    useHead({
+      script: [
+        {
+          children: JSON.stringify(transferState),
+          id: SERVER_STATE_ID,
+          type: "application/json"
+        }
+      ]
+    });
+  }
   const route = useRoute();
-  watch(() => JSON.stringify(route.query), () => {
-    if (uniformContext)
+  watch(route, () => {
+    if (uniformContext) {
       onRouteChange(uniformContext);
+    }
   });
   return { context: uniformContext, outputType: options.outputType };
 }
@@ -93,14 +110,26 @@ function setupCanvas(nuxtApp) {
   return uniformCanvasClient;
 }
 function setupPreview() {
+  const router = useRouter();
   const route = useRoute();
   let preview;
   if (route.query.preview === "true") {
     console.log("uniform-nuxt: \u{1F575}\uFE0F Entering preview mode");
     preview = {
-      slug: route.query.slug
+      slug: route.query.slug,
+      compositionId: route.query.id
     };
   }
+  router.beforeEach((to, from, next) => {
+    if (from.query.preview === "true" && to.query.preview !== "true") {
+      return next({
+        path: to.path,
+        hash: to.hash,
+        query: { ...to.query, preview: "true" }
+      });
+    }
+    return next();
+  });
   return preview;
 }
 function setupLivePreview(currentCompositionId, isPreview = false) {
@@ -121,11 +150,16 @@ function setupLivePreview(currentCompositionId, isPreview = false) {
 }
 function setupUseComposition(uniformCanvasClient, currentCompositionId, preview) {
   const useComposition = async (options) => {
-    const { data, pending, error } = await useAsyncData(`composition-${options.slug || options.compositionId}`, async () => await uniformCanvasClient[options.slug ? "getCompositionBySlug" : "getCompositionById"]({
-      state: preview ? CANVAS_DRAFT_STATE : CANVAS_PUBLISHED_STATE,
-      ...options
-    }));
-    currentCompositionId.value = data.value?.composition._id;
+    const slug = preview?.slug ?? options.slug;
+    const compositionId = preview?.compositionId ?? options.compositionId;
+    const state = preview ? CANVAS_DRAFT_STATE : CANVAS_PUBLISHED_STATE;
+    const { data, pending, error } = await useAsyncData(`composition-${slug || compositionId}`, async () => {
+      if (slug) {
+        return await uniformCanvasClient.getCompositionBySlug({ slug, state });
+      }
+      return await uniformCanvasClient.getCompositionById({ compositionId, state });
+    });
+    currentCompositionId.value = data.value?.composition._id ?? "";
     return { data, pending, error };
   };
   return useComposition;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/uniform-nuxt",
-  "version": "16.0.1-nuxt.181+d2c9a0bbf",
+  "version": "16.2.1-nuxt.249+6d2287689",
   "license": "MIT",
   "type": "module",
   "exports": {
@@ -16,11 +16,14 @@
   ],
   "scripts": {
     "prepack": "nuxt-module-build",
-    "build": "nuxt-module-build"
+    "build": "nuxt-module-build",
+    "clean": "rimraf dist",
+    "lint": "eslint \"src/**/*.{js,ts,tsx}\"",
+    "format": "prettier --write \"src/**/*.{js,ts,tsx}\""
   },
   "dependencies": {
     "@nuxt/kit": "^3.0.0-rc.4",
-    "vue-demi": "^0.12.5"
+    "vue-demi": "^0.13.0"
   },
   "peerDependencies": {
     "@uniformdev/canvas": ">15",
@@ -30,19 +33,20 @@
   },
   "devDependencies": {
     "@nuxt/module-builder": "0.1.7",
-    "@nuxt/schema": "3.0.0-rc.4",
+    "@nuxt/schema": "3.0.0-rc.5",
     "@nuxtjs/eslint-config-typescript": "10.0.0",
-    "@uniformdev/canvas": "^16.0.1-nuxt.181+d2c9a0bbf",
-    "@uniformdev/canvas-vue": "^16.0.1-nuxt.181+d2c9a0bbf",
-    "@uniformdev/context": "^16.0.1-nuxt.181+d2c9a0bbf",
-    "@uniformdev/context-vue": "^16.0.1-nuxt.181+d2c9a0bbf",
+    "@uniformdev/canvas": "^16.2.1-nuxt.249+6d2287689",
+    "@uniformdev/canvas-vue": "^16.2.1-nuxt.249+6d2287689",
+    "@uniformdev/context": "^16.2.1-nuxt.249+6d2287689",
+    "@uniformdev/context-vue": "^16.2.1-nuxt.249+6d2287689",
     "esbuild": "0.13.15",
     "eslint": "latest",
-    "nuxt": "^3.0.0-rc.4",
-    "vue": "3.2.37"
+    "nuxt": "3.0.0-rc.5",
+    "vue": "3.2.37",
+    "vue-router": "3.5.4"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "d2c9a0bbf7c8a640213fee2f6eae7c1cfdd08b02"
+  "gitHead": "6d2287689097cb256d17483ea3726d4bb87b2fa6"
 }