feat(docs): prepare for 1.0.0-beta

bootstrap-vue · Aug 11, 2017 · 8e46552 · 8e46552
1 parent dc8d238
commit 8e46552
Show file tree

Hide file tree

Showing 20 changed files with 351 additions and 309 deletions.
diff --git a/README.md b/README.md
@@ -29,64 +29,17 @@
 
 </p>
 
-> [Bootstrap 4](https://v4-alpha.getbootstrap.com/) components for [Vue.js 2](https://vuejs.org/)
+> [Bootstrap 4](https://getbootstrap.com/docs/4.0) components for [Vue.js](https://vuejs.org)
 
 # Links
 
 - 📘 [Documentation](https://bootstrap-vue.js.org)
+- ▶ [Playground](https://bootstrap-vue.js.org/play)
 - 🔥 [Release Notes](https://github.com/bootstrap-vue/bootstrap-vue/releases)
-- 🔨 [Change Log](https://bootstrap-vue.js.org/docs/changelog)
 - 💬 [Slack Community](https://bootstrap-vue.now.sh)
 
 # Quick Start
-Please refer to [Official Documentation](https://bootstrap-vue.github.io) for setup guide, examples and documentation.
-
-1. Download dependencies:
-```bash
-yarn add bootstrap-vue
-yarn add bootstrap@4.0.0-alpha.6
-yarn add -D style-loader
-```
-
-2. Register BootstrapVue in your app entrypoint:
-```js
-import Vue from 'vue'
-import BootstrapVue from 'bootstrap-vue'
-
-Vue.use(BootstrapVue)
-```
-
-3. Import styles using style-loader:
-```js
-import 'bootstrap/dist/css/bootstrap.css'
-import 'bootstrap-vue/dist/bootstrap-vue.css'
-```
-
-##### For users of Webpack or Webpack-Simple from `vue-cli` follow these instructions:
-1. Download the dependencies:
-```bash
-yarn add bootstrap-vue
-yarn add bootstrap@4.0.0-alpha.6
-yarn add -D style-loader
-```
-
-2. In `src/main.js`, add the following lines, in priority order:
-```js
-import Vue from 'vue'
-/* ( there may be other imports here ) */
-import BootstrapVue from 'bootstrap-vue/dist/bootstrap-vue.esm'
-import 'bootstrap-vue/dist/bootstrap-vue.css'
-import 'bootstrap/dist/css/bootstrap.css'
-/* ( there may be other imports here ) */
-
-Vue.use(BootstrapVue)
-```
-
-#### Note on style-loader:
-If you are unable or do not want to add style-loader as a developer dependency, you have to
-manually include both [Bootstrap's](https://v4-alpha.getbootstrap.com/getting-started/download/)
-and [BootstrapVue's](https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css) CSS files
-in your bundle or reference them from `static/` via `index.html`.
+Please refer to [Official Documentation](https://bootstrap-vue.js.org) for setup guide, examples and documentation.
 
 # License
 MIT
diff --git a/docs/README.md b/docs/README.md
@@ -1,21 +1,122 @@
-# Introduction
+# Quick start
 
-> **Bootstrap** is the world’s most popular framework for building responsive, mobile-first sites and applications. Inside you’ll find high quality HTML, CSS, and JavaScript to make starting any project easier than ever. 
+### Nuxt.js
+You can use official [Nuxt.js](https://nuxtjs.org) module to add BootstrapVue support. ([module docs](https://github.com/nuxt-community/modules/tree/master/modules/bootstrap-vue))
 
->**Vue.js** is a library that focuses heavily on the ViewModel—the two-way data bindings that tie what we see and interact with on the screen with the application's data mode. 
+- Add `@nuxtjs/bootstrap-vue` dependency using yarn or npm to your project
+- Add `@nuxtjs/bootstrap-vue` to modules section of **nuxt.config.js**
 
->This library, **BootstrapVue**, helps you quickly integrate Bootstrap 4 components with Vue.js 2.
+```js
+{
+  modules: [
+    '@nuxtjs/bootstrap-vue',
 
-## Setup
-To get started use [Quick Start](/docs/setup) guide.
-
+    // Or if you have custom bootstrap CSS...
+    ['@nuxtjs/bootstrap-vue', { css: false }],
+  ]
+}
+```
+
+### Webpack
+If you are using module bundlers such as Webpack, Rollup, Laravel elixir/mix, etc you may prefer directly include package
+into your project. To get started use yarn or npm to get latest version first:
+
+```bash
+yarn add bootstrap-vue # or npm i bootstrap-vue
+```
+
+Then, register BootstrapVue plugin in your app entry point:
+
+```js
+import Vue from 'vue'
+import BootstrapVue from 'bootstrap-vue'
+
+Vue.use(BootstrapVue);
+```
+
+And import styles: (needs `style-loader`)
+
+```js
+import 'bootstrap/dist/css/bootstrap.css'
+import 'bootstrap-vue/dist/bootstrap-vue.css'
+```
+
+**Note:** If you are unable or do not want to add style-loader as a dev dependency, you have to
+manually include both [Bootstrap](https://v4-alpha.getbootstrap.com/getting-started/download/)
+and [BootstrapVue](https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css) CSS files
+in your bundle or reference them from `static/` via `index.html`.
+
+### vue-cli
+
+Download the dependencies:
+
+```bash
+yarn add --dev bootstrap-vue style-loader
+```
+
+In `src/main.js`, add the following lines, in priority order:
+
+```js
+import Vue from 'vue'
+import BootstrapVue from 'bootstrap-vue'
+/* ...there may be other imports here */
+import 'bootstrap-vue/dist/bootstrap-vue.css'
+import 'bootstrap/dist/css/bootstrap.css'
+
+Vue.use(BootstrapVue)
+```
+
+### Individual components and directives
+If for any reason just want to use a specific component, you can do this by directly importing that component.
+This is not recommended as entire package gzipped size is ~15Kb!
+
+```js
+import { bAlert, bBtn, bCollapse } from 'bootstrap-vue/lib/components'
+import { bToggle, bScrollspy } from 'bootstrap-vue/lib/directives'
+
+new Vue({
+  // ...
+  components: {
+    bAlert,
+    bBtn,
+    bCollapse
+  },
+  directives: {
+    bToggle,
+    bScrollspy
+  },
+  // ...
+})
+```
+### Browser
+
+```html
+<!-- Add this to <head> -->
+<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap@next/dist/css/bootstrap.min.css"/>
+<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/>
+
+<!-- Add this after vue.js -->
+<script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
+<script src="//unpkg.com/tether@latest/dist/js/tether.min.js"></script>
+<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
+```
+
+## Build variants
+Choosing the best variant for your build environment / packager helps less bundle sizes.
+If your bundler supports es modules, it will automatically prefer it over commonjs.
+
+| Variant        | Environments         | Package path
+| -------------- | -------------------- | -----------------------------------
+| **ES Module**  | Webpack 2 / Rollup   | `dist/bootstrap-vue.esm.js`
+| commonjs2      | Webpack 1 / ...      | `dist/bootstrap-vue.common.js`
+| UMD            | Browser              | `dist/bootstrap-vue.js`
 
 ## Migrating a project already using Bootstrap
 If you've already been using Bootstrap 4, there are a couple adjustments you may need to make to your project:
 
-- remove the bootstrap.js file from your page scripts or build pipeline
-- if Bootstrap is the only thing relying on jQuery, you can safely remove it — BootstrapVue **does not** depend on jQuery
-- don't forget to include the `bootstrap-vue.css` file!
+- Remove the bootstrap.js file from your page scripts or build pipeline
+- If Bootstrap is the only thing relying on jQuery, you can safely remove it — BootstrapVue **does not** depend on jQuery
+- Don't forget to include the `bootstrap-vue.css` file!
 
 ## Browsers Support
 
@@ -34,5 +135,5 @@ If you want to support older IE, Android and IOS devices, you may want to use
 **IE 11**
 
 You'll need babel-polyfill for BootstrapVue to work properly. In order to support this browser: 
-- npm install babel-polyfill --save
+- `npm install babel-polyfill`
 - Import it in your app main entry point with `import 'babel-polyfill'`
diff --git a/docs/SETUP.md b/docs/SETUP.md
diff --git a/docs/index.js b/docs/index.js
@@ -9,9 +9,9 @@ export default {
             title: 'BootstrapVue',
             slug: '',
             pages: [
-                {title: 'Quick Start', slug: 'setup'},
+                {title: 'Quick Start', slug: '/'},
                 {title: 'Contributing', slug: 'contributing'},
-                {title: 'Change Log', slug: 'changelog'}
+                {title: 'Release Notes', slug: 'changelog'}
             ]
         },
         {

diff --git a/docs/nuxt/assets/css/docs.min.css b/docs/nuxt/assets/css/docs.min.css
diff --git a/docs/nuxt/assets/css/styles.css b/docs/nuxt/assets/css/styles.css
@@ -9,12 +9,9 @@
     transform: scale(1.01);
 }
 
-body, .nav-link {
-    font-family: 'Open Sans', sans-serif;
-}
-
 .hljs {
     font-family: "Inconsolata", "Monaco", "Andale Mono", "Lucida Console", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;
+    font-size: 17px;
     overflow-x: auto;
     position: relative;
     background-color: #f9f9f9;
@@ -32,16 +29,6 @@ code {
     color: #795da3;
 }
 
-.bd-masthead {
-    color: white;
-    background-image: none !important;
-    background-color:  #4fc08d;
-}
-
-.bd-masthead .lead {
-    color: white;
-}
-
 blockquote {
     font-size: 1.25rem;
     font-weight: 300;
@@ -56,10 +43,6 @@ blockquote {
     z-index: 100 !important;
 }
 
-.vue-example {
-    margin: 20px;
-}
-
 pre.editable:after {
     content: '(double click to edit)';
     position: absolute;
@@ -83,3 +66,11 @@ pre.editable:hover:after {
 pre.editable.live:after {
     content: 'Live';
 }
+
+.bd-footer {
+    padding: 4rem 0;
+    margin-top: 4rem;
+    font-size: 85%;
+    text-align: center;
+    background-color: #f7f7f7;
+}
diff --git a/docs/nuxt/includes/footer.vue → docs/nuxt/components/footer.vue b/docs/nuxt/includes/footer.vue → docs/nuxt/components/footer.vue