Add Vue3 Example (#184)

* chore(vue3): add vue demo - add vue3 basic demp app * chore(env): add .env.exmple file * Create rich-pigs-boil.md Co-authored-by: Jens Schulze <jens.schulze@commercetools.com>
commercetools · Feb 1, 2022 · b5ff8ec · b5ff8ec
1 parent 6b86d24
commit b5ff8ec
Show file tree

Hide file tree

Showing 16 changed files with 8,467 additions and 0 deletions.
diff --git a/.changeset/rich-pigs-boil.md b/.changeset/rich-pigs-boil.md
@@ -0,0 +1,5 @@
+---
+
+---
+
+Add Vue3 Example
diff --git a/examples/vue/.browserslistrc b/examples/vue/.browserslistrc
@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not dead
diff --git a/examples/vue/.env.example b/examples/vue/.env.example
@@ -0,0 +1,3 @@
+VUE_APP_CTP_PROJECT_KEY=
+VUE_APP_CTP_CLIENT_ID=
+VUE_APP_CTP_CLIENT_SECRET=
diff --git a/examples/vue/.gitignore b/examples/vue/.gitignore
@@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/examples/vue/README.md b/examples/vue/README.md
@@ -0,0 +1,23 @@
+# vue
+
+## Project setup
+
+```
+yarn install
+```
+
+### Compiles and hot-reloads for development
+
+```
+yarn serve
+```
+
+### Compiles and minifies for production
+
+```
+yarn build
+```
+
+### Customize configuration
+
+See [Configuration Reference](https://cli.vuejs.org/config/).
diff --git a/examples/vue/babel.config.js b/examples/vue/babel.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['@vue/cli-plugin-babel/preset'],
+}
diff --git a/examples/vue/package.json b/examples/vue/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "vue",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build"
+  },
+  "dependencies": {
+    "@commercetools/platform-sdk": "^2.2.0",
+    "@commercetools/sdk-client-v2": "^1.0.2",
+    "core-js": "^3.6.5",
+    "node-fetch": "2.1.0",
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-service": "~4.5.0",
+    "@vue/compiler-sfc": "^3.0.0"
+  }
+}
diff --git a/examples/vue/public/favicon.ico b/examples/vue/public/favicon.ico
diff --git a/examples/vue/public/index.html b/examples/vue/public/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
diff --git a/examples/vue/src/App.vue b/examples/vue/src/App.vue
@@ -0,0 +1,26 @@
+<template>
+  <DemoProject title="Vue3 Demo" />
+</template>
+
+<script>
+import DemoProject from './components/DemoProject.vue'
+
+export default {
+  name: 'App',
+  components: {
+    DemoProject
+  },
+}
+</script>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  /* text-align: center; */
+  color: #2c3e50;
+  font-weight:600;
+  margin-top: 60px auto;
+}
+</style>
diff --git a/examples/vue/src/assets/logo.png b/examples/vue/src/assets/logo.png
diff --git a/examples/vue/src/components/Button.vue b/examples/vue/src/components/Button.vue
@@ -0,0 +1,16 @@
+<template>
+  <button type="button" :style="{background: color}" class="btn" @click="onClick()">{{text}}</button>
+</template>
+
+<script>
+
+export default ({
+  name: 'Button',
+  props: {
+    text: String,
+    color: String,
+    onClick: Function,
+  }
+})
+
+</script>
diff --git a/examples/vue/src/components/DemoProject.vue b/examples/vue/src/components/DemoProject.vue
@@ -0,0 +1,82 @@
+<template>
+  <div>
+    <h1>{{ title }}</h1>
+    <Button :text="text" color="#2bcbfc" :onClick="handler" />
+    <pre :style="{}">
+      {{ isShown ? projectDetails : null }}
+    </pre>
+  </div>
+</template>
+
+<script>
+import Button from './Button'
+import { getApiRoot, projectKey } from '../sdk/ApiRoot'
+
+export default {
+  name: 'Demo SDK usage in vue',
+  props: {
+    title: String,
+    msg: String,
+    onClick: Function,
+  },
+  data() {
+    return {
+      text: 'Get Project Details',
+      isShown: false,
+      projectDetails: null,
+    }
+  },
+  methods: {
+    async handler() {
+      if (this.isShown) {
+        this.isShown = this.toggle(this.isShown)
+        return
+      }
+
+      try {
+        this.projectDetails = await getApiRoot()
+          .withProjectKey({ projectKey })
+          .get()
+          .execute()
+
+        this.toggle(this.isShown)
+      } catch (e) {
+        console.eroor(e)
+      }
+    },
+    toggle(val) {
+      this.isShown = !val
+      this.text = this.isShown ? 'Hide Project Details' : 'Get Project Details'
+    },
+  },
+  components: {
+    Button,
+  },
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+.btn {
+  padding: 10px;
+  width: 150px;
+  color: #ffffff;
+  border: 0px solid #2bcbfc;
+  border-radius: 5px;
+  cursor: pointer;
+}
+</style>
diff --git a/examples/vue/src/main.js b/examples/vue/src/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')
diff --git a/examples/vue/src/sdk/ApiRoot.js b/examples/vue/src/sdk/ApiRoot.js
@@ -0,0 +1,31 @@
+import fetch from 'node-fetch'
+import { ClientBuilder } from '@commercetools/sdk-client-v2'
+import { createApiBuilderFromCtpClient } from '@commercetools/platform-sdk'
+
+export const projectKey = process.env.VUE_APP_CTP_PROJECT_KEY
+const authMiddlewareOptions = {
+  host: 'https://auth.europe-west1.gcp.commercetools.com',
+  projectKey,
+  credentials: {
+    clientId: process.env.VUE_APP_CTP_CLIENT_ID,
+    clientSecret: process.env.VUE_APP_CTP_CLIENT_SECRET,
+  },
+  scopes: [`manage_project:${projectKey}`],
+  fetch,
+}
+
+const httpMiddlewareOptions = {
+  host: 'https://api.europe-west1.gcp.commercetools.com',
+  fetch,
+}
+
+const client = new ClientBuilder()
+  .withProjectKey(projectKey)
+  .withClientCredentialsFlow(authMiddlewareOptions)
+  .withHttpMiddleware(httpMiddlewareOptions)
+  // .withLoggerMiddleware()
+  .build()
+
+export const getApiRoot = () => {
+  return createApiBuilderFromCtpClient(client)
+}