Creating custom widget with Nuxt and netlify-cms-app

Support
, ,
1

Hello all!
site name: https://unrivaled-gelato-e3b6dd.netlify.app/
no build errors, compiles just fine.

I have a cms admin working with Nuxt/Vue and all was well but I want to add a custom widget to be able to add custom images with class names . I have done it in the past with Gatsby/React but there is really nothing using netlify-cms-app and Nuxt.js and Vue that I can find.

the error I get when I access the admin page using netlify-cms-app:

netlify-cms-app.js:28 Uncaught TypeError: Cannot read properties of undefined (reading 'createContext')
    at Module.<anonymous> (netlify-cms-app.js:28:10378)
    at n (netlify-cms-app.js:1:531)
    at Object.<anonymous> (netlify-cms-app.js:155:239894)
    at n (netlify-cms-app.js:1:531)
    at Object.<anonymous> (netlify-cms-app.js:28:38571)
    at n (netlify-cms-app.js:1:531)
    at Module.<anonymous> (netlify-cms-app.js:657:1170588)
    at n (netlify-cms-app.js:1:531)
    at netlify-cms-app.js:1:1330
    at netlify-cms-app.js:1:1342

I created a cms folder with a cms.js inside and referenced a remote source for netlify-cms-app in the admin index page (just included the src ref here not the whole code for brevity):

 <body>
    <!-- Include the script that builds the page and powers Netlify CMS -->
    <script src="https://unpkg.com/netlify-cms-app@2.15.72/dist/netlify-cms-app.js"></script>
  </body>

and my cms.js looks like this:

import CMS from 'netlify-cms-app';

CMS.registerEditorComponent({
  id: 'ImageResponsive',
  label: 'Image-Responsive',
  fields: [
    {
      name: 'title',
      label: 'Title',
      widget: 'string',
    },
    {
      name: 'src',
      label: 'Image Src',
      widget: 'image',
    },
    {
      name: 'class',
      label: 'CSS Class',
      widget: 'string',
    },
  ],
  pattern: /{{< img src="([a-zA-Z0-9-_ ]+)" title="([a-zA-Z0-9-_ ]+)" >}}/,
  fromBlock: function (match) {
    return {
      title: match[1],
      src: match[2],
    };
  },
  toBlock: function (obj) {
    return `<img src="${obj.src}" title="${obj.title}" class="${obj.class}" />`;
  },
  toPreview: function (obj) {
    return `<img><img src=${obj.src} alt=${obj.title}><figcaption>${obj.title}</figcaption></img>`;
  },
});

Is this even possible with Nuxt and Vue?

2

Netlify no longer owns or provides support for CMS: Decap CMS | Open-Source Content Management System