Vue SDK

package.json

@@ -5,7 +5,8 @@
   "license": "MIT",
   "workspaces": [
     "packages/*",
-    "packages/react-sdk/dev/*"
+    "packages/react-sdk/dev/*",
+    "packages/vue-sdk/example"
   ],
   "scripts": {
     "dev": "lerna run dev --parallel",

packages/eslint-config/base.js

@@ -17,6 +17,7 @@ module.exports = [
       "**/*.jsx",
       "**/*.ts",
       "**/*.tsx",
+      "**/*.vue",
     ],
     plugins: {
       import: importsPlugin,

packages/vue-sdk/README.md

@@ -0,0 +1 @@
+# vue-sdk

packages/vue-sdk/eslint.config.js

@@ -0,0 +1,8 @@
+const base = require("@bucketco/eslint-config/base");
+const pluginVue = require("eslint-plugin-vue");
+
+module.exports = [
+  ...base,
+  { ignores: ["dist/", "example/"] },
+  ...pluginVue.configs["flat/recommended"],
+];

packages/vue-sdk/example/README.md

@@ -0,0 +1 @@
+# example

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

@@ -0,0 +1,8 @@
+const base = require("@bucketco/eslint-config/base");
+const pluginVue = require("eslint-plugin-vue");
+
+module.exports = [
+  ...base,
+  { ignores: ["dist/", "example/"] },
+  ...pluginVue.configs["flat/recommended"],
+];

packages/vue-sdk/example/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "slick-app",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "@bucketco/vue-sdk": "^0.1.0",
+    "core-js": "^3.8.3",
+    "vue": "^3.2.13"
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^5.4.0",
+    "@typescript-eslint/parser": "^5.4.0",
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-plugin-typescript": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "@vue/eslint-config-typescript": "^9.1.0",
+    "eslint": "^7.32.0",
+    "eslint-plugin-vue": "^8.0.3",
+    "typescript": "~4.5.5"
+  }
+}

packages/vue-sdk/example/src/App.vue

@@ -0,0 +1,34 @@
+<!-- App.vue -->
+<template>
+  <BucketProvider :loading-component="LoadingSpinner">
+    <div id="slick-app">
+      <header>
+        <h1>Welcome to Slick</h1>
+        <p>The next-gen team communication platform</p>
+      </header>
+      <main v-if="huddles">
+        <p>Welcome to the beta program!</p>
+      </main>
+    </div>
+  </BucketProvider>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted } from "vue";
+import { BucketProvider, useFeature } from "@bucketco/vue-sdk";
+
+export default defineComponent({
+  name: "App",
+  components: {
+    BucketProvider,
+  },
+  setup() {
+    const { isEnabled } = useFeature("huddles");
+
+    return {
+      huddles: isEnabled,
+      LoadingSpinner: () => import("./LoadingSpinner.vue"),
+    };
+  },
+});
+</script>

packages/vue-sdk/example/src/LoadingSpinner.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="loading-spinner">
+    <div class="spinner"></div>
+    <p>Loading Slick...</p>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  name: "LoadingSpinner",
+});
+</script>
+
+<style scoped>
+.loading-spinner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+}
+
+.spinner {
+  border: 4px solid #f3f3f3;
+  border-top: 4px solid #3498db;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>

packages/vue-sdk/example/src/main.ts

@@ -0,0 +1,9 @@
+import { createApp } from "vue";
+import App from "./App.vue";
+import { BucketPlugin } from "@bucketco/vue-sdk";
+
+const app = createApp(App);
+
+app.use(BucketPlugin, { publishableKey: "pk_test_123" });
+
+app.mount("#app");

packages/vue-sdk/example/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "strict": true,
+    "jsx": "preserve",
+    "importHelpers": true,
+    "moduleResolution": "node",
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "sourceMap": true,
+    "baseUrl": ".",
+    "types": ["webpack-env"],
+    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "tests/**/*.ts",
+    "tests/**/*.tsx"
+  ],
+  "exclude": ["node_modules"]
+}

packages/vue-sdk/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@bucketco/vue-sdk",
+  "version": "0.1.0",
+  "description": "Vue SDK for Bucket",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc --project tsconfig.build.json && vite build",
+    "test": "vitest -c vite.config.mjs",
+    "test:ci": "vitest run -c vite.config.mjs --reporter=default --reporter=junit --outputFile=junit.xml",
+    "coverage": "vitest run --coverage",
+    "lint": "eslint .",
+    "lint:ci": "eslint --output-file eslint-report.json --format json .",
+    "prettier": "prettier --check .",
+    "format": "yarn lint --fix && yarn prettier --write",
+    "preversion": "yarn lint && yarn prettier && yarn vitest run -c vite.config.mjs && yarn build"
+  },
+  "keywords": [
+    "vue",
+    "bucket",
+    "sdk",
+    "feature flags"
+  ],
+  "author": "Bucket",
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "dependencies": {
+    "@bucketco/browser-sdk": "workspace:^"
+  },
+  "devDependencies": {
+    "@types/node": "^22.1.0",
+    "@vitejs/plugin-vue": "^5.1.2",
+    "@vue/tsconfig": "^0.5.1",
+    "jsdom": "^24.1.0",
+    "prettier": "^3.3.3",
+    "typescript": "^5.4.5",
+    "vite": "^5.3.5",
+    "vite-plugin-dts": "^4.0.0-beta.2",
+    "vue": "^3.0.0"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/bucketco/bucket-javascript-sdk.git"
+  },
+  "bugs": {
+    "url": "https://github.com/bucketco/bucket-javascript-sdk/issues"
+  },
+  "homepage": "https://github.com/bucketco/bucket-javascript-sdk/blob/main/packages/vue-sdk/README.md"
+}