How to properly install story-json-to-amp via npm in a VUEjs project?

Question

JSON

Good day to all! Here is the essence of the problem:
I go through the console to the project folder and write
npm i story-json-to-amp
After I add it to main.js

import story from './story.json';
import storyJsonToAmp from 'story-json-to-amp';
 
const ampHtml = storyJsonToAmp(story);

Then I stomp into the component I need and call story.json (the code from the example on this site )

<amp-story standalone
  title="Stories in AMP - Hello World"
  publisher="AMP Project"
  publisher-logo-src="https://amp.dev/favicons/coast-228x228.png"
  poster-portrait-src="https://amp.dev/static/samples/img/story_dog2_portrait.jpg"
  poster-square-src="https://amp.dev/static/samples/img/story_dog2_square.jpg"
  poster-landscape-src="https://amp.dev/static/samples/img/story_dog2_landscape.jpg">
<amp-story-page id="page-1">
  <amp-story-grid-layer template="fill">
    <amp-img src="https://amp.dev/static/samples/img/story_dog2.jpg"
      width="720"
      height="1280"
      layout="responsive">
    </amp-img>
  </amp-story-grid-layer>
  <amp-story-grid-layer template="vertical">
    <h1>Hello World</h1>
    <p>This is an AMP Story.</p>
  </amp-story-grid-layer>
</amp-story-page>
<amp-story-page id="page-2">
  <amp-story-grid-layer template="fill">
    <amp-video autoplay
      loop
      width="720"
      height="960"
      poster="https://amp.dev/static/samples/img/story_video_dog_cover.jpg"
      layout="responsive">
      <source src="https://amp.dev/samples/video/story_video_dog.mp4"
        type="video/mp4">
    </amp-video>
  </amp-story-grid-layer>
</amp-story-page>
<amp-story-page id="animation-demo">
  <amp-story-grid-layer template="fill">
    <amp-img src="https://amp.dev/static/samples/img/story_dog4.jpg"
      animate-in="fly-in-top"
      width="720"
      height="1280"
      layout="responsive">
    </amp-img>
  </amp-story-grid-layer>
  <amp-story-grid-layer template="thirds">
    <h2 animate-in="fly-in-bottom"
      grid-area="lower-third"
      animate-in-delay="0.4s">
      Best walk ever!
    </h2>
  </amp-story-grid-layer>
</amp-story-page>
<amp-story-page id="layout-demo">
  <amp-story-grid-layer template="thirds">
    <amp-img grid-area="upper-third"
      src="https://amp.dev/static/samples/img/story_thirds_1.jpg"
      width="560"
      height="420"
      layout="responsive">
    </amp-img>
    <amp-img grid-area="middle-third"
      src="https://amp.dev/static/samples/img/story_thirds_2.jpg"
      width="560"
      height="420"
      layout="responsive">
    </amp-img>
    <amp-img grid-area="lower-third"
      src="https://amp.dev/static/samples/img/story_thirds_3.jpg"
      width="560"
      height="420"
      layout="responsive">
    </amp-img>
  </amp-story-grid-layer>
</amp-story-page>

And he writes that such a component is not registered, tell me where I'm messing up?
Despite the fact that when I do this outside the wbpack project (static on html), everything works fine
. I would be grateful for any help!

Answer 1

writes that such component is not registered

Which is not surprising - custom tags are used, vue thinks that it needs to instantiate components, but there are no components.
Try to disable their compilation with v-pre or list them in ignoredElements .