├── .gitignore ├── LICENSE ├── README.md ├── _config.yml ├── assets ├── data.ai ├── hn-architecture.ai ├── icons.psd ├── lifecycle.ai ├── logo.ai ├── mvvm.ai ├── props_and_events.ai ├── state.ai └── why-vue │ ├── chinese.js.srt │ ├── english.js.srt │ └── french.js.srt ├── oldGuide ├── class-and-style.md ├── comparison.md ├── components-custom-events.md ├── components-dynamic-async.md ├── components-edge-cases.md ├── components-props.md ├── components-registration.md ├── components-slots.md ├── components.md ├── computed.md ├── conditional.md ├── custom-directive.md ├── deployment.md ├── events.md ├── filters.md ├── forms.md ├── index.md ├── installation.md ├── instance.md ├── join.md ├── list.md ├── migration-vue-router.md ├── migration-vuex.md ├── migration.md ├── mixins.md ├── plugins.md ├── reactivity.md ├── render-function.md ├── routing.md ├── single-file-components.md ├── ssr.md ├── state-management.md ├── syntax.md ├── team.md ├── transitioning-state.md ├── transitions.md ├── typescript.md └── unit-testing.md ├── package-lock.json ├── package.json ├── src ├── _posts │ ├── 011-component.md │ ├── 012-release.md │ ├── 1.0.0-release.md │ ├── announcing-2.0.md │ ├── common-gotchas.md │ ├── march-update.md │ ├── vue-011-release.md │ ├── vue-cli.md │ ├── vue-next.md │ ├── vuejs-010-release.md │ └── why-no-template-url.md ├── declarative.md ├── docs │ ├── FAQ.md │ ├── animations.md │ ├── api │ │ └── index.md │ ├── basic-components.md │ ├── community-libraries-doc.md │ ├── community-libraries │ │ ├── icons.md │ │ ├── lottie.md │ │ └── maps.md │ ├── composing.md │ ├── conditional.md │ ├── contribution.md │ ├── cookbook │ │ ├── adding-instance-properties.md │ │ ├── creating-custom-scroll-directives.md │ │ ├── debugging-in-vscode.md │ │ ├── editable-svg-icons.md │ │ ├── form-validation.md │ │ ├── index.md │ │ ├── serverless-blog.md │ │ ├── unit-testing-vue-components.md │ │ └── using-axios-to-consume-apis.md │ ├── device-apis.md │ ├── examples │ │ ├── commits.md │ │ ├── deepstream.md │ │ ├── elastic-header.md │ │ ├── firebase.md │ │ ├── grid-component.md │ │ ├── hackernews.md │ │ ├── index.md │ │ ├── modal.md │ │ ├── select2.md │ │ ├── svg.md │ │ ├── todomvc.md │ │ └── tree-view.md │ ├── handle-user-input.md │ ├── how-does-it-work.md │ ├── index.md │ ├── installation.md │ ├── react-native.md │ ├── ready.md │ ├── render-prop.md │ ├── slots.md │ ├── style-guide │ │ └── index.md │ ├── testing.md │ └── vue-native-router.md ├── getting-started.md ├── images │ ├── animation-flip-first.gif │ ├── animation-flip-full.gif │ ├── animation-loading.gif │ ├── animation-rotate-end-frame.png │ ├── animation-rotate-move-full.gif │ ├── animation-rotate-only.gif │ ├── animation-rotate-start-frame.png │ ├── animation-stagger.gif │ ├── breakpoint_hit.png │ ├── breakpoint_set.png │ ├── btn_click_counter_demo.gif │ ├── btn_helloWorld.png │ ├── btn_helloWorld_press.png │ ├── components.png │ ├── config_add.png │ ├── data.png │ ├── devtools-timetravel.gif │ ├── dom-tree.png │ ├── e-com.png │ ├── e-commerce.png │ ├── grow-animation-end-frame.png │ ├── grow-animation-start.png │ ├── grow-animation.gif │ ├── growAnimation-once.gif │ ├── growAnimation-single-bounce.gif │ ├── helloWorld.png │ ├── hn-architecture.png │ ├── hn.png │ ├── icons-example │ ├── iosphone.png │ ├── lifecycle.png │ ├── logged-proxied-data.png │ ├── logo-market.png │ ├── logo_new.png │ ├── lottie.gif │ ├── maps-example.JPG │ ├── mvvm.png │ ├── native-starter.png │ ├── native.png │ ├── native2.png │ ├── nativebase-vue.png │ ├── props-events.png │ ├── push-notification.gif │ ├── slack_icon.png │ ├── state.png │ ├── todo_item.png │ ├── transition.png │ ├── typescript-type-error.png │ ├── v-model-input.gif │ ├── vFor_text_list.png │ ├── vue-component-with-preprocessors.png │ ├── vue-component.png │ ├── vue-ecommerce.png │ ├── vue-market.png │ ├── vue-native-starter-app.gif │ ├── vue-native.png │ └── vuetron-heirarchy.gif ├── index.md ├── menu │ └── index.md ├── perf │ └── index.md └── support-vuejs │ └── index.md └── themes └── vueNative ├── _config.yml ├── layout ├── icons │ ├── bch.ejs │ ├── btc.ejs │ ├── eth.ejs │ ├── github-dark.ejs │ ├── github.ejs │ ├── ltc.ejs │ ├── medium.ejs │ ├── play.ejs │ └── twitter.ejs ├── index.ejs ├── layout.ejs ├── page.ejs ├── partials │ ├── ad-text.ejs │ ├── ad.ejs │ ├── conf.ejs │ ├── ecosystem_dropdown.ejs │ ├── header.ejs │ ├── language_dropdown.ejs │ ├── learn_dropdown.ejs │ ├── main_menu.ejs │ ├── sidebar.ejs │ ├── sponsors.ejs │ ├── support_vue_dropdown.ejs │ └── toc.ejs ├── post.ejs └── sponsors-page.ejs └── source ├── browserconfig.xml ├── css ├── _ad.styl ├── _animations.styl ├── _api.styl ├── _common.styl ├── _demo.styl ├── _header.styl ├── _migration.styl ├── _modal.styl ├── _offline-menu.styl ├── _settings.styl ├── _sidebar.styl ├── _sponsors-index.styl ├── _sponsors-page.styl ├── _sponsors-sidebar.styl ├── _style-guide.styl ├── _syntax.styl ├── _team.styl ├── benchmark.styl ├── index.styl ├── page.styl └── search.styl ├── images ├── 100offer.png ├── 2mhost.png ├── aaha.png ├── actualize.png ├── anymod.png ├── bit-wide.png ├── bit.png ├── bmqb.png ├── chaitin.png ├── check.png ├── codepilot.png ├── coin-bch.png ├── coin-btc.png ├── coin-eth.png ├── coin-ltc.png ├── conf.png ├── datacamp.png ├── down.png ├── famebroker.png ├── feed.png ├── frontend-love.png ├── frontend-meetups.png ├── hackr-io.png ├── hello_world.jpg ├── htmlburger.png ├── icons.png ├── icons │ ├── android-icon-144x144.png │ ├── android-icon-192x192.png │ ├── android-icon-36x36.png │ ├── android-icon-48x48.png │ ├── android-icon-72x72.png │ ├── android-icon-96x96.png │ ├── apple-icon-114x114.png │ ├── apple-icon-120x120.png │ ├── apple-icon-144x144.png │ ├── apple-icon-152x152.png │ ├── apple-icon-180x180.png │ ├── apple-icon-57x57.png │ ├── apple-icon-60x60.png │ ├── apple-icon-72x72.png │ ├── apple-icon-76x76.png │ ├── apple-icon-precomposed.png │ ├── apple-icon.png │ ├── browserconfig.xml │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── favicon-96x96.png │ ├── favicon.ico │ ├── manifest.json │ ├── ms-icon-144x144.png │ ├── ms-icon-150x150.png │ ├── ms-icon-310x310.png │ └── ms-icon-70x70.png ├── icons8.png ├── icons_v │ ├── android-icon-144x144.png │ ├── android-icon-192x192.png │ ├── android-icon-36x36.png │ ├── android-icon-48x48.png │ ├── android-icon-72x72.png │ ├── android-icon-96x96.png │ ├── apple-icon-114x114.png │ ├── apple-icon-120x120.png │ ├── apple-icon-144x144.png │ ├── apple-icon-152x152.png │ ├── apple-icon-180x180.png │ ├── apple-icon-57x57.png │ ├── apple-icon-60x60.png │ ├── apple-icon-72x72.png │ ├── apple-icon-76x76.png │ ├── apple-icon-precomposed.png │ ├── apple-icon.png │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── favicon-96x96.png │ ├── favicon.ico │ ├── ms-icon-144x144.png │ ├── ms-icon-150x150.png │ ├── ms-icon-310x310.png │ └── ms-icon-70x70.png ├── infinitynewtab.png ├── itunescn.png ├── jsfiddle.png ├── jsguru.png ├── juejin.png ├── kitchenSink.gif ├── landing.png ├── laravel.png ├── logo.png ├── menu.png ├── monterail.png ├── neds.png ├── onsen-ui.png ├── original_vue_logo.png ├── patreon.png ├── paypal.png ├── search.png ├── someline.png ├── stdlib.png ├── strikingly.png ├── tde.png ├── teamextension.png ├── tmvuejs2.png ├── to-do.gif ├── tooltwist.png ├── valuecoders.png ├── vehikl.png ├── vuejobs.png ├── vuejobs.svg ├── vuejsadmin.png ├── vueschool.png ├── vuetify.png └── xfive.png ├── js ├── common.js ├── css.escape.js ├── smooth-scroll.min.js ├── vue.js └── vue.min.js └── manifest.json /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | Thumbs.db 3 | db.json 4 | *.log 5 | node_modules/ 6 | public/ 7 | dist/ 8 | .deploy*/ 9 | src/_drafts 10 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2013-present Yuxi Evan You 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## ⚠️ This project has been deprecated and is no longer maintained ⚠️ 2 | 3 | # vue-native.io 4 | 5 | This site is built with [hexo](http://hexo.io/). Site content is written in Markdown format located in `src`. Pull requests welcome! 6 | 7 | ## Developing 8 | 9 | ```bash 10 | $ npm install 11 | $ npm start # dev server at http://localhost:4000 12 | $ npm run build 13 | ``` 14 | -------------------------------------------------------------------------------- /assets/data.ai: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GeekyAnts/vue-native-website/a8817b2662fa1016ec3f4dd402f04c046e91ecec/assets/data.ai -------------------------------------------------------------------------------- /assets/hn-architecture.ai: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GeekyAnts/vue-native-website/a8817b2662fa1016ec3f4dd402f04c046e91ecec/assets/hn-architecture.ai -------------------------------------------------------------------------------- /assets/icons.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GeekyAnts/vue-native-website/a8817b2662fa1016ec3f4dd402f04c046e91ecec/assets/icons.psd -------------------------------------------------------------------------------- /assets/lifecycle.ai: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GeekyAnts/vue-native-website/a8817b2662fa1016ec3f4dd402f04c046e91ecec/assets/lifecycle.ai -------------------------------------------------------------------------------- /assets/logo.ai: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GeekyAnts/vue-native-website/a8817b2662fa1016ec3f4dd402f04c046e91ecec/assets/logo.ai -------------------------------------------------------------------------------- /assets/mvvm.ai: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GeekyAnts/vue-native-website/a8817b2662fa1016ec3f4dd402f04c046e91ecec/assets/mvvm.ai -------------------------------------------------------------------------------- /assets/props_and_events.ai: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GeekyAnts/vue-native-website/a8817b2662fa1016ec3f4dd402f04c046e91ecec/assets/props_and_events.ai -------------------------------------------------------------------------------- /assets/state.ai: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GeekyAnts/vue-native-website/a8817b2662fa1016ec3f4dd402f04c046e91ecec/assets/state.ai -------------------------------------------------------------------------------- /oldGuide/filters.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Filters 3 | type: guide 4 | order: 305 5 | --- 6 | 7 | Vue.js allows you to define filters that can be used to apply common text formatting. Filters are usable in two places: **mustache interpolations and `v-bind` expressions** (the latter supported in 2.1.0+). Filters should be appended to the end of the JavaScript expression, denoted by the "pipe" symbol: 8 | 9 | ``` html 10 | 11 | {{ message | capitalize }} 12 | 13 | 14 |
15 | ``` 16 | 17 | You can define local filters in a component's options: 18 | 19 | ``` js 20 | filters: { 21 | capitalize: function (value) { 22 | if (!value) return '' 23 | value = value.toString() 24 | return value.charAt(0).toUpperCase() + value.slice(1) 25 | } 26 | } 27 | ``` 28 | 29 | or define a filter globally before creating the Vue instance: 30 | 31 | ``` js 32 | Vue.filter('capitalize', function (value) { 33 | if (!value) return '' 34 | value = value.toString() 35 | return value.charAt(0).toUpperCase() + value.slice(1) 36 | }) 37 | 38 | new Vue({ 39 | // ... 40 | }) 41 | ``` 42 | 43 | Below is an example of our `capitalize` filter being used: 44 | 45 | {% raw %} 46 |
47 | 48 |

{{ message | capitalize }}

49 |
50 | 67 | {% endraw %} 68 | 69 | The filter's function always receives the expression's value (the result of the former chain) as its first argument. In the above example, the `capitalize` filter function will receive the value of `message` as its argument. 70 | 71 | Filters can be chained: 72 | 73 | ``` html 74 | {{ message | filterA | filterB }} 75 | ``` 76 | 77 | In this case, `filterA`, defined with a single argument, will receive the value of `message`, and then the `filterB` function will be called with the result of `filterA` passed into `filterB`'s single argument. 78 | 79 | Filters are JavaScript functions, therefore they can take arguments: 80 | 81 | ``` html 82 | {{ message | filterA('arg1', arg2) }} 83 | ``` 84 | 85 | Here `filterA` is defined as a function taking three arguments. The value of `message` will be passed into the first argument. The plain string `'arg1'` will be passed into the `filterA` as its second argument, and the value of expression `arg2` will be evaluated and passed in as the third argument. 86 | -------------------------------------------------------------------------------- /oldGuide/installation.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Installation 3 | type: guide 4 | order: 1 5 | vue_version: 2.5.13 6 | gz_size: "30.67" 7 | --- 8 | 9 | This page will help you install and build your first native app using [Vue Native](https://vue-native.io/). 10 | 11 | **System Requirements** 12 | * Globally installed [node](https://nodejs.org/en/) >= 6.0 13 | * Globally installed [npm](https://www.npmjs.com/) >= 4.0 14 | * Globally installed [React Native CLI](https://facebook.github.io/react-native/docs/getting-started.html) which allow you to easily create and initialize projects. 15 | 16 | ## Setup with React Native 17 | 18 | ** Step 1 Create React Native Project ** 19 | 20 | ``` 21 | react-native init 22 | cd 23 | ``` 24 | 25 | ** Step 2 Install Vue Native** 26 | 27 | ``` 28 | npm install vue-native-core vue-native-helper --save 29 | npm install vue-native-scripts --save-dev 30 | ``` 31 | 32 | ** Step 3 Configure the React Native Packager** 33 | 34 | Create `vueTransformerPlugin.js` file to your project's root and specify supported extensions(vue): 35 | 36 | ```js 37 | // For React Native version 0.52 or later 38 | var upstreamTransformer = require("metro/src/transformer"); 39 | 40 | // For React Native version 0.47-0.51 41 | // var upstreamTransformer = require("metro-bundler/src/transformer"); 42 | 43 | // For React Native version 0.46 44 | // var upstreamTransformer = require("metro-bundler/build/transformer"); 45 | 46 | var vueNaiveScripts = require("vue-native-scripts"); 47 | var vueExtensions = ["vue"]; 48 | 49 | module.exports.transform = function({ src, filename, options }) { 50 | if (vueExtensions.some(ext => filename.endsWith("." + ext))) { 51 | return vueNaiveScripts.transform({ src, filename, options }); 52 | } 53 | return upstreamTransformer.transform({ src, filename, options }); 54 | }; 55 | ``` 56 | 57 | Add this to your `rn-cli.config.js` (make one to your project's root if you don't have one already): 58 | 59 | ```js 60 | module.exports = { 61 | getTransformModulePath() { 62 | return require.resolve("./vueTransformerPlugin.js"); 63 | }, 64 | getSourceExts() { 65 | return ["vue"]; 66 | } 67 | }; 68 | ``` 69 | 70 | You've successfully setup [Vue Native](https://vue-native.io/) with your [React Native](https://facebook.github.io/react-native/) app. Now build truly native app which are ready to run on iOS and Android devices. 71 | 72 | Check out the [KitchenSink Vue Native App](https://github.com/GeekyAnts/KitchenSink-Vue-Native) an example which demonstrate different usages of [Vue Native](https://vue-native.io/) and [NativeBase](https://nativebase.io). 73 | 74 | ** Step 4 Running The App ** 75 | 76 | ``` 77 | react-native run-ios 78 | ``` 79 | 80 | It will open your app in the iOS Simulator if you're on a Mac and have it installed. 81 | 82 | ``` 83 | react-native run-android 84 | ``` 85 | 86 | It will open your app in the Android Emulator if you have properly setup android studio and emulator. 87 | 88 | 89 | For details installation, please refer to [Getting Started With React Native Docs](https://facebook.github.io/react-native/docs/getting-started.html) 90 | 91 | ## Setup with Vue Native Cli 92 | 93 | [Vue Native Cli](https://github.com/GeekyAnts/vue-native-cli) is the easiest way to start building a application using [Vue Native](https://vue-native.io/). 94 | 95 | Assuming that you have globally installed [create-react-native-app](https://github.com/react-community/create-react-native-app). 96 | 97 | ** Step 1 Running The App ** 98 | 99 | ``` 100 | npm install -g vue-native-cli 101 | vue-native init 102 | cd 103 | ``` 104 | 105 | ** Step 2 Running The App ** 106 | 107 | ``` 108 | npm start 109 | 110 | ``` 111 | Runs your app in development mode with an interactive prompt. To run it without a prompt, use the --no-interactive flag. 112 | Open it in the [Expo app](https://expo.io/) on your phone to view it. It will reload if you save edits to your files, and you will see build errors and logs in the terminal. 113 | 114 | ``` 115 | npm run ios 116 | 117 | ``` 118 | 119 | Like npm start, but also attempts to open your app in the iOS Simulator if you're on a Mac and have it installed. 120 | 121 | ``` 122 | npm run android 123 | 124 | ``` 125 | 126 | Like npm start, but also attempts to open your app on a connected Android device or emulator. Requires an installation of Android build tools (see [React Native docs](https://facebook.github.io/react-native/docs/getting-started.html)) for detailed setup). 127 | -------------------------------------------------------------------------------- /oldGuide/join.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Join the Vue.js Community! 3 | type: guide 4 | order: 802 5 | --- 6 | 7 | Vue's community is growing incredibly fast and if you're reading this, there's a good chance you're ready to join it. So... welcome! 8 | 9 | Now we'll answer both what the community can do for you and what you can do for the community. 10 | 11 | ## Resources You'll Enjoy 12 | 13 | ### Get Support 14 | 15 | - [Forum](https://forum.vuejs.org/): The best place to ask questions and get answers about Vue and its ecosystem. 16 | - [Chat](https://chat.vuejs.org/): A place for Vue devs to meet and chat in real time. 17 | - [GitHub](https://github.com/vuejs): If you have a bug to report or feature to request, that's what the GitHub issues are for. We also welcome pull requests! 18 | 19 | ### Explore the Ecosystem 20 | 21 | - [The Awesome Vue Page](https://github.com/vuejs/awesome-vue): See what other awesome resources have been published by other awesome people. 22 | - [The "Show and Tell" Subforum](https://forum.vuejs.org/c/show-and-tell): Another great place to check out what others have built with and for the growing Vue ecosystem. 23 | 24 | ## What You Can Do 25 | 26 | ### Contribute Code 27 | 28 | As with any project, there are rules to contributing. To ensure that we can help you or accept your pull request as quickly as possible, please read [the contributing guide](https://github.com/vuejs/vue/blob/dev/.github/CONTRIBUTING.md). 29 | 30 | After that, you'll be ready to contribute to Vue's core repositories: 31 | 32 | - [vue](https://github.com/vuejs/vue): the core library 33 | - [vuex](https://github.com/vuejs/vuex): Flux-inspired state management 34 | - [vue-router](https://github.com/vuejs/vue-router): a routing system for SPAs 35 | 36 | ...as well as many smaller official [companion libraries](https://github.com/vuejs). 37 | 38 | ### Share (and Build) Your Experience 39 | 40 | Apart from answering questions and sharing resources in the forum and chat, there are a few other less obvious ways to share and expand what you know: 41 | 42 | - **Develop learning materials.** It's often said that the best way to learn is to teach. If there's something interesting you're doing with Vue, strengthen your expertise by writing a blog post, developing a workshop, or even publishing a gist that you share on social media. 43 | - **Watch a repo you care about.** This will send you notifications whenever there's activity in that repository, giving you insider knowledge about ongoing discussions and upcoming features. It's a fantastic way to build expertise so that you're eventually able to help address issues and pull requests. 44 | 45 | ### Translate Docs 46 | 47 | Vue has already spread across the globe, with even the core team in at least half a dozen timezones. [The forum](https://forum.vuejs.org/) includes 7 languages and counting and many of our docs have [actively-maintained translations](https://github.com/vuejs?utf8=%E2%9C%93&query=vuejs.org). We're very proud of Vue's international reach, but we can do even better. 48 | 49 | I hope that right now, you're reading this sentence in your preferred language. If not, would you like to help us get there? 50 | 51 | If so, please feel free to fork the repo for [these docs](https://github.com/vuejs/vuejs.org/) or for any other officially maintained documentation, then start translating. Once you've made some progress, open an issue or pull request in the main repo and we'll put out a call for more contributors to help you out. 52 | -------------------------------------------------------------------------------- /oldGuide/migration-vuex.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Migration from Vuex 0.6.x to 1.0 3 | type: guide 4 | order: 703 5 | --- 6 | 7 | > Vuex 2.0 is released, but this guide only covers the migration to 1.0? Is that a typo? Also, it looks like Vuex 1.0 and 2.0 were released simultaneously. What's going on? Which one should I use and what's compatible with Vue 2.0? 8 | 9 | Both Vuex 1.0 and 2.0: 10 | 11 | - fully support both Vue 1.0 and 2.0 12 | - will be maintained for the foreseeable future 13 | 14 | They have slightly different target users however. 15 | 16 | __Vuex 2.0__ is a radical redesign and simplification of the API, for those who are starting new projects or want to be on the cutting edge of client-side state management. __It is not covered by this migration guide__, so you should check out [the Vuex 2.0 docs](https://vuex.vuejs.org/en/index.html) if you'd like to learn more about it. 17 | 18 | __Vuex 1.0__ is mostly backwards-compatible, so requires very few changes to upgrade. It is recommended for those with large existing codebases or who want the smoothest possible upgrade path to Vue 2.0. This guide is dedicated to facilitating that process, but only includes migration notes. For the complete usage guide, see [the Vuex 1.0 docs](https://github.com/vuejs/vuex/tree/1.0/docs/en). 19 | 20 | ## `store.watch` with String Property Path replaced 21 | 22 | `store.watch` now only accept functions. So for example, you would have to replace: 23 | 24 | ``` js 25 | store.watch('user.notifications', callback) 26 | ``` 27 | 28 | with: 29 | 30 | ``` js 31 | store.watch( 32 | // When the returned result changes... 33 | function (state) { 34 | return state.user.notifications 35 | }, 36 | // Run this callback 37 | callback 38 | ) 39 | ``` 40 | 41 | This gives you more complete control over the reactive properties you'd like to watch. 42 | 43 | {% raw %} 44 |
45 |

Upgrade Path

46 |

Run the migration helper on your codebase to find examples of store.watch with a string as the first argument.

47 |
48 | {% endraw %} 49 | 50 | ## Store's Event Emitter removed 51 | 52 | The store instance no longer exposes the event emitter interface (`on`, `off`, `emit`). If you were previously using the store as a global event bus, [see this section](migration.html#dispatch-and-broadcast-removed) for migration instructions. 53 | 54 | Instead of using this interface to watch events emitted by the store itself (e.g. `store.on('mutation', callback)`), a new method `store.subscribe` is introduced. Typical usage inside a plugin would be: 55 | 56 | ``` js 57 | var myPlugin = store => { 58 | store.subscribe(function (mutation, state) { 59 | // Do something... 60 | }) 61 | } 62 | 63 | ``` 64 | 65 | See example [the plugins docs](https://github.com/vuejs/vuex/blob/1.0/docs/en/plugins.md) for more info. 66 | 67 | {% raw %} 68 |
69 |

Upgrade Path

70 |

Run the migration helper on your codebase to find examples of store.on, store.off, and store.emit.

71 |
72 | {% endraw %} 73 | 74 | ## Middlewares replaced 75 | 76 | Middlewares are replaced by plugins. A plugin is a function that receives the store as the only argument, and can listen to the mutation event on the store: 77 | 78 | ``` js 79 | const myPlugins = store => { 80 | store.subscribe('mutation', (mutation, state) => { 81 | // Do something... 82 | }) 83 | } 84 | ``` 85 | 86 | For more details, see [the plugins docs](https://github.com/vuejs/vuex/blob/1.0/docs/en/plugins.md). 87 | 88 | {% raw %} 89 |
90 |

Upgrade Path

91 |

Run the migration helper on your codebase to find examples of the middlewares option on a store.

92 |
93 | {% endraw %} 94 | -------------------------------------------------------------------------------- /oldGuide/plugins.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Plugins 3 | type: guide 4 | order: 304 5 | --- 6 | 7 | ## Writing a Plugin 8 | 9 | Plugins usually add global-level functionality to Vue. There is no strictly defined scope for a plugin - there are typically several types of plugins you can write: 10 | 11 | 1. Add some global methods or properties. e.g. [vue-custom-element](https://github.com/karol-f/vue-custom-element) 12 | 13 | 2. Add one or more global assets: directives/filters/transitions etc. e.g. [vue-touch](https://github.com/vuejs/vue-touch) 14 | 15 | 3. Add some component options by global mixin. e.g. [vue-router](https://github.com/vuejs/vue-router) 16 | 17 | 4. Add some Vue instance methods by attaching them to Vue.prototype. 18 | 19 | 5. A library that provides an API of its own, while at the same time injecting some combination of the above. e.g. [vue-router](https://github.com/vuejs/vue-router) 20 | 21 | A Vue.js plugin should expose an `install` method. The method will be called with the `Vue` constructor as the first argument, along with possible options: 22 | 23 | ``` js 24 | MyPlugin.install = function (Vue, options) { 25 | // 1. add global method or property 26 | Vue.myGlobalMethod = function () { 27 | // something logic ... 28 | } 29 | 30 | // 2. add a global asset 31 | Vue.directive('my-directive', { 32 | bind (el, binding, vnode, oldVnode) { 33 | // something logic ... 34 | } 35 | ... 36 | }) 37 | 38 | // 3. inject some component options 39 | Vue.mixin({ 40 | created: function () { 41 | // something logic ... 42 | } 43 | ... 44 | }) 45 | 46 | // 4. add an instance method 47 | Vue.prototype.$myMethod = function (methodOptions) { 48 | // something logic ... 49 | } 50 | } 51 | ``` 52 | 53 | ## Using a Plugin 54 | 55 | Use plugins by calling the `Vue.use()` global method: 56 | 57 | ``` js 58 | // calls `MyPlugin.install(Vue)` 59 | Vue.use(MyPlugin) 60 | ``` 61 | 62 | You can optionally pass in some options: 63 | 64 | ``` js 65 | Vue.use(MyPlugin, { someOption: true }) 66 | ``` 67 | 68 | `Vue.use` automatically prevents you from using the same plugin more than once, so calling it multiple times on the same plugin will install the plugin only once. 69 | 70 | Some plugins provided by Vue.js official plugins such as `vue-router` automatically calls `Vue.use()` if `Vue` is available as a global variable. However in a module environment such as CommonJS, you always need to call `Vue.use()` explicitly: 71 | 72 | ``` js 73 | // When using CommonJS via Browserify or Webpack 74 | var Vue = require('vue') 75 | var VueRouter = require('vue-router') 76 | 77 | // Don't forget to call this 78 | Vue.use(VueRouter) 79 | ``` 80 | 81 | Checkout [awesome-vue](https://github.com/vuejs/awesome-vue#components--libraries) for a huge collection of community-contributed plugins and libraries. 82 | -------------------------------------------------------------------------------- /oldGuide/routing.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Routing 3 | type: guide 4 | order: 501 5 | --- 6 | 7 | ## Official Router 8 | 9 | For most Single Page Applications, it's recommended to use the officially-supported [vue-router library](https://github.com/vuejs/vue-router). For more details, see vue-router's [documentation](https://router.vuejs.org/). 10 | 11 | ## Simple Routing From Scratch 12 | 13 | If you only need very simple routing and do not wish to involve a full-featured router library, you can do so by dynamically rendering a page-level component like this: 14 | 15 | ``` js 16 | const NotFound = { template: '

Page not found

' } 17 | const Home = { template: '

home page

' } 18 | const About = { template: '

about page

' } 19 | 20 | const routes = { 21 | '/': Home, 22 | '/about': About 23 | } 24 | 25 | new Vue({ 26 | el: '#app', 27 | data: { 28 | currentRoute: window.location.pathname 29 | }, 30 | computed: { 31 | ViewComponent () { 32 | return routes[this.currentRoute] || NotFound 33 | } 34 | }, 35 | render (h) { return h(this.ViewComponent) } 36 | }) 37 | ``` 38 | 39 | Combined with the HTML5 History API, you can build a very basic but fully-functional client-side router. To see that in practice, check out [this example app](https://github.com/chrisvfritz/vue-2.0-simple-routing-example). 40 | 41 | ## Integrating 3rd-Party Routers 42 | 43 | If there's a 3rd-party router you prefer to use, such as [Page.js](https://github.com/visionmedia/page.js) or [Director](https://github.com/flatiron/director), integration is [similarly easy](https://github.com/chrisvfritz/vue-2.0-simple-routing-example/compare/master...pagejs). Here's a [complete example](https://github.com/chrisvfritz/vue-2.0-simple-routing-example/tree/pagejs) using Page.js. 44 | -------------------------------------------------------------------------------- /oldGuide/ssr.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Server-Side Rendering 3 | type: guide 4 | order: 503 5 | --- 6 | 7 | ## The Complete SSR Guide 8 | 9 | We have created a standalone guide for creating server-rendered Vue applications. This is a very in-depth guide for those who are already familiar with client-side Vue development, server-side Node.js development and webpack. Check it out at [ssr.vuejs.org](https://ssr.vuejs.org/). 10 | 11 | ## Nuxt.js 12 | 13 | Properly configuring all the discussed aspects of a production-ready server-rendered app can be a daunting task. Luckily, there is an excellent community project that aims to make all of this easier: [Nuxt.js](https://nuxtjs.org/). Nuxt.js is a higher-level framework built on top of the Vue ecosystem which provides an extremely streamlined development experience for writing universal Vue applications. Better yet, you can even use it as a static site generator (with pages authored as single-file Vue components)! We highly recommend giving it a try. 14 | -------------------------------------------------------------------------------- /oldGuide/state-management.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: State Management 3 | type: guide 4 | order: 502 5 | --- 6 | 7 | ## Official Flux-Like Implementation 8 | 9 | Large applications can often grow in complexity, due to multiple pieces of state scattered across many components and the interactions between them. To solve this problem, Vue offers [vuex](https://github.com/vuejs/vuex): our own Elm-inspired state management library. It even integrates into [vue-devtools](https://github.com/vuejs/vue-devtools), providing zero-setup access to [time travel debugging](https://raw.githubusercontent.com/vuejs/vue-devtools/master/media/demo.gif). 10 | 11 | ### Information for React Developers 12 | 13 | If you're coming from React, you may be wondering how vuex compares to [redux](https://github.com/reactjs/redux), the most popular Flux implementation in that ecosystem. Redux is actually view-layer agnostic, so it can easily be used with Vue via [simple bindings](https://yarnpkg.com/en/packages?q=redux%20vue&p=1). Vuex is different in that it _knows_ it's in a Vue app. This allows it to better integrate with Vue, offering a more intuitive API and improved development experience. 14 | 15 | ## Simple State Management from Scratch 16 | 17 | It is often overlooked that the source of truth in Vue applications is the raw `data` object - a Vue instance only proxies access to it. Therefore, if you have a piece of state that should be shared by multiple instances, you can share it by identity: 18 | 19 | ``` js 20 | const sourceOfTruth = {} 21 | 22 | const vmA = new Vue({ 23 | data: sourceOfTruth 24 | }) 25 | 26 | const vmB = new Vue({ 27 | data: sourceOfTruth 28 | }) 29 | ``` 30 | 31 | Now whenever `sourceOfTruth` is mutated, both `vmA` and `vmB` will update their views automatically. Subcomponents within each of these instances would also have access via `this.$root.$data`. We have a single source of truth now, but debugging would be a nightmare. Any piece of data could be changed by any part of our app at any time, without leaving a trace. 32 | 33 | To help solve this problem, we can adopt a **store pattern**: 34 | 35 | ``` js 36 | var store = { 37 | debug: true, 38 | state: { 39 | message: 'Hello!' 40 | }, 41 | setMessageAction (newValue) { 42 | if (this.debug) console.log('setMessageAction triggered with', newValue) 43 | this.state.message = newValue 44 | }, 45 | clearMessageAction () { 46 | if (this.debug) console.log('clearMessageAction triggered') 47 | this.state.message = '' 48 | } 49 | } 50 | ``` 51 | 52 | Notice all actions that mutate the store's state are put inside the store itself. This type of centralized state management makes it easier to understand what type of mutations could happen and how are they triggered. Now when something goes wrong, we'll also have a log of what happened leading up to the bug. 53 | 54 | In addition, each instance/component can still own and manage its own private state: 55 | 56 | ``` js 57 | var vmA = new Vue({ 58 | data: { 59 | privateState: {}, 60 | sharedState: store.state 61 | } 62 | }) 63 | 64 | var vmB = new Vue({ 65 | data: { 66 | privateState: {}, 67 | sharedState: store.state 68 | } 69 | }) 70 | ``` 71 | 72 | ![State Management](/images/state.png) 73 | 74 |

It's important to note that you should never replace the original state object in your actions - the components and the store need to share reference to the same object in order for mutations to be observed.

75 | 76 | As we continue developing the convention where components are never allowed to directly mutate state that belongs to a store, but should instead dispatch events that notify the store to perform actions, we eventually arrive at the [Flux](https://facebook.github.io/flux/) architecture. The benefit of this convention is we can record all state mutations happening to the store and implement advanced debugging helpers such as mutation logs, snapshots, and history re-rolls / time travel. 77 | 78 | This brings us full circle back to [vuex](https://github.com/vuejs/vuex), so if you've read this far it's probably time to try it out! 79 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-native-docs", 3 | "private": true, 4 | "hexo": { 5 | "version": "3.9.0" 6 | }, 7 | "scripts": { 8 | "start": "hexo server", 9 | "build": "hexo clean && hexo generate", 10 | "deploy": "npm run build && hexo deploy" 11 | }, 12 | "dependencies": { 13 | "hexo": "^3.8.0", 14 | "hexo-deployer-git": "0.3.1", 15 | "hexo-generator-alias": "git+https://github.com/chrisvfritz/vuejs.org-hexo-generator-alias.git", 16 | "hexo-generator-archive": "^0.1.5", 17 | "hexo-generator-category": "^0.1.3", 18 | "hexo-generator-feed": "^1.2.2", 19 | "hexo-generator-index": "^0.2.1", 20 | "hexo-generator-tag": "^0.2.0", 21 | "hexo-offline": "^0.2.3", 22 | "hexo-renderer-ejs": "^0.3.1", 23 | "hexo-renderer-marked": "^0.3.0", 24 | "hexo-renderer-stylus": "^0.3.3", 25 | "hexo-server": "^0.3.1", 26 | "request": "^2.85.0" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /src/_posts/011-component.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 0.11 Component Tips 3 | date: 2014-12-08 15:02:14 4 | tags: 5 | --- 6 | 7 |

Note: this post contains information for the outdated 0.11 version. Please refer to the [0.12 release notes](https://github.com/yyx990803/vue/releases) for the changes in the API.

8 | 9 | The release of 0.11 introduced [many changes](https://github.com/yyx990803/vue/blob/master/changes.md), but the most important one is how the new component scope works. Previously in 0.10.x, components have inherited scope by default. That means in a child component template you can reference parent scope properties. This often leads to tightly-coupled components, where a child component assumes knowledge of what properties are present in the parent scope. It is also possible to accidentally refer to a parent scope property in a child component. 10 | 11 | 12 | 13 | ### Isolated Scope and Data Passing 14 | 15 | Starting in 0.11, all child components have isolated scope by default, and the recommended way to control component data access is via [Explicit Data Passing](/guide/components.html#Explicit_Data_Passing) using [`v-with`](/api/directives.html#v-with) or [`paramAttributes`](/api/options.html#paramAttributes). 16 | 17 | `paramAttributes` enables us to write Web Component style templates: 18 | 19 | ``` js 20 | Vue.component('my-component', { 21 | paramAttributes: ['params'], 22 | compiled: function () { 23 | console.log(this.params) // passed from parent 24 | } 25 | }) 26 | ``` 27 | 28 | ``` html 29 | 30 | ``` 31 | 32 | ### Where Does It Belong? 33 | 34 | Previously in 0.10, all directives on a component's container element are compiled in the child component's scope. Because it inherited parent scope, this worked in most situations. Starting in 0.11.1, we want to provide a cleaner separation between component scopes. The rule of thumbs is: if something appears in the parent template, it will be compiled in parent scope; if it appears in child template, it will be compiled in child scope. For example: 35 | 36 | ``` html 37 | 38 |
39 |

{{parentMessage}}

40 |
41 | ``` 42 | 43 | ``` html 44 | 45 |
46 |

{{childMessage}}

47 | 48 |
49 | ``` 50 | 51 | Everything in the parent template will be compiled in the parent's scope, including the content that's going to be inserted into the child component. 52 | 53 | The only exception to the rule is `v-with` (and `paramAttributes` which compiles down to `v-with`), which works in both places - so you don't need to worry about it too much. 54 | 55 | ### Cleaner Event Communication 56 | 57 | Previously the standard way for a child component to communicate to its parent is via dispatching events. However, with this approach, the event listeners on the parent component are not guaranteed to be listening on the desired child component only. It's also possible to trigger undesired listeners further up the chain if we do not cancel the event. 58 | 59 | The most common use case is for a parent to react to the events from a specific, direct child component. So in 0.11.4, [a new directive `v-events`](/api/directives.html#v-events) has been introduced to enable exactly this behavior. 60 | 61 | 0.11.4 has already been released, go try it out! 62 | -------------------------------------------------------------------------------- /src/_posts/1.0.0-release.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Vue.js 1.0.0 Released 3 | date: 2015-10-26 10:00:00 4 | --- 5 | 6 | > Hi HN! If you are not familiar with Vue.js, you might want to read this [blog post](http://blog.evanyou.me/2015/10/25/vuejs-re-introduction/) for a higher level overview. 7 | 8 | After 300+ commits, 8 alphas, 4 betas and 2 release candidates, today I am very proud to announce the release of [Vue.js 1.0.0 Evangelion](https://github.com/vuejs/vue/releases/tag/1.0.0)! Many thanks to all those who participated in the API re-design process - it would not have been possible without all the input from the community. 9 | 10 | 11 | 12 | ### Improved Template Syntax 13 | 14 | The 1.0 template syntax resolves a lot of subtle consistency issues and makes Vue templates more concise and more readable in general. The most notable new feature is the shorthand syntax for `v-on` and `v-bind`: 15 | 16 | ``` html 17 | 18 | 19 | 20 | 21 | 22 | ``` 23 | 24 | When used on a child component, `v-on` listens for custom events and `v-bind` can be used to bind props. The shorthands using child components very succinct: 25 | 26 | ``` html 27 | 31 | 32 | ``` 33 | 34 | ### API Cleanup 35 | 36 | The overall goal for Vue.js 1.0 is to make it suitable for larger projects. This is why there are many API deprecations. Except for ones that are barely used, the most common reason for a deprecation is that the feature leads to patterns that damages maintainability. Specifically, we are deprecating features that make it hard to maintain and refactor a component in isolation without affecting the rest of the project. 37 | 38 | For example, the default asset resolution in 0.12 has implicit fallbacks to parents in the component tree. This makes the assets available to a component non-deterministic and subject how it is used at runtime. In 1.0, all assets are now resolved in strict mode and there are no longer implicit fallbacks to parent. The `inherit` option is also removed, because it too often leads to tightly coupled components that are hard to refactor. 39 | 40 | ### Faster Initial Rendering 41 | 42 | 1.0 replaces the old `v-repeat` directive with `v-for`. In addition to providing the same functionality and more intuitive scoping, `v-for` provides up to **100%** initial render performance boost when rendering large lists and tables! 43 | 44 | ### More Powerful Tooling 45 | 46 | There are also exciting things going on outside of Vue.js core - [vue-loader](https://github.com/vuejs/vue-loader) and [vueify](https://github.com/vuejs/vueify) have received major upgrades including: 47 | 48 | - Hot component reloading. When a `*.vue` component is edited, all of its active instances are hot swapped without reloading the page. This means when making small changes, e.g. tweaking the styles or the template, your app doesn't need to fully reload; the state of the app the swapped component can be preserved, drastically improving the development experience. 49 | 50 | - Scoped CSS. By simply adding a `scoped` attribute to your `*.vue` component style tags, the component's template and final generated CSS are magically re-written to ensure a component's styles are only applied to its own elements. Most importantly, the styles specified in a parent component **does not** leak down to child components nested within it. 51 | 52 | - ES2015 by default. JavaScript is evolving. You can write much cleaner and expressive code using the latest syntax. `vue-loader` and `vueify` now transpiles the JavaScript in your `*.vue` components out of the box, without the need for extra setup. Write future JavaScript today! 53 | 54 | Combined with [vue-router](https://github.com/vuejs/vue-router), Vue.js is now more than a library - it provides a solid foundation for building complex SPAs. 55 | 56 | ### What's Next? 57 | 58 | As what 1.0.0 usually suggests, the core API will stay stable for the foreseeable future and the library is ready for production use. Future development will focus on: 59 | 60 | 1. Improving `vue-router` and make it production ready. 61 | 62 | 2. Streamlining the developer experience, e.g. a better devtool and a CLI for scaffolding Vue.js projects and components. 63 | 64 | 3. Providing more learning resources such as tutorials and examples. 65 | -------------------------------------------------------------------------------- /src/_posts/common-gotchas.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Common Beginner Gotchas 3 | date: 2016-02-06 10:00:00 4 | --- 5 | 6 | There are few types of questions that we frequently see from users who are new to Vue.js. Although they are all mentioned somewhere in the guide, they are easy to miss and can be hard to find when you do get bitten by the gotchas. Therefore we are aggregating them in this post and hopefully it can save you some time! 7 | 8 | 9 | 10 | ### Why isn't the DOM updating? 11 | 12 | Most of the time, when you change a Vue instance's data, the view updates. But there are two edge cases: 13 | 14 | 1. When you are **adding a new property** that wasn't present when the data was observed. Due to the limitation of ES5 and to ensure consistent behavior across browsers, Vue.js cannot detect property addition/deletions. The best practice is to always declare properties that need to be reactive upfront. In cases where you absolutely need to add or delete properties at runtime, use the global [`Vue.set`](/api/#Vue-set) or [`Vue.delete`](/api/#Vue-delete) methods. 15 | 16 | 2. When you modify an Array by directly setting an index (e.g. `arr[0] = val`) or modifying its `length` property. Similarly, Vue.js cannot pickup these changes. Always modify arrays by using an Array instance method, or replacing it entirely. Vue provides a convenience method `arr.$set(index, value)` which is syntax sugar for `arr.splice(index, 1, value)`. 17 | 18 | Further reading: [Reactivity in Depth](/guide/reactivity.html) and [Array Change Detection](http://vuejs.org/guide/list.html#Array-Change-Detection). 19 | 20 | ### When is the DOM updated? 21 | 22 | Vue.js uses an asynchronous queue to batch DOM updates. This means when you modify some data, the DOM updates do not happen instantly: they are applied asynchronously when the queue is flushed. So how do you know when the DOM has been updated? Use `Vue.nextTick` right after you modify the data. The callback function you pass to it will be called once the queue has been flushed. 23 | 24 | Further reading: [Async Update Queue](/guide/reactivity.html#Async-Update-Queue). 25 | 26 | ### Why does `data` need to be a function? 27 | 28 | In the basic examples, we declare the `data` directly as a plain object. This is because we are creating only a single instance with `new Vue()`. However, when defining a **component**, `data` must be declared as a function that returns the initial data object. Why? Because there will be many instances created using the same definition. If we still use a plain object for `data`, that same object will be **shared by reference** across all instance created! By providing a `data` function, every time a new instance is created we can call it to return a fresh copy of the initial data. 29 | 30 | Further reading: [Component Option Caveats](/guide/components.html#Component-Option-Caveats). 31 | 32 | ### HTML case insensitivity 33 | 34 | All Vue.js templates are valid, parsable HTML markup, and Vue.js relies on spec-compliant parsers to process its templates. However, as specified in the standard, HTML is case-insensitive when matching tag and attribute names. This means camelCase attributes like `:myProp="123"` will be matched as `:myprop="123"`. As a rule of thumb, you should use camelCase in JavaScript and kebab-case in templates. For example a prop defined in JavaScript as `myProp` should be bound in templates as `:my-prop`. 35 | 36 | Further reading: [camelCase vs. kebab-case](http://vuejs.org/guide/components.html#camelCase-vs-kebab-case). 37 | 38 | We are also discussing the possibility of eliminating this inconsistency by resolving props and components in a case-insensitive manner. Join the conversation [here](https://github.com/vuejs/vue/issues/2308). 39 | -------------------------------------------------------------------------------- /src/_posts/march-update.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: March 2016 Update 3 | date: 2016-03-14 18:45:00 4 | --- 5 | 6 | ## Growing Community 7 | 8 | Vue's growth in the past year has been nothing short of amazing. As of today we are at over 15,000 stars on GitHub, over 500k downloads from npm, and over 2,000 users in the Gitter channel. What's more exciting though, is that the community successfully organized the first [London Vue.js Meetup](http://www.meetup.com/London-Vue-js-Meetup/) and the first [Paris Vue.js Meetup](http://www.meetup.com/Vuejs-Paris/?scroll=true)! A big shoutout to the awesome organizers: [Jack](https://twitter.com/JackBarham), [James](https://twitter.com/onejamesbrowne/) and [Eduardo](https://twitter.com/posva/). 9 | 10 | 11 | 12 | If you are interested in connecting with Vue.js users near you and share your experiences in using Vue.js, joining a local Meetup is a great idea - even better, maybe you can organize one :) 13 | 14 | ## Cool Things Being Built 15 | 16 | More and more amazing things are being built with Vue. There are products like [PageKit](https://pagekit.com/), Laravel Spark (coming soon) and [Statamic](https://v2.statamic.com/), sleek apps like [Koel](http://koel.phanan.net/) and [Gokotta](https://github.com/Zhangdroid/Gokotta), UI components like [VueStrap](http://yuche.github.io/vue-strap/) and [Vue-MDL](http://posva.net/vue-mdl/), and smooth, interactive experiences like [YouTube Adblitz](https://adblitz.withyoutube.com) and even the [Facebook NewsFeed Marketing Site](https://newsfeed.fb.com/)! 17 | 18 | There are many other great projects - too many to be listed here - but you can check them all out in [awesome-vue](https://github.com/vuejs/awesome-vue). If you've built great things with Vue, you should also add them to the list! 19 | 20 | ## A New Vision For the Project 21 | 22 | Some of you may have noticed that the development on the Vue.js core repo has slowed down lately - in the meanwhile, a lot of efforts went into other sub projects, namely [Vuex](https://github.com/vuejs/vuex), [vue-devtools](https://github.com/vuejs/vue-devtools) and the official [Webpack project boilerplate](https://github.com/vuejs-templates/webpack). The next step is a new release for [vue-router](https://github.com/vuejs/vue-router), and better documentation/examples demonstrating how Vue.js core, Vuex and vue-router work together in a large single page application. 23 | 24 | All this adds together towards a new vision for the Vue.js project: a progressive framework that can adapt to different complexity levels. Vue.js core will remain "just the view layer" - you can still drop it on whatever existing page to replace jQuery, but the Vue.js project also includes other pieces like vue-router, Vuex, vue-loader/vueify and vue-cli that works together as a more complete, opinionated framework for single page applications. More on this in a later post. 25 | 26 | ## Vue.js needs your help! 27 | 28 | Open source is awesome, and I'm proud that Vue.js is helping people build real products all over the world. However, as the scope of the project grows, pushing new features while maintaining everything becomes a very demanding job. The good news is you can help! 29 | 30 | ### Looking for collaborators 31 | 32 | There are already users who frequently helps out in various ways, but this is an invitation to make things official. I'm looking for contributors to join the "team", which is currently mostly just me. If that sounds interesting to you, take a look at the application [here](https://docs.google.com/forms/d/1SgDgKZqyivEf5xl0EOWNfs68Xy3f4oBzLXIlwlS0BIs/viewform). 33 | 34 | ### Looking for sponsors 35 | 36 | Another way to help making Vue development sustainable is providing direct financial support. The more financial support I receive, the more time I get to spend on making Vue even better. 37 | 38 | If you run a business and is using Vue in a revenue-generating product, it would make business sense to sponsor Vue development: it ensures the project that your product relies on stays healthy and actively maintained. It can also help your exposure in the Vue community and makes it easier to attract Vue developers. 39 | 40 | If you are an individual user and have enjoyed the productivity of using Vue, consider donating as a sign of appreciation - like buying me coffee once in a while :) 41 | 42 | In either case, you can provide recurring funding through Vue's [Patreon campaign](https://www.patreon.com/evanyou), or provide one-time donations via [PayPal](https://www.paypal.me/evanyou). There are many ideas for Vue that I have lined up but haven't had the time to embark on, and I would love to be able to work on them full time - I hope you can help me make that happen! 43 | -------------------------------------------------------------------------------- /src/_posts/vue-011-release.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Vue.js 0.11 released! 3 | date: 2014-11-09 09:23:40 4 | --- 5 | 6 | After the long wait, [Vue.js 0.11 **Cowboy Bebop**](https://github.com/yyx990803/vue/releases/tag/0.11.0) is finally here! Thanks to everyone who tried out the release candidate versions and provided feedback / bug reports along the way. 7 | 8 | 9 | 10 | The 0.11 release introduced many new features and also a fair number of breaking changes, so please carefully read through the [0.11 Change List](https://github.com/yyx990803/vue/blob/master/changes.md) before upgrading. Aside from the API changes, 0.11 also ships with better [code quality](https://codeclimate.com/github/yyx990803/vue) and [test coverage](https://coveralls.io/r/yyx990803/vue), and is considerably more robust in almost every aspect. 11 | 12 | This documentation site has been fully upgraded to match the new 0.11 API. For the now legacy 0.10.6 version, you can still find documentations for it at [legacy.vuejs.org](http://legacy.vuejs.org). 13 | -------------------------------------------------------------------------------- /src/_posts/vue-cli.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Announcing vue-cli 3 | date: 2015-12-28 00:00:00 4 | --- 5 | 6 | Recently there has been a lot of [discussion around the tooling hurdle](https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4#.chg95e5p6) when you start a React project. Luckily for Vue.js, all you need to do to start with a quick prototype is including it from a CDN via a ` 26 | ``` 27 | 28 | We have already created our very first `Vue Native` app! This looks pretty similar to rendering a template string, but under the hood a lot of work is being done. The data and the native UI elements are now linked, and everything is now **reactive**. 29 | 30 | In addition to text interpolation, we can also bind element attributes like this: 31 | 32 | ``` html 33 | 38 | ``` 39 | ```JS 40 | 54 | ``` 55 | 56 | Here we are encountering something new. The `v-bind` attribute. This attribute is called a **directive**. Directives are prefixed with `v-` to indicate that they are special attributes provided by Vue Native, which internal bind with the React Native props. Then-as you may have guessed-they apply special reactive behavior in re-rendering. Here, it is basically saying "keep this element's `title` attribute up-to-date with the `message` property on the Vue instance." 57 | 58 |
59 |
60 | 61 |
62 |
63 | 64 |
65 |
66 | -------------------------------------------------------------------------------- /src/docs/FAQ.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: FAQ 3 | type: guide 4 | order: 20 5 | vue_version: 2.5.13 6 | gz_size: "30.67" 7 | --- 8 | 9 | ## Frequently Asked Questions 10 | 11 | ### What are the advantages/differences of Vue Native over React Native 12 | 13 | Vue Native is layer based on top of React Native. The template definition is based on Vuejs which is then converted into suitable react native code. With this, we are able to take advantage of the existing react native ecosystem where a lot of third party libraries and support are available. 14 | 15 | ### Can I reuse vuejs web app code? 16 | 17 | No. You cannot, since vue-native does not make use of html tags. It's not possible to reuse the vuejs web app code. 18 | 19 | ### What about third party libraries for vue-native 20 | 21 | All the react-native libraries are supported by vue-native. You can look into [third party libraries section](./community-libraries-doc.html) for some of the examples. 22 | -------------------------------------------------------------------------------- /src/docs/community-libraries/icons.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Icons 3 | type: community-libraries 4 | order: 1 5 | vue_version: 2.5.13 6 | # gz_size: "30.67" 7 | --- 8 | 9 | Usage of icons in Vue Native. 10 | 11 | • Import and use the already available icons from the `@expo/vector-icons` for CRNA projects or `react-native-vector-icons` for non-crna projects (remember to link). 12 | • Use PNGs as icons to get your own customized icons running. 13 | 14 | We will be showing both these methods here. 15 | 16 | ### @expo/vector-icons 17 | 18 | First install the React Native Elements package using the following command: 19 | 20 | ```shell 21 | npm install @expo/vector-icons 22 | ``` 23 | 24 | Then you simply import it inside your `script` section like this: 25 | 26 | ```js 27 | import { Ionicons } from "react-native-elements"; 28 | ``` 29 | 30 | Also add the `Ionicons` imported in the `components` block. 31 | 32 | ```js 33 | 39 | ``` 40 | 41 | If you want to use the imported `Ionicons` globally, you will have to import the `Vue` component from the `vue-native-core` library which is already there if you created your project using the `vue-native-cli`. 42 | 43 | Use the `Vue.component` function in your root file `App.vue` to specify the component that will be used globally. 44 | 45 | ```js 46 | import Vue from "vue-native-core"; 47 | Vue.component("ionicons", Ionicons); 48 | ``` 49 | 50 | Now you are ready to use the kebab-case equivalent of the import in your `template` with the desired icon. 51 | 52 | ```html 53 | 58 | ``` 59 | 60 | ### Icon images 61 | 62 | If you know how to use the React Native `` component this will be a breeze. 63 | 64 | ```html 65 | 73 | ``` 74 | 75 | ```css 76 | 82 | ``` 83 | -------------------------------------------------------------------------------- /src/docs/community-libraries/lottie.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Lottie 3 | # type: guide 4 | # order: 17 5 | type: community-libraries 6 | order: 3 7 | vue_version: 2.5.13 8 | gz_size: "30.67" 9 | --- 10 | 11 | [Lottie](https://airbnb.design/lottie) is the animation library from AirBnB and Expo has the default support it. 12 | 13 | ```html 14 | 15 | 24 | 25 | 19 | 20 | ``` 21 | 22 | ```html 23 | 35 | ``` 36 | 37 | ## v-else 38 | > Conditionally renders the else block of a `v-if` directive. 39 | 40 | The `v-else` directive is a secondary(optional) directive that gets used with `v-if`. Much like the way an if/else conditional statement works in Javascript, this works similarly in rendering an element, `else` redering a different element, based on the value of a data property on our Vue Instance. 41 | 42 | Notice how `v-else` doesn't have a parameter input on it? Thats because `v-else` is implicit to the most previous `v-if` directive in use. Else is will default to an error of missing 'v-if directive' 43 | 44 | ```html 45 | 46 | Now you see the first one. 47 | Now you see the second one. 48 | 49 | 50 | ``` 51 | 52 | ```html 53 | 65 | ``` 66 | 67 | ## v-show 68 | > Conditionally display an element or View. 69 | 70 | Much like the v-if directive, v-show acts in a similar way being that they both change the display of the target element or View, but with one key difference. 71 | 72 | That difference is how the directive achieves this. `v-if` will remove the element from the view completely, where as `v-show` keeps the element on the View, and only adjusts the opacity to 0%, or transparent. 73 | ```html 74 | 75 | Now you see me 76 | 77 | 78 | ``` 79 | 80 | ```html 81 | 93 | ``` 94 | 95 | 96 | ## v-for 97 | > Renders a list of items using the data from an Array. 98 | 99 | This example demonstrates that we can bind data, and dynamically render the UI elements to the View based on the values inside the Array we are looping through. V-for is basically a ForEach loop. 100 | 101 | ```html 102 | 103 | 104 | {{ todo.text }} 105 | 106 | 107 | ``` 108 | 109 | ```JS 110 | 123 | ``` 124 | 125 | ```css 126 | 138 | ``` 139 | 140 |
141 |
142 | 143 |
144 |
145 | -------------------------------------------------------------------------------- /src/docs/contribution.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: How to contribute 3 | type: guide 4 | order: 19 5 | vue_version: 2.5.13 6 | gz_size: "30.67" 7 | --- 8 | 9 | ## Open Development 10 | 11 | All work on Vue Native happens directly on GitHub. Both core team members and external contributors send pull requests which go through the same review process. 12 | 13 | ## Your First Pull Request 14 | 15 | Working on your first Pull Request? You can learn how from this free video series: 16 | https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github 17 | 18 | ## Sending a Pull Request 19 | 20 | The core team is monitoring for pull requests. We will review your pull request and either merge it, request changes to it, or close it with an explanation. We’ll do our best to provide updates and feedback throughout the process. 21 | 22 | Before submitting a pull request, please make sure the following is done: 23 | 24 | 1. Fork the repository `git clone git@github.com:GeekyAnts/vue-native-core.git` and create your branch from master. 25 | 2. Run npm install in the repository root. 26 | 3. Create a sample app using vue-native-cli separately outside the project repository. 27 | 4. Within the project repository, go to packages folder `vue-native-core/packages` 28 | 5. There are multiple modules which you can modify 29 | - vue-native-helper 30 | - vue-native-template-compiler 31 | - vue-native-core 32 | 6. If you want modify the mobile app compiler. Then you would've to use vue-template-compiler or vue-native-helper based on your requirements. Update the build.js file accordingly. 33 | 7. run `npm link ` 34 | 8. Format your code with prettier 35 | 9. Run the app and test the code before you commit and create a pull request 36 | -------------------------------------------------------------------------------- /src/docs/examples/commits.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: GitHub Commits 3 | type: examples 4 | order: 1 5 | --- 6 | 7 | > This example fetches latest Vue.js commits data from GitHub's API and displays them as a list. You can switch between the master and dev branches. 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/docs/examples/deepstream.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Realtime with deepstreamHub 3 | type: examples 4 | order: 9 5 | --- 6 | 7 | > This example uses [deepstreamHub](https://deepstreamhub.com/) to synchronize realtime data, send events and make remote procedure calls between clients (you can try opening it in multiple browser windows). 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/docs/examples/elastic-header.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Elastic Header 3 | type: examples 4 | order: 7 5 | --- 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/docs/examples/firebase.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Firebase + Validation 3 | type: examples 4 | order: 10 5 | --- 6 | 7 | > This example uses [Firebase](https://firebase.google.com/) as the data persistence backend and syncs between clients in real time (you can try opening it in multiple browser tabs). In addition, it performs instant validation using computed properties and triggers CSS transitions when adding/removing items. 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/docs/examples/grid-component.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Grid Component 3 | type: examples 4 | order: 3 5 | --- 6 | 7 | > This is an example of creating a reusable grid component and using it with external data. 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/docs/examples/hackernews.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: HackerNews Clone 3 | type: examples 4 | order: 12 5 | --- 6 | 7 | > This is a HackerNews clone built upon HN's official Firebase API, Vue 2.0 + Vue Router + Vuex, with server-side rendering. 8 | 9 | {% raw %} 10 |
11 | 12 | 13 | 14 |
15 | {% endraw %} 16 | 17 | > [Live Demo](https://vue-hn.now.sh/) 18 | > Note: the demo may need some spin up time if nobody has accessed it for a certain period. 19 | > 20 | > [[Source](https://github.com/vuejs/vue-hackernews-2.0)] 21 | 22 | ## Features 23 | 24 | - Server Side Rendering 25 | - Vue + Vue Router + Vuex working together 26 | - Server-side data pre-fetching 27 | - Client-side state & DOM hydration 28 | - Single-file Vue Components 29 | - Hot-reload in development 30 | - CSS extraction for production 31 | - Real-time List Updates with FLIP Animation 32 | 33 | ## Architecture Overview 34 | 35 | Hackernew clone architecture overview 36 | -------------------------------------------------------------------------------- /src/docs/examples/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Markdown Editor 3 | type: examples 4 | order: 0 5 | --- 6 | 7 | > Dead simple Markdown editor. 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/docs/examples/modal.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Modal Component 3 | type: examples 4 | order: 6 5 | --- 6 | 7 | > Features used: component, prop passing, content insertion, transitions. 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/docs/examples/select2.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Wrapper Component 3 | type: examples 4 | order: 8 5 | --- 6 | 7 | > In this example we are integrating a 3rd party jQuery plugin (select2) by wrapping it inside a custom component. 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/docs/examples/svg.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: SVG Graph 3 | type: examples 4 | order: 5 5 | --- 6 | 7 | > This example showcases a combination of custom component, computed property, two-way binding and SVG support. 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/docs/examples/todomvc.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: TodoMVC 3 | type: examples 4 | order: 11 5 | --- 6 | 7 | > This is a fully spec-compliant TodoMVC implementation in under 120 effective lines of JavaScript (excluding comments and blank lines). 8 | 9 |

Note that if your web browser is configured to block 3rd-party data/cookies, the example below will not work, as the `localStorage` data will fail to be saved from JSFiddle. You'll have to click on `Edit in JSFiddle` to see the live result.

10 | 11 | 12 | -------------------------------------------------------------------------------- /src/docs/examples/tree-view.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Tree View 3 | type: examples 4 | order: 4 5 | --- 6 | 7 | > Example of a simple tree view implementation showcasing recursive usage of components. 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/docs/handle-user-input.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Handling user input 3 | type: guide 4 | order: 8 5 | vue_version: 2.5.13 6 | gz_size: "30.67" 7 | --- 8 | 9 | To let users interact with your app, we can use the `v-bind` directive to attach event listeners that invoke methods on our Vue Native instances: 10 | 11 | ```html 12 | 13 |