Skip to content

Commit fecb4dd

Browse files
roncohenroncohen
committed
feat(vue-sdk): initial commit
1 parent a5d88e5 commit fecb4dd

20 files changed

+1351
-6
lines changed

‎README.md‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,15 @@ Ship quality faster: Feature flags, feature feedback and feature adoption in a s
55
[Learn more and get started](https://bucket.co/)
66

77
## React SDK
8-
98
Client side React SDK
109

1110
[Read the docs](packages/react-sdk/README.md)
1211

12+
## Vue SDK
13+
Client side Vue SDK
14+
15+
[Read the docs](packages/vue-sdk/README.md)
16+
1317
## Browser SDK
1418

1519
Browser SDK for use in non-React web applications

‎packages/vue-sdk/README.md‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
# Bucket Vue SDK
2+
3+
Vue client side library for [Bucket.co](https://bucket.co)
4+
5+
Bucket supports feature toggling, tracking feature usage, requesting feedback on features and remotely configuring features.
6+
7+
The Bucket Vue SDK comes with the same built-in toolbar as the browser SDK which appears on `localhost` by default.
8+
9+
## Install
10+
11+
Install via npm:
12+
13+
```shell
14+
npm i @bucketco/vue-sdk
15+
```
16+
17+
## Get started
18+
19+
### 1. Wrap your application with the `BucketProvider`
20+
21+
```vue
22+
<script setup lang="ts">
23+
import { BucketProvider } from '@bucketco/vue-sdk'
24+
</script>
25+
26+
<BucketProvider
27+
publishableKey="{YOUR_PUBLISHABLE_KEY}"
28+
:company="{ id: 'acme_inc', plan: 'pro' }"
29+
:user="{ id: 'john doe' }"
30+
>
31+
<!-- your app -->
32+
</BucketProvider>
33+
```
34+
35+
### 2. Create a new feature and set up type safety
36+
37+
Install the Bucket CLI:
38+
39+
```shell
40+
npm i --save-dev @bucketco/cli
41+
```
42+
43+
Run `npx bucket new` to create your first feature!
44+
On the first run, it will sign into Bucket and set up type generation for your project:
45+
46+
```shell
47+
❯ npx bucket new
48+
Opened web browser to facilitate login: https://app.bucket.co/api/oauth/cli/authorize
49+
50+
Welcome to Bucket!
51+
52+
? Where should we generate the types? gen/features.d.ts
53+
? What is the output format? vue
54+
✔ Configuration created at bucket.config.json.
55+
56+
Creating feature for app Slick app.
57+
? New feature name: Huddle
58+
? New feature key: huddle
59+
✔ Created feature Huddle with key huddle (https://app.bucket.co/features/huddles)
60+
✔ Generated vue types in gen/features.d.ts.
61+
```
62+
63+
> [!Note]
64+
> By default, types will be generated in `gen/features.d.ts`.
65+
> The default `tsconfig.json` file `include`s this file by default, but if your `tsconfig.json` is different, make sure the file is covered in the `include` property.
66+
67+
### 3. Use `useFeature(key)` to get feature status
68+
69+
```vue
70+
<script setup lang="ts">
71+
import { useFeature } from '@bucketco/vue-sdk'
72+
73+
const huddle = useFeature('huddle')
74+
</script>
75+
76+
<template>
77+
<button v-if="huddle.isEnabled" @click="huddle.track()">
78+
{{ huddle.config?.payload?.buttonTitle ?? 'Start Huddle' }}
79+
</button>
80+
</template>
81+
```
82+
83+
See the [browser SDK documentation](../browser-sdk/README.md) for all available methods.

‎packages/vue-sdk/dev/plain/App.vue‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<template>
2+
<div v-if="!publishableKey">
3+
<MissingKeyMessage />
4+
</div>
5+
<BucketProvider v-else :publishableKey="publishableKey" :user="user">
6+
<template #loading>Loadinaaaaaaaaaaaaag....</template>
7+
<StartHuddleButton />
8+
</BucketProvider>
9+
</template>
10+
11+
<script setup lang="ts">
12+
import { h } from "vue";
13+
import { BucketProvider } from "../../src";
14+
import MissingKeyMessage from "./components/MissingKeyMessage.vue";
15+
import StartHuddleButton from "./components/StartHuddleButton.vue";
16+
17+
const publishableKey = import.meta.env.VITE_PUBLISHABLE_KEY || "";
18+
19+
const user = { id: "123", name: "John Doe" };
20+
</script>

‎packages/vue-sdk/dev/plain/components/MissingKeyMessage.vue‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<template>
2+
<div
3+
style="
4+
padding: 20px;
5+
border: 2px solid #ff6b6b;
6+
border-radius: 8px;
7+
background-color: #fff5f5;
8+
color: #d63031;
9+
font-family: Arial, sans-serif;
10+
"
11+
>
12+
<h3 style="margin: 0 0 10px 0; color: #d63031">Missing Publishable Key</h3>
13+
<p style="margin: 0; line-height: 1.5">
14+
The <code>VITE_PUBLISHABLE_KEY</code> environment variable is not set.
15+
Please set this variable in your <code>.env</code> file to use the Bucket
16+
SDK.
17+
</p>
18+
<p style="margin: 10px 0 0 0; font-size: 14px; opacity: 0.8">
19+
Example: <code>VITE_PUBLISHABLE_KEY=your_key_here</code>
20+
</p>
21+
</div>
22+
</template>
23+
24+
<script setup lang="ts">
25+
// No additional logic needed for this component
26+
</script>

‎packages/vue-sdk/dev/plain/components/StartHuddleButton.vue‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<script setup lang="ts">
2+
import { useFeature } from "../../../src";
3+
4+
const huddle = useFeature("huddle");
5+
</script>
6+
<template>
7+
<div>
8+
Huddle: {{ huddle.isEnabled }}
9+
<span v-if="huddle.isLoading">Loading...</span>
10+
<span v-else-if="!huddle.isEnabled">Not enabled</span>
11+
<span v-else>
12+
<button @click="huddle.track()">
13+
{{ huddle.config.value?.payload?.buttonTitle ?? "Start Huddle" }}
14+
</button>
15+
<button
16+
@click="huddle.requestFeedback({ title: 'Do you like huddles?' })"
17+
>
18+
Request Feedback
19+
</button>
20+
</span>
21+
</div>
22+
</template>

‎packages/vue-sdk/dev/plain/env.d.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
/// <reference types="vite/client" />
2+
3+
interface ImportMetaEnv {
4+
readonly VITE_PUBLISHABLE_KEY: string;
5+
}
6+
7+
interface ImportMeta {
8+
readonly env: ImportMetaEnv;
9+
}

‎packages/vue-sdk/dev/plain/index.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Bucket Vue SDK playground</title>
7+
</head>
8+
9+
<body>
10+
<div id="app"></div>
11+
<!-- Playground -->
12+
<script type="module" src="index.ts"></script>
13+
</body>
14+
</html>

‎packages/vue-sdk/dev/plain/index.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { createApp } from "vue";
2+
3+
import App from "./App.vue";
4+
5+
const el = document.getElementById("app");
6+
7+
if (el) {
8+
const app = createApp(App);
9+
app.mount(el);
10+
}

‎packages/vue-sdk/eslint.config.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
const base = require("@bucketco/eslint-config");
2+
3+
module.exports = [
4+
...base,
5+
{ ignores: ["dist/"] },
6+
{
7+
files: ["**/*.ts"],
8+
rules: {
9+
"react/prop-types": "off",
10+
"react-hooks/rules-of-hooks": "off",
11+
},
12+
},
13+
];

‎packages/vue-sdk/package.json‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
{
2+
"name": "@bucketco/vue-sdk",
3+
"version": "0.0.1",
4+
"license": "MIT",
5+
"repository": {
6+
"type": "git",
7+
"url": "https://github.com/bucketco/bucket-javascript-sdk.git"
8+
},
9+
"publishConfig": {
10+
"access": "public"
11+
},
12+
"scripts": {
13+
"dev": "vite",
14+
"build": "tsc --project tsconfig.build.json && vite build",
15+
"test": "vitest -c vite.config.mjs",
16+
"test:ci": "vitest run -c vite.config.mjs --reporter=default --reporter=junit --outputFile=junit.xml",
17+
"coverage": "vitest run --coverage",
18+
"lint": "eslint .",
19+
"lint:ci": "eslint --output-file eslint-report.json --format json .",
20+
"prettier": "prettier --check .",
21+
"format": "yarn lint --fix && yarn prettier --write",
22+
"preversion": "yarn lint && yarn prettier && yarn vitest run -c vite.config.mjs && yarn build"
23+
},
24+
"files": [
25+
"dist"
26+
],
27+
"main": "./dist/bucket-vue-sdk.umd.js",
28+
"types": "./dist/index.d.ts",
29+
"exports": {
30+
".": {
31+
"import": "./dist/bucket-vue-sdk.mjs",
32+
"require": "./dist/bucket-vue-sdk.umd.js",
33+
"types": "./dist/index.d.ts"
34+
}
35+
},
36+
"dependencies": {
37+
"@bucketco/browser-sdk": "3.2.0",
38+
"canonical-json": "^0.0.4",
39+
"rollup": "^4.2.0"
40+
},
41+
"peerDependencies": {
42+
"vue": "^3.0.0"
43+
},
44+
"devDependencies": {
45+
"@bucketco/eslint-config": "workspace:^",
46+
"@bucketco/tsconfig": "workspace:^",
47+
"@types/jsdom": "^21.1.6",
48+
"@types/node": "^22.12.0",
49+
"@vitejs/plugin-vue": "^5.2.4",
50+
"@vue/test-utils": "^2.3.2",
51+
"eslint": "^9.21.0",
52+
"jsdom": "^24.1.0",
53+
"msw": "^2.3.5",
54+
"prettier": "^3.5.2",
55+
"rollup-preserve-directives": "^1.1.2",
56+
"ts-node": "^10.9.2",
57+
"typescript": "^5.7.3",
58+
"vite": "^5.0.13",
59+
"vite-plugin-dts": "^4.5.4",
60+
"vitest": "^2.0.4",
61+
"vue": "^3.5.16"
62+
}
63+
}

0 commit comments

Comments
 (0)