Merge pull request #101 from microsoftgraph/mhawker/vue-sample-demo

Vue.js Sample from //Build

Author: michael-hawker

.vscode/settings.json

@@ -1,4 +1,5 @@
 {
     "editor.formatOnSave": true,
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "vetur.format.enable": false
 }

docs/components/login.md

@@ -51,14 +51,17 @@ The `mgt-login` component defines these CSS custom properties
 mgt-login {
   --font-size: 14px;
   --font-weight: 600;
+  --width: '100%';
   --height: '100%';
   --margin: 0;
   --padding: 12px 20px;
   --color: #201f1e;
   --background-color: transparent;
   --background-color--hover: #edebe9;
   --popup-content-background-color: white;
-  --popup-command-font-size: 12px; }
+  --popup-command-font-size: 12px;
+  --popup-command-margin: 0;
+  --popup-padding: 16px;
 }
 ```
 

samples/vue-app/.browserslistrc

@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not ie <= 8

samples/vue-app/.gitignore

@@ -0,0 +1,21 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

samples/vue-app/README.md

@@ -0,0 +1,39 @@
+# Vue.js Sample for MGT
+
+This sample shows how to incorporate the Microsoft Graph Toolkit into a [Vue.js](https://vuejs.org/) app.
+
+The sample was initially created with the [vue-cli](https://cli.vuejs.org/) tool for Typescript and dart-sass.
+
+## Setting up Vue for MGT
+
+1. Install MGT with `npm install @microsoft/mgt`
+2. In your `App.vue` or other Vue components, add an import with the components you want to use E.g. `import { MgtMsalProvider, MgtLogin, MgtAgenda } from '@microsoft/mgt';`.
+3. Now you can use those MGT components in your Vue component!
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Run your tests
+```
+npm run test
+```
+
+### Lints and fixes files
+```
+npm run lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

samples/vue-app/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "vue-app",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "@microsoft/mgt": "0.1.1",
+    "vue": "^2.6.10",
+    "vue-class-component": "^7.0.2",
+    "vue-property-decorator": "^8.1.0"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-typescript": "^3.6.0",
+    "@vue/cli-service": "^3.6.0",
+    "sass": "^1.18.0",
+    "sass-loader": "^7.1.0",
+    "typescript": "^3.4.3",
+    "vue-template-compiler": "^2.5.21"
+  }
+}

samples/vue-app/postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    autoprefixer: {}
+  }
+}