https://github.com/uiwebkit/tabs-vue-3x

Uni Tabs example for Vue.js 3.x
https://github.com/uiwebkit/tabs-vue-3x

custom-elements html javascript stencil tab tab-bar tabs typescript vue vue3 vuejs web web-components widget

Last synced: 22 days ago
JSON representation

Uni Tabs example for Vue.js 3.x

• Host: GitHub
• URL: https://github.com/uiwebkit/tabs-vue-3x
• Owner: uiwebkit
• License: mit
• Created: 2022-01-17T17:42:50.000Z (about 3 years ago)
• Default Branch: master
• Last Pushed: 2022-01-17T18:00:34.000Z (about 3 years ago)
• Last Synced: 2024-11-07T22:13:06.759Z (2 months ago)
• Topics: custom-elements, html, javascript, stencil, tab, tab-bar, tabs, typescript, vue, vue3, vuejs, web, web-components, widget
• Language: Vue
• Homepage: https://uiwebkit.com/wgt/tabs/1/
• Size: 474 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Uni Tabs example for Vue.js 3.x

Check out demo [here](https://uiwebkit.github.io/tabs-vue-3x/)

Check out our docs [here](https://uiwebkit.com/wgt/tabs/1/)

### Add to vue.config.js

```js

module.exports = {

    chainWebpack: (config) => {

        config.module

            .rule("vue")

            .use("vue-loader")

            .tap((options) => ({

                ...options,

                compilerOptions: {

                    ...options.compilerOptions,

                    // treat any tag that starts with uni- as custom elements

                    isCustomElement: (tag) => tag.startsWith("uni-"),

                },

            }));

    }

};

```

### Add to index.html

```html

```

#### Specify value for the tabs as JSON string

```vue

  

    
Tab Content 1

    
Tab Content 2

  


```

#### or specify url to the tabs JSON file (ex. tabs.json) or to the backend API endpoint

```vue

  

    

      
Tab 1 Content

      
Tab 2 Content

    

  


```

#### Next-Gen Customization (with Store)

```vue

  

    

      

        

      

    

    

      

        

          

          Tab 2

          

            

          

        

        

      

    

  

  

    Store Tab 1 Content

  

  

    Store Tab 2 Content

  

```

#### Next-Gen Customization (with routes)

```vue

  

    

      

        

      

    

    

      

        

          

            

            

            

              

            

          

          

        

      

    

  

  

    Route Tab 1 Content

  

  

    Route Tab 2 Content

  

```