docs(integrations): add vue integration doc (microsoft#3411)

packages/web-components/fast-foundation/docs/integrations/vue.md

@@ -0,0 +1,116 @@
+---
+id: vue
+title: Vue
+sidebar_label: Vue
+custom_edit_url: https://github.com/microsoft/fast/edit/master/packages/web-components/fast-foundation/docs/integrations/vue.md
+---
+
+FAST works great with Vue. Let's take a look at how you can set up a Vue project, starting from scratch.
+
+## Setting up the Vue project
+
+First, you'll need to make sure that you have Node.js installed. You can learn more and download that [on the official site](https://nodejs.org/).
+
+With Node.js installed, you can run the following command to install the Vue CLI:
+
+```shell
+npm install -g @vue/cli
+```
+
+With the CLI installed, you have access to the `vue` command-line interface. This can be used to create a new Vue project. For example, to create a new Vue App named "fast-vue", you would use the following command:
+
+```shell
+vue create fast-vue
+```
+
+When prompted to select options, choose "Manually select features". Follow the prompts, answering each question in turn. It is recommended that you select "TypeScript" when prompted. Be sure to choose to install dependencies when asked.
+
+When the CLI completes, you should have a basic runnable Vue application.
+
+## Configuring packages
+
+Next, we'll install the FAST packages, along with supporting libraries. To do that, run this command from your new project folder:
+
+```shell
+npm install --save @microsoft/fast-components @microsoft/fast-element lodash-es
+```
+
+## Using the components
+
+With all the basic pieces in place, let's run our app in dev mode with `npm run serve`. The Vue CLI should build your project and make it available on localhost. Right now, it displays a basic welcome message, since we haven't added any code or interesting HTML. Let's change that.
+
+First, open your `src/main.ts` file and add the following code:
+
+```ts
+import { 
+  FASTDesignSystemProvider, 
+  FASTCard, 
+  FASTButton 
+} from '@microsoft/fast-components';
+
+/*
+ * Ensure that tree-shaking doesn't remove these components from the bundle.
+ * There are multiple ways to prevent tree shaking, of which this is one.
+ */
+FASTDesignSystemProvider;
+FASTCard;
+FASTButton;
+```
+
+This code imports the `<fast-design-system-provider>` component as well as the `<fast-card>`, and `<fast-button>` components. Once you save, the dev server will rebuild and refresh your browser. However, you still won't see anything. To get some UI showing up, we need to write some HTML that uses our components. Replace the HTML template in your  `components/HelloWorld.vue` file with the following markup:
+
+```html
+<template>
+  <fast-design-system-provider use-defaults>
+    <fast-card>
+      <h2>{{msg}}</h2>
+      <fast-button appearance="accent" v-on:click="onClick">Click Me</fast-button>
+    </fast-card>
+  </fast-design-system-provider>
+</template>
+```
+
+Replace your script tag with this:
+
+```html
+<script>
+export default {
+  name: 'HelloWorld',
+  props: {
+    msg: String
+  },
+  methods: {
+    onClick: function () {
+      console.log('clicked!');
+    }
+  }
+}
+</script>
+```
+
+To add a splash of style, replace the `style` tag with this:
+
+```html
+<style scoped>
+  fast-design-system-provider {
+    display: block;
+  }
+
+  fast-card {
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+  }
+
+  h2 {
+    font-size: var(--type-ramp-plus-5-font-size);
+    line-height: var(--type-ramp-plus-5-line-height);
+  }
+
+  fast-card > fast-button {
+    align-self: flex-end;
+  }
+</style>
+```
+
+Congratulations! You're now set up to use FAST and Vue!

sites/website/sidebars.js

@@ -76,6 +76,7 @@ module.exports = {
                 "integrations/aspnet",
                 "integrations/aurelia",
                 "integrations/blazor",
+                "integrations/vue",
                 "integrations/webpack",
             ],
         },