Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/gbv/jskos-vue-tabs

A simple tabs library for Vue 3
https://github.com/gbv/jskos-vue-tabs

coli-conc

Last synced: 3 days ago
JSON representation

A simple tabs library for Vue 3

Host: GitHub
URL: https://github.com/gbv/jskos-vue-tabs
Owner: gbv
License: mit
Created: 2021-05-25T09:40:26.000Z (over 3 years ago)
Default Branch: main
Last Pushed: 2024-09-25T11:38:50.000Z (4 months ago)
Last Synced: 2024-12-11T21:40:29.485Z (29 days ago)
Topics: coli-conc
Language: Vue
Homepage:
Size: 670 KB
Stars: 1
Watchers: 3
Forks: 0
Open Issues: 2
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        # jskos-vue-tabs

[![Test and build](https://github.com/gbv/jskos-vue-tabs/actions/workflows/test-and-build.yml/badge.svg)](https://github.com/gbv/jskos-vue-tabs/actions/workflows/test-and-build.yml)

[![GitHub package version](https://img.shields.io/github/package-json/v/gbv/jskos-vue-tabs.svg?label=version)](https://github.com/gbv/jskos-vue-tabs)

[![NPM package name](https://img.shields.io/badge/npm-jskos--vue--tabs-blue.svg)](https://www.npmjs.com/package/jskos-vue-tabs)

[![standard-readme compliant](https://img.shields.io/badge/readme%20style-standard-brightgreen.svg)](https://github.com/RichardLitt/standard-readme)

> A simple tabs library for Vue 3.

## Table of Contents 

- [Development](#development)

- [Usage](#usage)

  - [Node.js](#nodejs)

  - [Browser](#browser)

- [Publish](#publish)

- [License](#license)

## Development

```bash

git clone https://github.com/gbv/jskos-vue-tabs.git

cd jskos-vue-tabs

npm install

npm run dev # for Vite dev server

npm run build # for Vite build

```

## Usage

### Node.js

1\. Add the library to your Vue project:

```bash

npm install jskos-vue-tabs

```

2a. Add all components globally (in `src/main.js` for your project):

```js

import { createApp } from 'vue'

import App from './App.vue'

const app = createApp(App)

import * as JskosVueTabs from "jskos-vue-tabs"

app.use(JskosVueTabs)

app.mount('#app')

```

3\. Add the stylesheet to your project.

Either add it in code (`main.js` or SFC):

```js

import "jskos-vue-tabs/dist/style.css"

```

Or add it as a style tag (in SFC):

```html

```

### Browser

The library can be used in the browser, for example via jsDelivr.

[![](https://data.jsdelivr.com/v1/package/npm/jskos-vue-tabs/badge?style=rounded)](https://www.jsdelivr.com/package/npm/jskos-vue-tabs)

Fully working HTML example:

```html

  

    

    

    Vue App

    

    

  

  

    


      

        

          Content of Tab 1

        

        

          Content of Tab 2

        

      

    

    

    

    

    

    

      // Here, we are creating an empty Vue app and include the library as a plugin.

      Vue.createApp({}).use(JskosVueTabs).mount("#app")

    

  

```

## Publish

Please work on the `dev` branch during development (or better yet, develop in a feature branch and merge into `dev` when ready).

When a new release is ready (i.e. the features are finished, merged into `dev`, and all tests succeed), run the included release script (replace "patch" with "minor" or "major" if necessary):

```bash

npm run release:patch

```

This will:

- Check that we are on `dev`

- Run tests and build to make sure everything works

- Make sure `dev` is up-to-date

- Run `npm version patch` (or "minor"/"major")

- Push changes to `dev`

- Switch to `main`

- Merge changes from `dev`

- Push `main` with tags

- Switch back to `dev`

After running this, GitHub Actions will **automatically publish the new version to npm**. It will also create a new GitHub Release draft. Please **edit and publish the release draft manually**.

## License

MIT Copyright (c) 2021 Verbundzentrale des GBV (VZG)