A simple tabs library for Vue 3.
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 build1. Add the library to your Vue project:
npm install jskos-vue-tabs2a. 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>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>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:patchThis will:
- Check that we are on
dev - Run tests and build to make sure everything works
- Make sure
devis up-to-date - Run
npm version patch(or "minor"/"major") - Push changes to
dev - Switch to
main - Merge changes from
dev - Push
mainwith 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.
MIT Copyright (c) 2021 Verbundzentrale des GBV (VZG)