` tags.
+
+Also it's time to fix it if you didn't but I'm sure you can manage that by yourself.
+
+## Submit pull request
+
+We're going to submit a pull request to verify completion of this tutorial step.
+
+### Continuous integration (CI) check
+
+Run the CI check to make sure we're all set to submit a pull request.
+
+```bash
+$ yarn ci-check
+```
+
+_Note: Having issues running the CI check? [Step 1]() has troubleshooting notes that may help._
+
+### Git commit and push
+
+Before we can create a pull request, stage and commit all of your changes:
+
+```bash
+$ git add --all && git commit -m "feat(tutorial): complete step 4"
+```
+
+Then, push to your repository:
+
+```bash
+$ git push origin vue-step-4
+```
+
+_Note: Having issues pushing your changes? [Step 1](/tutorial/step-1/vue#git-commit-and-push) has troubleshooting notes that may help._
+
+### Pull request (PR)
+
+Finally, visit [carbon-tutorial](https://github.com/carbon-design-system/carbon-tutorial) to "Compare & pull request". In doing so, make sure that you are comparing to `vue-step-4` into `base: vue-step-4`.
+
+_Note: Expect your tutorial step PRs to be reviewed by the Carbon team but not merged. We'll close your PR so we can keep the repository's remote branches pristine and ready for the next person!_
diff --git a/src/content/tutorial/vue/step-5.mdx b/src/content/tutorial/vue/step-5.mdx
new file mode 100644
index 0000000000..bfa65e2f51
--- /dev/null
+++ b/src/content/tutorial/vue/step-5.mdx
@@ -0,0 +1,228 @@
+---
+title: 5. Deploying to IBM Cloud
+internal: false
+tabs: ['Overview', 'Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5', 'Wrapping up']
+---
+
+### This step takes what we've built so far and optimizes the app for a production environment. We'll be deploying the production build to IBM Cloud.
+
+
+
+- [Fork, clone and branch](#fork-clone-and-branch)
+- [Create IBM Cloud account](#create-ibm-cloud-account)
+- [Optimize Sass](#optimize-sass)
+- [Build for production](#build-for-production)
+- [Create manifest file](#create-manifest-file)
+- [Create static file](#create-static-file)
+- [Deploy app](#deploy-app)
+- [Submit pull request](#submit-pull-request)
+
+
+
+## Preview
+
+A [preview](https://vue-step-6--carbon-tutorial-vue.netlify.com) of what you'll build (visually no different, but built for production):
+
+
+
+
+
+
+
+## Fork, clone and branch
+
+This tutorial has an accompanying GitHub repository called [carbon-tutorial-vue](https://github.com/carbon-design-system/carbon-tutorial-vue) that we'll use as a starting point for each step. If you haven't forked and cloned that repository yet, and haven't added the upstream remote, go ahead and do so by following the [step 1 instructions](/tutorial-vue/step-1/vue#fork-clone--branch).
+
+### Branch
+
+With your repository all set up, let's check out the branch for this tutorial step's starting point.
+
+```bash
+$ git fetch upstream
+$ git checkout -b vue-step-5 upstream/vue-step-5
+```
+
+_Note: This builds on top of step 4, but be sure to check out the upstream step 5 branch because it includes the static assets required to get through this step._
+
+### Build and start app
+
+Install the app's dependencies (in case you're starting fresh in your current directory and not continuing from the previous step):
+
+```bash
+$ yarn
+```
+
+Then, start the app:
+
+```bash
+$ yarn serve
+```
+
+You should see something similar to where the [previous step](/tutorial/step-4/vue) left off.
+
+## Create IBM Cloud account
+
+Before we get started, [create an IBM Cloud account](https://cloud.ibm.com/registration) if you don't already have one, as we'll be deploying there in a bit.
+
+## Optimize Sass
+
+So far we've been developing in a, well, development environment where static asset optimization hasn't been a priority. If you reference `/src/styles/_carbon.scss`, you'll see one `@import` that is pulling in Carbon's full Sass build.
+
+##### src/styles/\_carbon.scss
+
+```scss
+$feature-flags: (
+ grid-columns-16: true,
+);
+
+@import 'carbon-components/scss/globals/scss/styles.scss';
+```
+
+To give you an idea of what's all included, open up `node_modules/carbon-components/scss/globals/scss/styles.scss`. You'll see imports for components like accordion, slider, tooltip, etc. Since we aren't using those components, let's exclude them from our built stylesheets. Keeping the `$feature-flags` Sass map, replace the `styles.scss` import only with:
+
+##### src/styles/\_carbon.scss
+
+```scss
+// Feature flags
+$css--font-face: true;
+$css--plex: true;
+
+// Global styles
+@import 'carbon-components/scss/globals/scss/css--font-face';
+@import 'carbon-components/scss/globals/grid/grid';
+
+// Carbon components
+@import 'carbon-components/scss/components/breadcrumb/breadcrumb';
+@import 'carbon-components/scss/components/button/button';
+@import 'carbon-components/scss/components/data-table/data-table';
+@import 'carbon-components/scss/components/link/link';
+@import 'carbon-components/scss/components/pagination/pagination';
+@import 'carbon-components/scss/components/tabs/tabs';
+@import 'carbon-components/scss/components/ui-shell/ui-shell';
+```
+
+In comparing to the included `styles.scss`, you may be asking what happened to importing `_vars.scss`, `_colors.scss`, `_theme.scss`, etc.? Many of those global Sass partials get imported through the components. For example, open `node_modules/carbon-components/scss/components/button/_button.scss` to see its dependencies. No harm in importing them as `styles.scss` does, but for simplicity here, we'll let the components pull them in.
+
+You can read more about optimizing Carbon's Sass in the [Carbon Design System publication](https://medium.com/carbondesign/minimal-css-with-carbon-b0c089ccfa71) on Medium.
+
+## Build for production
+
+Before we deploy our app, we need to create an optimized production build with this command. You may need to `CTRL-C` to stop the development environment first.
+
+```bash
+$ yarn build
+```
+
+Looking at `package.json`, you'll find `yarn build` to run `vue-cli-service build`. This builds the app for production to the `dist` folder. It bundles Vue in production mode and optimizes the build for the best performance. It even goes so far to minify files and include hashes in filenames for caching.
+
+As a lot of this may seem like magic since the build configuration came from the Vue CLI, go ahead and check out their [production build guidelines](https://cli.vuejs.org/guide/build-targets.html#app) for a full description of what's happening.
+
+## Create manifest file
+
+Now that we have a production build, let's get it on the cloud. We're going to use [staticfile-buildpack](https://github.com/cloudfoundry/staticfile-buildpack.git) to deploy our webapp. We'll be using the `ibmcloud` command line interface (CLI). If running `ibmcloud help` doesn't work for you, chances are you need to [install the CLI](https://cloud.ibm.com/docs/cli?topic=cloud-cli-install-ibmcloud-cli).
+
+_Note: If unfamiliar with buildpacks, the [staticfile buildpack docs](https://docs.cloudfoundry.org/buildpacks/staticfile/index.html) has good definitions and configuration documentation._
+
+With the IBM Cloud CLI installed, next, we need to create a `manifest.yml` file in the root of the project. To prevent multiple apps trying to use the `carbon-tutorial-vue` name, replace `USERNAME` with your GitHub username below to make sure our apps are uniquely named.
+
+##### manifest.yml
+
+```bash
+---
+applications:
+ - name: carbon-tutorial-vue-USERNAME
+ memory: 64M
+ buildpack: https://github.com/cloudfoundry/staticfile-buildpack.git
+```
+
+_Note: With this set-up we're still using a GitHub personal access token saved in _`.env.local`_. If you haven't created a GitHub access token yet, see [step 3](/tutorial/step-3/vue#create-access-token). You can put the environment variable in the manifest file, or manually add it in the IBM Cloud dashboard, but since we're building off previous tutorial steps nothing more is needed._
+
+## Create static file
+
+Create a new static file in the root of the project named `Staticfile`. This tells the app to deploy from the `dist` folder and not the root of the project.
+
+##### Staticfile
+
+```bash
+root: dist
+```
+
+### Cloud Foundry ignore
+
+After telling Cloud Foundry what to include, we can also specify what to ignore. Create a top-level `.cfignore` file. Cloud Foundry doesn't let you push read-only files (specifically, files with permissions <`400`), so to prevent issues with the deploy, add:
+
+##### .cfignore
+
+```bash
+node_modules/.cache
+```
+
+You can speed up deploys by decreasing the files uploaded through IBM Cloud. To accomplish this, ignore any folder not required by the production application on IBM Cloud. For example, in the case of serving static files, you can ignore `node_modules/` and `src/` because the only folder being served is `dist/`.
+
+## Deploy app
+
+Login to IBM Cloud.
+
+```bash
+$ cf login -sso
+```
+
+Deploy app using the `cf push` command. Since `manifest.yml` is in our root directory, we don't need to specify it in the push command. But, if you have multiple manifest files that target different environments, it's good practice to specify the file.
+
+```bash
+$ cf push -f manifest.yml
+```
+
+To make it easy on ourselves by not needing to remember that command, let's add a script in `package.json`. We can combine the build and deploy steps to make sure we only deploy immediately after running the build. In the `"scripts"` object in `package.json`, add:
+
+##### package.json
+
+```bash
+"deploy": "rm -rf ./dist && yarn build && cf push -f manifest.yml"
+```
+
+Next time you want to deploy, you can simply run `yarn deploy`.
+
+## Submit pull request
+
+That does it! We're going to submit a pull request to verify completion of this tutorial step. In doing so, **please include the mybluemix.net URL for your deployed app in your pull request description**.
+
+### Continuous integration (CI) check
+
+Run the CI check to make sure we're all set to submit a pull request.
+
+```bash
+$ yarn ci-check
+```
+
+_Note: Having issues running the CI check? [Step 1]() has troubleshooting notes that may help._
+
+### Git commit and push
+
+Before we can create a pull request, stage and commit all of your changes:
+
+```bash
+$ git add --all && git commit -m "feat(tutorial): complete step 5"
+```
+
+Then, push to your repository:
+
+```bash
+$ git push origin vue-step-5
+```
+
+_Note: Having issues pushing your changes? [Step 1](/tutorial/step-1/vue#git-commit-and-push) has troubleshooting notes that may help._
+
+### Pull request (PR)
+
+Finally, visit [carbon-tutorial](https://github.com/carbon-design-system/carbon-tutorial) to "Compare & pull request". In doing so, make sure that you are comparing to `vue-step-5` into `base: vue-step-5`.
+
+_Note: Expect your tutorial step PRs to be reviewed by the Carbon team but not merged. We'll close your PR so we can keep the repository's remote branches pristine and ready for the next person!_
diff --git a/src/content/tutorial/vue/wrapping-up.mdx b/src/content/tutorial/vue/wrapping-up.mdx
new file mode 100644
index 0000000000..a3c51cd7ab
--- /dev/null
+++ b/src/content/tutorial/vue/wrapping-up.mdx
@@ -0,0 +1,65 @@
+---
+title: Wrapping up
+tabs:
+ ['Overview', 'Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5', 'Wrapping up']
+---
+
+### Thanks for completing our tutorial and helping us improve it along the way. As a way to say thanks, you can apply for an IBM Digital Badge and a free shirt!
+
+
+
+- [Badging](#badging)
+- [Free t-shirt\*](#free-t-shirt)
+- [Application](#application)
+
+
+
+## Badging
+
+Once you complete all five steps of the tutorial, you can apply for the IBM Digital Badge. These badges are available to anybody—not just IBM employees.
+
+
+
+
+
+
+
+### IBM Design System Vue Components
+
+This badge demonstrates knowledge about Carbon's Vue components. To earn the badge:
+
+1. Complete steps 1 through 5 of the Vue Carbon tutorial
+ - Step 1. [Installing Carbon](/tutorial/step-1/vue)
+ - Step 2. [Building pages](/tutorial/step-2/vue)
+ - Step 3. [Using APIs](/tutorial/step-3/vue)
+ - Step 4. [Creating components](/tutorial/step-4/vue)
+ - Step 5. [Deploying to IBM Cloud](/tutorial/step-5/vue)
+2. Submit links to approved pull requests for steps 1 through 5 of the Vue Carbon tutorial in the [carbon-tutorial-vue repository](https://github.com/carbon-design-system/carbon-tutorial-vue).
+ - To quickly find your submitted PRs, you can [filter by author](https://github.com/carbon-design-system/carbon-tutorial-vue/pulls?utf8=%E2%9C%93&q=author%3Ausername) (e.g. `author:${username}`)
+3. Complete the [badge application](http://www.carbondesignsystem.com/tutorial/wrapping-up/vue#application)
+
+### FAQ and help
+
+Badge Issuer Contact: kellychurchill@us.ibm.com
+
+Acclaim Support: For questions related to your Acclaim badge earner account and profile, as well as issues related to claiming your badge after receiving a notification, go to [http://support.youracclaim.com](http://support.youracclaim.com) for account issues.
+
+### Privacy statement
+
+NOTICE: IBM leverages the services of Credly's Acclaim platform, a 3rd party data processor authorized by IBM and located in the United States, to assist in the administration of the IBM Digital Badge program. In order to issue you an IBM Digital Badge, your personal information (name, email address, and badge earned) will be shared with the Credly's Acclaim platform. You will receive an email notification from Acclaim with instructions for claiming the badge. Your personal information is used to issue your badge and for program reporting and operational purposes. It will be handled in a manner consistent with IBM privacy practices. The IBM Privacy Statement can be viewed here: [https://www.ibm.com/privacy/us/en/](https://www.ibm.com/privacy/us/en/). IBM employees can view the IBM Internal Privacy Statement here: [https://w3.ibm.com/w3publisher/w3-privacy-notice](https://w3.ibm.com/w3publisher/w3-privacy-notice).
+
+## Free t-shirt
+
+Submit your completed IBM Digital Badge application by September 15, 2019, and receive a free\* Carbon t-shirt.
+
+
+
+
+
+
+
+## Application
+
+Complete the [application form](https://www.surveygizmo.com/s3/5135615/IBM-Carbon-Design-System-Developer-Essentials-Vue) to request the digital badge and t-shirt. Once you submit the application, please allow 2-4 days for issuing the badge and 4-6 weeks to receive the t-shirt. Once the badge is issued, you will be notified and must accept the badge via Acclaim.
+
+_\* Shirts are available for a limited time while supplies last to U.S. shipping addresses and outside the U.S. to participating FED@IBM branches._
diff --git a/src/data/navigation/navigation.json b/src/data/navigation/navigation.json
index 8db17945c8..b3f2638e58 100644
--- a/src/data/navigation/navigation.json
+++ b/src/data/navigation/navigation.json
@@ -14,28 +14,13 @@
}
},
"tutorial": {
- "title": "Tutorial",
+ "title": "Tutorials",
"sub-nav": {
- "overview": {
- "title": "Overview"
- },
- "react-step-1": {
- "title": "1. Installing Carbon"
- },
- "react-step-2": {
- "title": "2. Building pages"
- },
- "react-step-3": {
- "title": "3. Using APIs"
- },
- "react-step-4": {
- "title": "4. Creating components"
- },
- "react-step-5": {
- "title": "5. Deploying to IBM Cloud"
+ "react": {
+ "title": "React"
},
- "wrapping-up": {
- "title": "Wrapping up"
+ "vue": {
+ "title": "Vue"
}
}
},