@storyblok/nuxt 5.5.2 → 5.6.0

package/.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+indent_size = 2
+indent_style = space
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

package/.eslintignore

@@ -0,0 +1,3 @@
+dist
+node_modules
+playground-e2e

package/.eslintrc

@@ -0,0 +1,7 @@
+{
+  "root": true,
+  "extends": ["@nuxt/eslint-config"],
+  "rules": {
+    "vue/multi-word-component-names": "off"
+  }
+}

package/.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1 @@
+blank_issues_enabled: false

package/.github/ISSUE_TEMPLATE/issue.bug.yml

@@ -0,0 +1,68 @@
+name: "\U0001F41E SDK Bug Report"
+description: Report an issue using Nuxt 3 Storyblok SDK
+labels: [pending-triage, pending-author]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        You're now going to fill out a bug report at the Nuxt 3 Storyblok SDK. Thanks a lot for taking the time and let's make Storyblok open source projects better together!
+  - type: textarea
+    id: bug-description
+    attributes:
+      label: Describe the issue you're facing
+      description: A clear and concise description of what the bug is. If you intend to submit a PR for this issue, tell us in the description so we can review it. Thanks in advance!
+      placeholder: My Nuxt 3 Storyblok SDK configuration is ... ## Expected behavior ... ## Current Behavior ...
+    validations:
+      required: true
+  - type: input
+    id: reproduction
+    attributes:
+      label: Reproduction
+      description: Please provide a link to a repo or Stackblitz that can reproduce the issue you ran into. A minimal reproduction is required, if a report is vague or has no reproduction, it will receive a "need reproduction" label.
+      placeholder: Reproduction URL
+    validations:
+      required: true
+  - type: textarea
+    id: reproduction-steps
+    attributes:
+      label: Steps to reproduce
+      description: Please provide any reproduction steps that may need to be described.
+      placeholder: List the commands or configuration you set when you faced the error, and describe with process you follow to get the error.
+  - type: textarea
+    id: system-info
+    attributes:
+      label: System Info
+      description: Output of `npx envinfo --system --npmPackages '{ nuxt, @storyblok/*}' --binaries --browsers`
+      render: shell
+      placeholder: System, Binaries, Browsers, Nuxt 3 & Storyblok SDK version
+    validations:
+      required: true
+  - type: dropdown
+    id: package-manager
+    attributes:
+      label: Used Package Manager
+      description: Select the used package manager
+      options:
+        - npm
+        - yarn
+        - pnpm
+    validations:
+      required: true
+  - type: textarea
+    id: logs
+    attributes:
+      label: Error logs (Optional)
+      description: |
+        Optional if provided reproduction. Please copy and paste the log text.
+  - type: checkboxes
+    id: checkboxes
+    attributes:
+      label: Validations
+      description: Before submitting the issue, please make sure you do the following
+      options:
+        - label: Follow our [Code of Conduct](https://www.storyblok.com/trust-center#code-of-conduct?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-js-client)
+          required: true
+  - type: markdown
+    attributes:
+      value: |
+        > This template was inspired by the [Vite issue template](https://github.com/vitejs/vite/blob/main/.github/ISSUE_TEMPLATE/bug_report.yml)

package/.github/ISSUE_TEMPLATE/issue.fr.yml

@@ -0,0 +1,40 @@
+name: "\U0001F58C SDK Feature Request"
+description: Propose a feature or improvement that the Storyblok SDK should have
+labels: [enhancement, pending-triage, pending-author]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thanks for helping us improve the Storyblok open source project, you rock!
+  - type: textarea
+    id: feature-description
+    attributes:
+      label: Description
+      description: "Clear and concise description of what you want to include or enhance from the SDK. Please make the reason and usecases as detailed as possible. If you intend to submit a PR for this feature request, tell us in the description so we can review and be aware of it. Thanks in advance!"
+      placeholder: As a developer using Storyblok SDK I want [wish] so that [benefit].
+    validations:
+      required: true
+  - type: textarea
+    id: suggested-solution
+    attributes:
+      label: Suggested solution or improvement
+      description: "Link to the PR or what implementation you will expect from us (links to external examples if needed)."
+    validations:
+      required: true
+  - type: textarea
+    id: additional-context
+    attributes:
+      label: Additional context
+      description: Any other context or screenshots about the feature request here.
+  - type: checkboxes
+    id: checkboxes
+    attributes:
+      label: Validations
+      description: Before submitting the feature request, please make sure you do the following
+      options:
+        - label: Follow our [Code of Conduct](https://www.storyblok.com/trust-center#code-of-conduct?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-js-client)
+          required: true
+  - type: markdown
+    attributes:
+      value: |
+        > This template was inspired by the [Vite FR template](https://github.com/vitejs/vite/blob/main/.github/ISSUE_TEMPLATE/feature_request.yml)

package/.github/dependabot.yml

@@ -0,0 +1,11 @@
+version: 2
+updates:
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "daily"
+      time: "05:00"
+    commit-message:
+      prefix: fix
+      prefix-development: chore
+      include: scope

package/.github/workflows/dependabot-automerge.yml

@@ -0,0 +1,28 @@
+# **** AUTOMERGE ****
+# Merge automatically the PR that contain a minor or patch update on the dependency you define in env.DEPENDENCY
+#  - Inspiration: https://docs.github.com/en/code-security/supply-chain-security/keeping-your-dependencies-updated-automatically/automating-dependabot-with-github-actions#enable-auto-merge-on-a-pull-request
+
+name: Dependabot auto-merge
+on: pull_request
+
+permissions:
+  pull-requests: write
+  contents: write
+
+jobs:
+  dependabot:
+    runs-on: ubuntu-latest
+    if: ${{ github.actor == 'dependabot[bot]' }}
+    steps:
+      - name: Dependabot metadata
+        id: metadata
+        uses: dependabot/fetch-metadata@v1.1.1
+        with:
+          github-token: "${{ secrets.GITHUB_TOKEN }}"
+      - name: Enable auto-merge for Dependabot PRs
+        if: ${{contains(steps.metadata.outputs.dependency-names, env.DEPENDENCY) && (steps.metadata.outputs.update-type == 'version-update:semver-patch' || steps.metadata.outputs.update-type == 'version-update:semver-minor')}}
+        run: gh pr merge --auto --merge "$PR_URL"
+        env:
+          DEPENDENCY: "@storyblok/vue"
+          PR_URL: ${{github.event.pull_request.html_url}}
+          GITHUB_TOKEN: ${{secrets.DEPENDABOT_TOKEN}}

package/.github/workflows/release.yml

@@ -0,0 +1,30 @@
+name: Release CI
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: "18"
+          cache: "npm"
+      - name: Install dependencies
+        run: npm ci && cd playground && npm ci && cd ..
+      - name: Build lib
+        run: npm run build
+      - name: Cypress run
+        run: npm run test:e2e
+      - name: Release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+        run: npx semantic-release

package/.husky/commit-msg

@@ -0,0 +1,6 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx --no -- commitlint --edit "$1"
+# npx --no-install commitlint --edit
+

package/.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged

package/.nuxtrc

@@ -0,0 +1 @@
+typescript.includeWorkspace=true

package/.prettierignore

@@ -0,0 +1 @@
+**/templates/plugin.js

package/README.md

@@ -168,7 +168,7 @@ To link your Vue components to the equivalent one in your Storyblok space:
 
   > Take into account that if you name a component inside the `storyblok` folder the same as another in the `components` folder, it won't work properly. Tip: Keep the components in your Nuxt project with different names.
 
-- For each components, use the `v-editable` directive on its root element, passing the `blok` property that they receive:
+- For each component, use the `v-editable` directive on its root element, passing the `blok` property that they receive:
 
 ```html
 <div v-editable="blok" / >
@@ -186,13 +186,26 @@ To link your Vue components to the equivalent one in your Storyblok space:
 
 #### Composition API
 
-The simplest way is by using the `useAsyncStoryblok` one-liner composable (it's autoimported) and passing as a first parameter a name of your content page from Storyblok (in this case, our content page name is `vue`, by default you get a content page named `home`):
+The simplest way is by using the `useAsyncStoryblok` one-liner composable (it's autoimported). Where you need to pass as first parameter the `slug`, while the second and third parameters, `apiOptions` and `bridgeOptions` respectively, are optional.
+
+Check the available [apiOptions](https://www.storyblok.com/docs/api/content-delivery/v2#core-resources/stories/retrieve-one-story?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-nuxt) in our API docs and [bridgeOptions](https://www.storyblok.com/docs/Guides/storyblok-latest-js?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-nuxt) passed to the Storyblok Bridge.
 
 > If you want to know more about versioning `{ version: "draft" /* or "publish" */ }` then go to the section [Working with preview and/or production environments](#3-working-with-preview-andor-production-environments)
 
 ```html
 <script setup>
-  const story = await useAsyncStoryblok("vue", { version: "draft" });
+  const story = await useAsyncStoryblok(
+    "vue",
+    { version: "draft", resolve_relations: "Article.author" }, // API Options
+    { resolveRelations: ["Article.author"], resolveLinks: "url" } // Bridge Options
+  );
+
+  if (story.value.status) {
+    throw createError({
+      statusCode: story.value.status,
+      statusMessage: story.value.response
+    });
+  }
 </script>
 
 <template>
@@ -200,22 +213,27 @@ The simplest way is by using the `useAsyncStoryblok` one-liner composable (it's
 </template>
 ```
 
-Which is the short-hand equivalent to using `useStoryblokApi` inside `useAsyncData` and `useStoryblokBridge` functions separately:
+Which is the short-hand equivalent to using `useStoryblokApi` inside `useState` and `useStoryblokBridge` functions separately:
 
 ```html
 <script setup>
-  const story = ref(null);
+  const story = useState();
   const storyblokApi = useStoryblokApi();
-  const { data } = await useAsyncData(
-    'vue',
-    async () => await storyblokApi.get(`cdn/stories/vue`, {
-    version: "draft"
-  })
+
+  const { data } = await storyblokApiInstance.get(
+    `cdn/stories/vue`,
+    {
+      version: "draft"
+    }
   );
-  story.value = data.value.data.story;
+  story.value = data.story;
 
   onMounted(() => {
-    useStoryblokBridge(story.value.id, (evStory) => (story.value = evStory));
+    useStoryblokBridge(
+      story.value.id,
+      (evStory) => (story.value = evStory),
+      { resolveRelations: ["Article.author"], resolveLinks: "url" } // Bridge Options
+    );
   });
 </script>
 
@@ -224,7 +242,7 @@ Which is the short-hand equivalent to using `useStoryblokApi` inside `useAsyncDa
 </template>
 ```
 
-> Using `useAsyncData` SSR and SSG capabilities are enabled.
+> `useState` is an SSR-friendly `ref` replacement. Its value will be preserved after server-side rendering (during client-side hydration).
 
 #### Rendering Rich Text
 
@@ -285,15 +303,15 @@ Check the official docs on how to [access different content versions](https://ww
 
 #### useAsyncStoryblok(slug, apiOptions, bridgeOptions)
 
-(Recommended Option) Use [`useAsyncData`](https://v3.nuxtjs.org/api/composables/use-async-data/) and [`useState`](https://v3.nuxtjs.org/api/composables/use-state) under the hood for generating SSR or SSG applications.
+(Recommended Option) Uses [`useState`](https://v3.nuxtjs.org/api/composables/use-state) under the hood to help with SSR compatibility.
 
-Check the available [apiOptions](https://github.com/storyblok/storyblok-js-client#class-storyblok) (passed to `storyblok-js-client`) and [bridgeOptions](https://www.storyblok.com/docs/Guides/storyblok-latest-js?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-nuxt) (passed to the Storyblok Bridge).
+Check the available [apiOptions](https://www.storyblok.com/docs/api/content-delivery/v2#core-resources/stories/retrieve-one-story?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-nuxt) (passed to `storyblok-js-client`) and [bridgeOptions](https://www.storyblok.com/docs/Guides/storyblok-latest-js?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-nuxt) (passed to the Storyblok Bridge).
 
 #### useStoryblok(slug, apiOptions, bridgeOptions)
 
-It could be helpful to use `useStoryblok` instead of `useAsyncStoryblok` when we need to make client-side requests, for example, getting personalized data for a logged user.
+It could be helpful to use `useStoryblok` instead of `useAsyncStoryblok` when we need to make full client-side requests, for example, getting personalized data for a logged user.
 
-Check the available [apiOptions](https://github.com/storyblok/storyblok-js-client#class-storyblok) (passed to `storyblok-js-client`) and [bridgeOptions](https://www.storyblok.com/docs/Guides/storyblok-latest-js?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-nuxt) (passed to the Storyblok Bridge).
+Check the available [apiOptions](https://www.storyblok.com/docs/api/content-delivery/v2#core-resources/stories/retrieve-one-story?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-nuxt) (passed to `storyblok-js-client`) and [bridgeOptions](https://www.storyblok.com/docs/Guides/storyblok-latest-js?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-nuxt) (passed to the Storyblok Bridge).
 
 #### useStoryblokApi()
 

package/cypress/.eslintrc

@@ -0,0 +1,3 @@
+{
+  "extends": ["plugin:cypress/recommended"]
+}

package/cypress/e2e/index.cy.ts

@@ -0,0 +1,34 @@
+describe("@storyblok/nuxt", () => {
+  describe("Composition API", () => {
+    beforeEach(() => {
+      // cy.intercept("https://api.storyblok.com/**", {
+      //   fixture: "stories.json"
+      // }).as("getStories");
+      cy.visit("/vue/test");
+    });
+
+    it("should fetch and render stories", () => {
+      it("Renders the expected story when loading the components", () => {
+        cy.get("[data-test=page]").should("exist");
+        cy.get("[data-test=grid]").should("exist");
+        cy.get("[data-test=feature]").should("have.length", 2);
+        cy.get("[data-test=teaser]").should("exist").and("have.text", "hello");
+      });
+    });
+  });
+
+  describe("Composition API - Long form", () => {
+    beforeEach(() => {
+      cy.visit("/vue");
+    });
+
+    it("should fetch and render stories", () => {
+      it("Renders the expected story when loading the components", () => {
+        cy.get("[data-test=page]").should("exist");
+        cy.get("[data-test=grid]").should("exist");
+        cy.get("[data-test=feature]").should("have.length", 3);
+        cy.get("[data-test=teaser]").should("exist").and("have.text", "hello");
+      });
+    });
+  });
+});

package/cypress/fixtures/stories.json

@@ -0,0 +1,7 @@
+{
+  "stories": [
+    { "name": "a", "id": 0 },
+    { "name": "b", "id": 1 },
+    { "name": "c", "id": 2 }
+  ]
+}

package/cypress/support/commands.ts

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })

package/cypress/support/e2e.ts

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import "./commands";
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

package/cypress.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  e2e: {
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
+    baseUrl: "http://localhost:3000",
+    viewportWidth: 1600,
+    viewportHeight: 1400
+  }
+});

package/package.json

@@ -1,56 +1,100 @@
 {
   "name": "@storyblok/nuxt",
-  "version": "5.5.2",
+  "version": "5.6.0",
   "description": "Storyblok Nuxt module",
   "type": "module",
+  "main": "./dist/module.cjs",
+  "types": "./dist/types.d.ts",
   "exports": {
     ".": {
+      "types": "./dist/types.d.ts",
       "import": "./dist/module.mjs",
       "require": "./dist/module.cjs"
     }
   },
-  "main": "./dist/module.cjs",
-  "types": "./dist/types.d.ts",
-  "files": [
-    "dist"
-  ],
-  "repository": "https://github.com/storyblok/storyblok-nuxt",
   "scripts": {
-    "test": "npm run test:unit && npm run test:e2e",
-    "build": "nuxt-module-build && cp ../README.md ./",
-    "test:unit": "jest __tests__",
+    "prepack": "nuxt-module-build",
+    "build": "nuxt-module-build",
+    "dev": "nuxi dev playground",
+    "dev:build": "nuxi build playground",
+    "dev:preview": "nuxi preview playground",
+    "prepare:playground": "nuxi prepare playground",
+    "dev:prepare": "nuxt-module-build --stub && nuxi prepare playground",
+    "prepare": "husky install",
     "cy:open": "cypress open",
     "cy:run": "cypress run",
-    "playground:run": "cd ../playground && npm run start",
-    "pretest:e2e": "cd ../playground && npm run build",
-    "test:e2e": "start-server-and-test playground:run http://localhost:3000 cy:run",
-    "test:e2e-watch": "start-server-and-test playground:run http://localhost:3000 cy:open"
-  },
-  "dependencies": {
-    "@nuxt/kit": "^3.4.2",
-    "@storyblok/vue": "^7.1.11"
+    "test:e2e": "start-server-and-test dev http://localhost:3000 cy:run",
+    "test:e2e-watch": "start-server-and-test dev http://localhost:3000 cy:open",
+    "pretest:e2e-static": "nuxi generate playground",
+    "test:e2e-static": "start-server-and-test dev:preview http://localhost:3000 cy:run",
+    "lint": "eslint . --ext .js,.jsx,.ts,.tsx,.vue"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.6",
     "@cypress/vite-dev-server": "^5.0.5",
-    "@nuxt/module-builder": "latest",
-    "babel-jest": "^29.4.3",
-    "cypress": "^12.16.0",
+    "@nuxt/eslint-config": "^0.1.1",
+    "@nuxt/module-builder": "^0.4.0",
+    "@nuxt/schema": "^3.6.5",
+    "@nuxt/test-utils": "^3.6.5",
+    "@types/node": "^20.4.4",
+    "cypress": "^12.17.2",
+    "@commitlint/cli": "^17.6.7",
+    "@commitlint/config-conventional": "^17.6.7",
+    "@nuxtjs/eslint-config-typescript": "latest",
+    "eslint": "^8.45.0",
+    "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-cypress": "^2.13.3",
-    "jest": "^29.6.0",
-    "start-server-and-test": "^2.0.0",
-    "vite": "^4.3.9"
+    "eslint-plugin-vue": "^9.15.1",
+    "husky": "^8.0.3",
+    "lint-staged": "^13.2.3",
+    "nuxt": "^3.6.5",
+    "prettier": "^3.0.0",
+    "start-server-and-test": "^2.0.0"
+  },
+  "dependencies": {
+    "@nuxt/kit": "^3.6.5",
+    "@storyblok/vue": "^7.1.11",
+    "prettier": "^3.0.0"
+  },
+  "lint-staged": {
+    "*.{vue,js,css}": [
+      "prettier --write",
+      "eslint"
+    ],
+    "*.md": [
+      "prettier --write"
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "eslintConfig": {
+    "extends": [
+      "eslint:recommended",
+      "@nuxtjs/eslint-config-typescript",
+      "plugin:vue/vue3-recommended",
+      "prettier"
+    ],
+    "rules": {
+      "vue/multi-word-component-names": 1
+    }
+  },
+  "eslintIgnore": [
+    "**/templates/plugin.js",
+    "playground/app.vue"
+  ],
+  "prettier": {
+    "trailingComma": "none",
+    "tabWidth": 2,
+    "semi": true,
+    "singleQuote": false
   },
   "release": {
     "branches": [
       "main"
     ]
   },
-  "contributors": [
-    {
-      "name": "Alexander Feiglstorfer <delooks@gmail.com>"
-    }
-  ],
   "publishConfig": {
     "access": "public"
   }

package/playground/README.md

@@ -0,0 +1,63 @@
+# Nuxt 3 Minimal Starter
+
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm run dev
+
+# yarn
+yarn dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm run build
+
+# yarn
+yarn build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm run preview
+
+# yarn
+yarn preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

package/playground/app.vue

@@ -0,0 +1,3 @@
+<template>
+  <NuxtPage />
+</template>