Override components with Nuxt not working

Support
#1

Hello,

I’m trying to override components with Nuxt (with v3.0.11 version of Snipcart) but I get these two warnings:

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

and

[Vue warn]: Unknown custom element: <billing> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Here is my integration in my default layout in Nuxt for now:

    <nuxt />
    <div
      id="snipcart"
      hidden
      data-api-key="XXXXXXXXXX"
      data-config-modal-style="side"
      data-templates-url="/snipcart-templates.html"
    >
      <billing section="bottom">
        <div class="root"></div>
      </billing>
      <payment section="top">
        <div class="root"></div>
      </payment>
    </div>

trying to follow the documentation here: https://docs.snipcart.com/v3/fr/configuration/personnalisation

I put the snipcart-templates.html file in my static folder.

Any help very much appreciated!

Regards,

David

#2

Okay, I saw this thread:
https://support.snipcart.com/t/localize-in-custom-components-gives-error-in-nuxt-project/610

and the codesandbox example is perfectly working for me :slight_smile:

1 Like