10000 tabs menu doesn't render inside Nuxt.js on server-side · Issue #6140 · bootstrap-vue/bootstrap-vue · GitHub
[go: up one dir, main page]

Skip to content
tabs menu doesn't render inside Nuxt.js on server-side #6140
Closed
@rx-837

Description

@rx-837

Describe the bug

Tabs links doesn't render inside ul-element(nav menu) inside Nuxt.js app in "universal mode" on server-side.

Steps to reproduce the bug

  1. Go to https://w92v9.sse.codesandbox.io
  2. Open devpanel in your browser
  3. Go to Network -> Docs
  4. Press "F5" and click on doc response
  5. Response doesn't contain tab links in ul element(nav menu)

Expected behavior

Tabs render on server side as well on client side.

Versions

Libraries:

  • BootstrapVue: 2.20.1
  • Bootstrap: 4.#.# - unknown
  • Nuxt.js: 2.14.9
  • Vue: 2.#.# - unknown

Environment:

  • Device: doesn't matter
  • OS: doesn't matter
  • Browser: doesn't matter
  • Version: doesn't matter

Demo link

CodeSandbox

Additional context

Proof that tabs links doesn't render on server-side:

curl -s 'https://w92v9.sse.codesandbox.io/' | awk '/<body/,0'
  <body >
    <div data-server-rendered="true" id="__nuxt"><!----><!----><div id="__layout"><div class="container"><section data-v-2a183b29><div data-v-2a183b29><div data-v-2a183b29><div class="tabs" data-v-2a183b29><!----><div><ul role="tablist" class="nav nav-tabs"><!----><!----></ul></div><div class="tab-content"><div role="tabpanel" aria-hidden="false" class="tab-pane active" data-v-2a183b29> tab-content-1 </div> <div role="tabpanel" aria-hidden="true" class="tab-pane" style="display:none;" data-v-2a183b29> tab-content-2 </div><div class="tab-pane active"></div></div></div></div></div></section></div></div></div><script>window.__NUXT__={layout:"default",data:[{}],fetch:[],error:null,serverRendered:true,routePath:"\u002F",logs:[]};</script><script src="/_nuxt/runtime.js" defer></script><script src="/_nuxt/pages/index.js" defer></script><script src="/_nuxt/commons.app.js" defer></script><script src="/_nuxt/vendors.app.js" defer></script><script src="/_nuxt/app.js" defer></script>
  </body>
</html>

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions

      0