CODEWITHSUNDEEP
vue.jsnuxt.js
SkoreanAsHol
SkoreanAsHol

Reputation: 35

Can I create iframes tab menu using Nuxt?

I'm going to make Nuxt function like following sample code.

The work is being carried out without a good understanding of Nuxt.

It is not even using the tag <nuxt/>. Because it has to be made with iframe.

The reason why we want to use iframe is that we want existing information to remain even if the new content generated is tabbed.

The way I want to work doesn't seem to fit Nuxt's characteristics, but... I can't think of any other way.

The question I want is as follows.

  1. Create tabMenu using Nuxt, and each tab content must maintain existing data even if the tab moves.

  2. Is this possible with Nuxt?

// it just sample code, Not my question
$(function(){
    function setPage(name,src){
        const tabs = `<button role="button">${name}</button>`
        const iframes = `<div>here is ifame area of ${name} page</div>`
        $('.page-tab').append(tabs)
        $('.page-frame').append(iframes)
    }
    
    function setView(number){
        $('.page-frame > div').eq(number).removeClass('hide').siblings().addClass('hide')
    }
  
    $('.tab-content > li').click(function(){
        const $this = $(this);
        const index = $this.index()
        const name = $this.text()
        const src = $this.data('src')
    
        setPage(name+index,src)
        setView(index)
    
    $('.page-tab button').click(function(){
        setView($(this).index())
    })
  });
})
html,body,#sample {
    height: 100%;
}
#sample {
    display :flex;
}
aside {
    flex: 0 0 auto;
    height: 100%;
    background-color:#eee;
}
.tab-content li {
    text-align: center;
    cursor: pointer;
    padding: 10px 8px;
    border-bottom: 1px solid #ddd;
 }
main {
    flex: 1 0 auto;
    display: flex;
    flex-direction:column;
}
.hide {
    display: none !important;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/reset.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sample">
    <aside>
        <ul class="tab-content">
            <li role="button" data-src="https://www.reddit.com/">Apple</li>
            <li role="button" data-src="https://finance.yahoo.com/quote/TSLA/">Orange</li>
            <li role="button" data-src="https://github.com/dogecoin/dogecoin">Water</li>
        </ul>
    </aside>
    <main>
        <div class="page-tab"></div>
        <div class="page-frame"></div>
    </main>
</div>

Upvotes: 1

Views: 1314

Answers (1)

kissu
kissu

Reputation: 46596

You should really not try to do this in jQuery but in pure VueJS (or Nuxt, it's the same). Mixing declarative and imperative code is not a good idea.

For a tab functionality, you can use dynamic components to keep up the state while still toggling tabs.

I'm not sure if you're using SFC components or not, but here is a JSfiddle that may show you how to make tabs in VueJS: https://jsfiddle.net/chrisvfritz/Lp20op9o/

Upvotes: 1

Related Questions