Add bootstrap-vue.

config/dev.env.js

@@ -3,5 +3,7 @@ const merge = require('webpack-merge')
 const prodEnv = require('./prod.env')
 
 module.exports = merge(prodEnv, {
- NODE_ENV: '"development"'
+ NODE_ENV: '"development"',
+ PARSE_SERVER_APPLICATION_ID: JSON.stringify(process.env.PARSE_SERVER_APPLICATION_ID),
+ PARSE_SERVER_URL: JSON.stringify(process.env.PARSE_SERVER_URL)
 })

package.json

@@ -11,6 +11,7 @@
  "build": "node build/build.js"
  },
  "dependencies": {
+ "bootstrap-vue": "^2.0.0-rc.11",
  "parse": "^1.11.1",
  "vue": "^2.5.2",
  "vue-router": "^3.0.1"

src/App.vue

@@ -1,19 +1,12 @@
 <template>
- <div id="app">
- <img src="./assets/logo.png">
+ <div id="app" class="container">
  <router-view/>
  </div>
 </template>
 
 <script>
-import Parse from 'parse'
 export default {
- name: 'App',
- mounted () {
- Parse.User.logIn('[email protected]', '123')
- .then(console.log)
- .fail(console.log)
- }
+ name: 'App'
 }
 </script>
 

src/components/HelloWorld.vue

@@ -1,91 +1,19 @@
 <template>
- <div class="hello">
- <h1>{{ msg }}</h1>
- <h2>Essential Links</h2>
- <ul>
- <li>
- <a
- href="https://vuejs.org"
- target="_blank"
- >
- Core Docs
- </a>
- </li>
- <li>
- <a
- href="https://forum.vuejs.org"
- target="_blank"
- >
- Forum
- </a>
- </li>
- <li>
- <a
- href="https://chat.vuejs.org"
- target="_blank"
- >
- Community Chat
- </a>
- </li>
- <li>
- <a
- href="https://twitter.com/vuejs"
- target="_blank"
- >
- Twitter
- </a>
- </li>
- <br>
- <li>
- <a
- href="http:https://vuejs-templates.github.io/webpack/"
- target="_blank"
- >
- Docs for This Template
- </a>
- </li>
- </ul>
- <h2>Ecosystem</h2>
- <ul>
- <li>
- <a
- href="http:https://router.vuejs.org/"
- target="_blank"
- >
- vue-router
- </a>
- </li>
- <li>
- <a
- href="http:https://vuex.vuejs.org/"
- target="_blank"
- >
- vuex
- </a>
- </li>
- <li>
- <a
- href="http:https://vue-loader.vuejs.org/"
- target="_blank"
- >
- vue-loader
- </a>
- </li>
- <li>
- <a
- href="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/vuejs/awesome-vue"
- target="_blank"
- >
- awesome-vue
- </a>
- </li>
- </ul>
+ <div>
+ <h1>Hello!</h1>
  </div>
 </template>
 
 <script>
+import Parse from 'parse'
 export default {
  name: 'HelloWorld',
+ mounted () {
+ // Parse call example...
+ Parse.User.logIn('fulano', '123')
+ .then(console.log)
+ .fail(console.log)
+ },
  data () {
  return {
  msg: 'Welcome to Your Vue.js App'
@@ -96,18 +24,7 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-h1, h2 {
- font-weight: normal;
-}
-ul {
- list-style-type: none;
- padding: 0;
-}
-li {
- display: inline-block;
- margin: 0 10px;
-}
-a {
- color: #42b983;
+body {
+ background: #ededed;
 }
 </style>

src/main.js

@@ -4,12 +4,18 @@ import Vue from 'vue'
 import Parse from 'parse'
 import App from './App'
 import router from './router'
+import BootstrapVue from 'bootstrap-vue'
+import 'bootstrap/dist/css/bootstrap.css'
+import 'bootstrap-vue/dist/bootstrap-vue.css'
 
+// config/dev.env.js file contains those definitions.
 Parse.initialize(process.env.PARSE_SERVER_APPLICATION_ID)
 Parse.serverURL = process.env.PARSE_SERVER_URL
 
 Vue.config.productionTip = false
 
+Vue.use(BootstrapVue)
+
 /* eslint-disable no-new */
 new Vue({
  el: '#app',