jskos-vue-tabs

v0.1.8

Published

a month ago

A simple tabs library for Vue 3.

Downloads

0High
0Medium
0Low

stefandesu

jskos-vue-tabs

A simple tabs library for Vue 3.

Development

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:

npm install jskos-vue-tabs

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

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):

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

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

<style src="jskos-vue-tabs/dist/style.css"></style>

Browser

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

Fully working HTML example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue App</title>
    <!-- Our library's stylesheet here -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jskos-vue-tabs/dist/style.css">
  </head>
  <body>
    <div id="app">
      <tabs>
        <tab title="Tab 1">
          Content of Tab 1
        </tab>
        <tab title="Tab 2">
          Content of Tab 2
        </tab>
      </tabs>
    </div>
    <!-- Vue 3 production build -->
    <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
    <!-- Our library -->
    <script src="https://cdn.jsdelivr.net/npm/jskos-vue-tabs/dist/jskos-vue-tabs.umd.min.js"></script>
    <script>
      // Here, we are creating an empty Vue app and include the library as a plugin.
      Vue.createApp({}).use(JskosVueTabs).mount("#app")
    </script>
  </body>
</html>

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):

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.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

jskos-vue-tabs

Table of Contents

Development

Usage

Node.js

Browser

Publish

License