|
| 1 | +# vue-3-function-based-examples |
| 2 | + |
| 3 | +> Examples built with the new Vue 3 function-based component API |
| 4 | + |
| 5 | +## Getting Started |
| 6 | + |
| 7 | +As announced, in version 3 of Vue.js (the release will probably be in the third quarter of 2019, you can see the complete roadmap [here](https://github.com/vuejs/vue/projects/6)) there will be an important introduction: the function-based component API. But what exactly are they? |
| 8 | + |
| 9 | +Introduced as an RFC for 3.x, the new API presents a clean and flexible way to compose logic between and inside components. Must be specified that for now, it is an **open RFC** which means it's not set in stone and can change based on users feedback. |
| 10 | + |
| 11 | +### Prerequisites |
| 12 | + |
| 13 | +For this project you need [__Node__](https://nodejs.org/en/) installed on your machine with [__Npm__](https://www.npmjs.com/) or [__Yarn__](https://yarnpkg.com). |
| 14 | + |
| 15 | +**If you want** you can install the official [Vue CLI](https://cli.vuejs.org/). You can add it typing, inside a terminal: |
| 16 | +```bash |
| 17 | +npm install -g @vue/cli |
| 18 | +# OR |
| 19 | +yarn global add @vue/cli |
| 20 | +``` |
| 21 | + |
| 22 | +### Install the function-based API |
| 23 | + |
| 24 | +You can install it, inside your Vue.js 2.x application via npm or yarn: |
| 25 | + |
| 26 | +``` |
| 27 | +npm install vue-function-api |
| 28 | +# OR |
| 29 | +yarn add install vue-function-api |
| 30 | +``` |
| 31 | +Or add it via CDN if you not using the CLI: |
| 32 | + |
| 33 | +```html |
| 34 | +<script src="https://unpkg.com/vue-function-api/dist/vue-function-api.umd.js"></script> |
| 35 | +``` |
| 36 | + |
| 37 | +### Use the plugin |
| 38 | + |
| 39 | +Last step: add the package to your Vue app: |
| 40 | + |
| 41 | +```javascript |
| 42 | +import Vue from 'vue' |
| 43 | +import { plugin } from 'vue-function-api' |
| 44 | + |
| 45 | +Vue.use(plugin) |
| 46 | +``` |
| 47 | +And we are ready! 🚀 |
| 48 | + |
| 49 | +### Clone this repository |
| 50 | + |
| 51 | +You can clone this repository using __Git__: |
| 52 | +```bash |
| 53 | +git clone https://github.com/dj0nny/vue-3-function-based.git |
| 54 | +``` |
| 55 | + |
| 56 | +Or download the repository [here](https://github.com/dj0nny/vue-3-function-based.git) |
| 57 | + |
| 58 | +--- |
| 59 | + |
| 60 | +Before using the apps, you need to install the dependencies. Open a terminal and type, inside the directory: |
| 61 | + |
| 62 | +```bash |
| 63 | +npm install |
| 64 | +# OR |
| 65 | +yarn install |
| 66 | +``` |
| 67 | +For running them: |
| 68 | +```bash |
| 69 | +npm run serve |
| 70 | +# OR |
| 71 | +yarn serve |
| 72 | +``` |
| 73 | +The Vue development server it will be up and running at this address: http://localhost:8080. |
| 74 | + |
| 75 | +## Built with ❤️ using: |
| 76 | + |
| 77 | +* [Vue.js](https://vuejs.org/) - A Javascript framework |
| 78 | +* [Vue Function API](https://github.com/vuejs/vue-function-api) - provides function api from Vue3.x to Vue2.x for developing next-generation Vue applications. |
| 79 | + |
| 80 | +## Contributing |
| 81 | + |
| 82 | +Pull Requests for adding features ⇄ and ★ are welcome 😎 |
0 commit comments