+
-
+
-
+ <%- partial('partials/main_menu', { context: 'sidebar' }) %>
+
{{ animatedNumber }}
@@ -66,7 +66,7 @@ new Vue({ }, watch: { number: function(newValue) { - TweenLite.to(this.$data, 0.5, { tweenedNumber: newValue }); + gsap.to(this.$data, { duration: 0.5, tweenedNumber: newValue }); } } }) @@ -366,7 +366,7 @@ function generatePoints (stats) { {% endraw %} -See [this fiddle](https://jsfiddle.net/chrisvfritz/65gLu2b6/) for the complete code behind the above demo. +See [this example](https://codesandbox.io/s/github/vuejs/v2.vuejs.org/tree/master/src/v2/examples/vue-20-dynamic-state-transitions) for the complete code behind the above demo. ## Organizing Transitions into Components diff --git a/src/v2/guide/transitions.md b/src/v2/guide/transitions.md index b1b91c2d4c..7f0637d78e 100644 --- a/src/v2/guide/transitions.md +++ b/src/v2/guide/transitions.md @@ -4,6 +4,12 @@ type: guide order: 201 --- + + ## Overview Vue provides a variety of ways to apply transition effects when items are inserted, updated, or removed from the DOM. This includes tools to: @@ -479,6 +485,7 @@ new Vue({ methods: { beforeEnter: function (el) { el.style.opacity = 0 + el.style.transformOrigin = 'left' }, enter: function (el, done) { Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 }) @@ -959,6 +966,7 @@ So what about for when we have a whole list of items we want to render simultane - Unlike `One important note is that these FLIP transitions do not work with elements set to `display: inline`. As an alternative, you can use `display: inline-block` or place elements in a flex context.
-These FLIP animations are also not limited to a single axis. Items in a multidimensional grid can be [transitioned too](https://jsfiddle.net/chrisvfritz/sLrhk1bc/): +These FLIP animations are also not limited to a single axis. Items in a multidimensional grid can be [transitioned too](https://codesandbox.io/s/github/vuejs/v2.vuejs.org/tree/master/src/v2/examples/vue-20-list-move-transitions): {% raw %}
diff --git a/src/v2/guide/typescript.md b/src/v2/guide/typescript.md
index 8922bfea44..19d01a87d0 100644
--- a/src/v2/guide/typescript.md
+++ b/src/v2/guide/typescript.md
@@ -4,13 +4,13 @@ type: guide
order: 403
---
-> [Vue CLI](https://cli.vuejs.org) provides built-in TypeScript tooling support.
+> [Vue CLI](https://cli.vuejs.org) provides built-in TypeScript tooling support.
## Official Declaration in NPM Packages
A static type system can help prevent many potential runtime errors, especially as applications grow. That's why Vue ships with [official type declarations](https://github.com/vuejs/vue/tree/dev/types) for [TypeScript](https://www.typescriptlang.org/) - not only in Vue core, but also for [vue-router](https://github.com/vuejs/vue-router/tree/dev/types) and [vuex](https://github.com/vuejs/vuex/tree/dev/types) as well.
-Since these are [published on NPM](https://cdn.jsdelivr.net/npm/vue/types/), and the latest TypeScript knows how to resolve type declarations in NPM packages, this means when installed via NPM, you don't need any additional tooling to use TypeScript with Vue.
+Since these are [published on NPM](https://cdn.jsdelivr.net/npm/vue@2/types/), and the latest TypeScript knows how to resolve type declarations in NPM packages, this means when installed via NPM, you don't need any additional tooling to use TypeScript with Vue.
## Recommended Configuration
@@ -187,3 +187,34 @@ const Component = Vue.extend({
```
If you find type inference or member completion isn't working, annotating certain methods may help address these problems. Using the `--noImplicitAny` option will help find many of these unannotated methods.
+
+
+
+## Annotating Props
+
+```ts
+import Vue, { PropType } from 'vue'
+
+interface ComplexMessage {
+ title: string,
+ okMessage: string,
+ cancelMessage: string
+}
+const Component = Vue.extend({
+ props: {
+ name: String,
+ success: { type: String },
+ callback: {
+ type: Function as PropType<() => void>
+ },
+ message: {
+ type: Object as PropType,
+ required: true,
+ validator (message: ComplexMessage) {
+ return !!message.title;
+ }
+ }
+ }
+})
+```
+If you find validator not getting type inference or member completion isn't working, annotating the argument with the expected type may help address these problems.
diff --git a/src/v2/guide/unit-testing.md b/src/v2/guide/unit-testing.md
deleted file mode 100644
index b3c8c9ff88..0000000000
--- a/src/v2/guide/unit-testing.md
+++ /dev/null
@@ -1,130 +0,0 @@
----
-title: Unit Testing
-type: guide
-order: 402
----
-
-> [Vue CLI](https://cli.vuejs.org/) has built-in options for unit testing with [Jest](https://github.com/facebook/jest) or [Mocha](https://mochajs.org/) that works out of the box. We also have the official [Vue Test Utils](https://vue-test-utils.vuejs.org/) which provides more detailed guidance for custom setups.
-
-## Simple Assertions
-
-You don't have to do anything special in your components to make them testable. Export the raw options:
-
-``` html
-
- {{ message }}
-
-
-
-```
-
-Then import the component options along with Vue, and you can make many common assertions (here we are using Jasmine/Jest style `expect` assertions just as an example):
-
-``` js
-// Import Vue and the component being tested
-import Vue from 'vue'
-import MyComponent from 'path/to/MyComponent.vue'
-
-// Here are some Jasmine 2.0 tests, though you can
-// use any test runner / assertion library combo you prefer
-describe('MyComponent', () => {
- // Inspect the raw component options
- it('has a created hook', () => {
- expect(typeof MyComponent.created).toBe('function')
- })
-
- // Evaluate the results of functions in
- // the raw component options
- it('sets the correct default data', () => {
- expect(typeof MyComponent.data).toBe('function')
- const defaultData = MyComponent.data()
- expect(defaultData.message).toBe('hello!')
- })
-
- // Inspect the component instance on mount
- it('correctly sets the message when created', () => {
- const vm = new Vue(MyComponent).$mount()
- expect(vm.message).toBe('bye!')
- })
-
- // Mount an instance and inspect the render output
- it('renders the correct message', () => {
- const Constructor = Vue.extend(MyComponent)
- const vm = new Constructor().$mount()
- expect(vm.$el.textContent).toBe('bye!')
- })
-})
-```
-
-## Writing Testable Components
-
-A component's render output is primarily determined by the props it receives. If a component's render output solely depends on its props it becomes straightforward to test, similar to asserting the return value of a pure function with different arguments. Take a simplified example:
-
-``` html
-
- ` or ``.**
-This [prevents conflicts](http://w3c.github.io/webcomponents/spec/custom/#valid-custom-element-name) with existing and future HTML elements, since all HTML elements are a single word.
+This [prevents conflicts](https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name) with existing and future HTML elements, since all HTML elements are a single word.
{% raw %}
{{ msg }}
- - - -``` - -You can assert its render output with different props using the `propsData` option: - -``` js -import Vue from 'vue' -import MyComponent from './MyComponent.vue' - -// helper function that mounts and returns the rendered text -function getRenderedText (Component, propsData) { - const Constructor = Vue.extend(Component) - const vm = new Constructor({ propsData: propsData }).$mount() - return vm.$el.textContent -} - -describe('MyComponent', () => { - it('renders correctly with different props', () => { - expect(getRenderedText(MyComponent, { - msg: 'Hello' - })).toBe('Hello') - - expect(getRenderedText(MyComponent, { - msg: 'Bye' - })).toBe('Bye') - }) -}) -``` - -## Asserting Asynchronous Updates - -Since Vue [performs DOM updates asynchronously](reactivity.html#Async-Update-Queue), assertions on DOM updates resulting from state change will have to be made in a `Vue.nextTick` callback: - -``` js -// Inspect the generated HTML after a state update -it('updates the rendered message when vm.message updates', done => { - const vm = new Vue(MyComponent).$mount() - vm.message = 'foo' - - // wait a "tick" after state change before asserting DOM updates - Vue.nextTick(() => { - expect(vm.$el.textContent).toBe('foo') - done() - }) -}) -``` - -For more in-depth information on unit testing in Vue, check out [Vue Test Utils](https://vue-test-utils.vuejs.org/) and our cookbook entry about [unit testing vue components](https://vuejs.org/v2/cookbook/unit-testing-vue-components.html). diff --git a/src/v2/style-guide/index.md b/src/v2/style-guide/index.md index 5ca7bb4466..8567e99b66 100644 --- a/src/v2/style-guide/index.md +++ b/src/v2/style-guide/index.md @@ -45,7 +45,7 @@ Some features of Vue exist to accommodate rare edge cases or smoother migrations **Component names should always be multi-word, except for root `App` components, and built-in components provided by Vue, such as `{% endraw %}
#### Bad
@@ -189,7 +189,7 @@ In committed code, prop definitions should always be as detailed as possible, sp
{% endraw %}
-Detailed [prop definitions](https://vuejs.org/v2/guide/components.html#Prop-Validation) have two advantages:
+Detailed [prop definitions](/v2/guide/components.html#Prop-Validation) have two advantages:
- They document the API of the component, so that it's easy to see how the component is meant to be used.
- In development, Vue will warn you if a component is ever provided incorrectly formatted props, helping you catch potential sources of error.
@@ -771,22 +771,6 @@ Some advantages of this convention:
- Since component names should always be multi-word, this convention prevents you from having to choose an arbitrary prefix for simple component wrappers (e.g. `MyButton`, `VueButton`).
-- Since these components are so frequently used, you may want to simply make them global instead of importing them everywhere. A prefix makes this possible with Webpack:
-
- ``` js
- var requireComponent = require.context("./src", true, /^Base[A-Z]/)
- requireComponent.keys().forEach(function (fileName) {
- var baseComponentConfig = requireComponent(fileName)
- baseComponentConfig = baseComponentConfig.default || baseComponentConfig
- var baseComponentName = baseComponentConfig.name || (
- fileName
- .replace(/^.+\//, '')
- .replace(/\.\w+$/, '')
- )
- Vue.component(baseComponentName, baseComponentConfig)
- })
- ```
-
{% raw %}{% endraw %}
{% raw %}
{% endraw %}
@@ -1353,7 +1337,7 @@ Simpler, well-named computed properties are:
- __Easier to read__
- Simplifying computed properties forces you to give each value a descriptive name, even if it's not reused. This makes it much easier for other developers (and future you) to focus in on the code they care about and figure out what's going on.
+ Simplifying computed properties forces you to give each value a descriptive name, even if it's not reused. This makes it much easier for other developers (and future you) to focus on the code they care about and figure out what's going on.
- __More adaptable to changing requirements__
@@ -1454,7 +1438,7 @@ While attribute values without any spaces are not required to have quotes in HTM
``` html
-
Here might be a page title
+Here might be a page title
@@ -1496,7 +1480,7 @@ While attribute values without any spaces are not required to have quotes in HTM ``` html -Here might be a page title
+Here might be a page title
@@ -1506,7 +1490,7 @@ While attribute values without any spaces are not required to have quotes in HTM ``` html -Here might be a page title
+Here might be a page title
@@ -1612,7 +1596,6 @@ This is the default order we recommend for component options. They're split into 6. **Unique Attributes** (attributes that require unique values) - `ref` - `key` - - `slot` 7. **Two-Way Binding** (combining binding and events) - `v-model` @@ -1756,7 +1739,7 @@ computed: { **It's usually best to use `key` with `v-if` + `v-else`, if they are the same element type (e.g. both `` elements).**
-By default, Vue updates the DOM as efficiently as possible. That means when switching between elements of the same type, it simply patches the existing element, rather than removing it and adding a new one in its place. This can have [unintended consequences](https://jsfiddle.net/chrisvfritz/bh8fLeds/) if these elements should not actually be considered the same.
+By default, Vue updates the DOM as efficiently as possible. That means when switching between elements of the same type, it simply patches the existing element, rather than removing it and adding a new one in its place. This can have [unintended consequences](https://codesandbox.io/s/github/vuejs/v2.vuejs.org/tree/master/src/v2/examples/vue-20-priority-d-rules-unintended-consequences) if these elements should not actually be considered the same.
{% raw %}
{% endraw %}
#### Bad
@@ -1807,7 +1790,7 @@ Prefer class selectors over element selectors in `scoped` styles, because large
To scope styles, Vue adds a unique attribute to component elements, such as `data-v-f3f3eg9`. Then selectors are modified so that only matching elements with this attribute are selected (e.g. `button[data-v-f3f3eg9]`).
-The problem is that large numbers of [element-attribute selectors](http://stevesouders.com/efws/css-selectors/csscreate.php?n=1000&sel=a%5Bhref%5D&body=background%3A+%23CFD&ne=1000) (e.g. `button[data-v-f3f3eg9]`) will be considerably slower than [class-attribute selectors](http://stevesouders.com/efws/css-selectors/csscreate.php?n=1000&sel=.class%5Bhref%5D&body=background%3A+%23CFD&ne=1000) (e.g. `.btn-close[data-v-f3f3eg9]`), so class selectors should be preferred whenever possible.
+The problem is that large numbers of element-attribute selectors (e.g. `button[data-v-f3f3eg9]`) will be considerably slower than class-attribute selectors (e.g. `.btn-close[data-v-f3f3eg9]`), so class selectors should be preferred whenever possible.
{% raw %}{% endraw %}
@@ -1942,7 +1925,9 @@ Vue.component('TodoItem', {
**[Vuex](https://github.com/vuejs/vuex) should be preferred for global state management, instead of `this.$root` or a global event bus.**
-Managing state on `this.$root` and/or using a [global event bus](https://vuejs.org/v2/guide/migration.html#dispatch-and-broadcast-replaced) can be convenient for very simple cases, but are not appropriate for most applications. Vuex offers not only a central place to manage state, but also tools for organizing, tracking, and debugging state changes.
+Managing state on `this.$root` and/or using a [global event bus](/v2/guide/migration.html#dispatch-and-broadcast-replaced) can be convenient for very simple cases, but it is not appropriate for most applications.
+
+Vuex is the [official flux-like implementation](/v2/guide/state-management.html#Official-Flux-Like-Implementation) for Vue, and offers not only a central place to manage state, but also tools for organizing, tracking, and debugging state changes. It integrates well in the Vue ecosystem (including full [Vue DevTools](/v2/guide/installation.html#Vue-Devtools) support).
{% raw %}{% endraw %}
diff --git a/themes/vue/_config.yml b/themes/vue/_config.yml
index 247cef49ee..ae2c91815a 100644
--- a/themes/vue/_config.yml
+++ b/themes/vue/_config.yml
@@ -1,131 +1,246 @@
site_description: Vue.js - The Progressive JavaScript Framework
google_analytics: UA-46852172-1
root_domain: vuejs.org
-vue_version: 2.5.16
-platinum_sponsors_china:
- - url: 'http://www.dcloud.io/?hmsr=vuejsorg&hmpl=&hmcu=&hmkw=&hmci='
- img: dcloud.gif
-special_sponsors:
- - url: 'https://stdlib.com/'
- img: stdlib.png
- description: 'Build APIs you need in minutes instead of days, for free.'
-platinum_sponsors:
- - url: >-
- https://bit.dev/?utm_source=vue&utm_medium=vue&utm_campaign=vue&utm_term=vue&utm_content=vue
- img: bit.png
- name: Bit
- - url: 'http://tooltwist.com/'
- img: tooltwist.png
- name: Tooltwist
- - url: >-
+vue_version: 2.7.14
+# START SPONSORS
+special:
+ - name: appwrite
+ url: https://appwrite.io
+ img: appwrite.svg
+ description: Open-source backend cloud platform
+ priority: true
+platinum:
+ - name: Bit
+ url: https://bit.dev
+ img: bit.svg?v2
+ priority: true
+ - name: VueMastery
+ url: https://www.vuemastery.com/
+ img: vuemastery.png
+ - name: VueSchool
+ url: >-
https://vueschool.io/?utm_source=Vuejs.org&utm_medium=Banner&utm_campaign=Sponsored%20Banner&utm_content=V1
img: vueschool.png
- name: VueSchool
- - url: 'https://vehikl.com/'
+ - name: Vehikl
+ url: https://vehikl.com/
img: vehikl.png
- name: Vehikl
- - url: >-
- https://www.nativescript.org/vue?utm_source=vue-js-org&utm_medium=website&utm_campaign=nativescript-awareness
- img: nativescript.png
- name: NativeScript
-gold_sponsors:
- - url: 'https://www.vuemastery.com/'
- img: vuemastery.png
- name: VueMastery
- - url: 'https://laravel.com'
+ - name: Passionate People
+ url: https://passionatepeople.io/
+ img: passionate_people.png
+ - name: Storyblok
+ url: https://www.storyblok.com
+ img: storyblok.png
+ - name: Ionic
+ url: >-
+ https://ionicframework.com/vue?utm_source=partner&utm_medium=referral&utm_campaign=vuesponsorship&utm_content=vuedocs
+ img: ionic.png?v2
+ - name: Skilled
+ url: https://skilled.yashio-corp.com
+ img: skilled.svg
+ - name: Chrome Frameworks Fund
+ url: https://opencollective.com/2021-frameworks-fund
+ img: chrome_frameworks_fund.png
+ - name: HeroDevs
+ url: https://www.herodevs.com/support/vue
+ img: herodevs.png
+gold:
+ - name: Laravel
+ url: https://laravel.com
img: laravel.png
- name: Laravel
- - url: 'https://chaitin.cn/en/'
- img: chaitin.png
- name: Chaitin
- - url: 'https://htmlburger.com'
- img: html_burger.png
- name: HTML Burger
- - url: 'https://www.frontenddeveloperlove.com/'
- img: frontend_love.png
- name: Frontend Love
- - url: 'https://onsen.io/vue/'
- img: onsen_ui.png
- name: Onsen UI
- - url: 'https://neds.com.au/'
- img: neds.png
- name: Neds
- - url: 'https://icons8.com/'
- img: icons_8.png
- name: Icons 8
- - url: 'https://vuejobs.com/?ref=vuejs'
- img: vuejobs.png
- name: VueJobs
- - url: 'https://www.valuecoders.com'
- img: valuecoders.png
- name: ValueCoders
- - url: 'https://tidelift.com/subscription/npm/vue'
+ - name: Tidelift
+ url: https://tidelift.com/subscription/npm/vue
img: tidelift.png
- name: Tidelift
- - url: >-
- http://www.syncfusion.com/?utm_source=vuejs&utm_medium=list&utm_campaign=vuejsjslistcy19
- img: syncfusion.png
- name: SyncFusion
- - url: 'https://opteo.com/vue'
- img: opteo.png
- name: Opteo
- - url: 'https://devsquad.com/'
- img: devsquad.png
- name: DevSquad
- - url: 'https://www.firesticktricks.com/'
- img: firestick_tricks.png
- name: Firestick Tricks
- - url: 'https://intygrate.com/'
+ - name: Intygrate
+ url: https://intygrate.com/
img: intygrate.png
- name: Intygrate
- - url: 'https://isleofcode.com/'
- img: isle_of_code.png
- name: Isle of Code
- - url: 'https://passionatepeople.io/'
- img: passionate_people.png
- name: Passionate People
- - url: 'http://en.shopware.com/'
- img: shopware_ag.png
- name: shopware AG
- - url: >-
- https://x-team.com/join/?utm_source=vuejsorg&utm_medium=sponsor&utm_campaign=vuejsorg-patreon
- img: x_team.png
- name: X-Team
- - url: 'https://www.vpnranks.com/'
- img: vpnranks.png
- name: VPNRanks
- - url: 'https://www.simplyswitch.com/'
- img: energy_comparison.png
- name: Energy Comparison
- - url: 'https://www.bacancytechnology.com'
- img: bacancy_technology.png
- name: Bacancy Technology
- - url: 'https://blokt.com/'
- img: blokt_cryptocurrency_news.png
- name: Blokt Cryptocurrency News
- - url: 'https://www.jqwidgets.com/vue/'
- img: jqwidgets_ltd.png
- name: jQWidgets LTD
- - url: 'https://www.y8.com/'
+ - name: Y8
+ url: https://www.y8.com/
img: y8.png
- name: Y8
- - url: 'https://js.devexpress.com/'
+ - name: DevExpress
+ url: https://js.devexpress.com/
img: devexpress.png
- name: DevExpress
-silver_sponsors:
- - url: 'https://dopamine.bg/'
- img: dopamine.png
- name: Dopamine
-bronze_sponsors:
- - url: 'http://tighten.co/'
- img: tighten_co.png
- name: Tighten.co
- - url: 'https://www.accelebrate.com/'
- img: accelebrate.png
- name: Accelebrate
- - url: 'https://polyglotengineer.com/derek.pollard'
+ - name: FASTCODING Inc
+ url: 'https://fastcoding.jp/javascript/ '
+ img: fastcoding_inc.svg
+ - name: LY Corporation
+ url: https://www.lycorp.co.jp/en/
+ img: ly_corporation.png?v2
+ - name: Fenêtre Online Solutions
+ url: https://www.fenetre.nl/
+ img: fen_tre_online_solutions.svg
+ - name: Ant Design Vue
+ url: https://antdv.com
+ img: ant_design_vue.png
+ - name: Crisp
+ url: https://crisp.chat/en/
+ img: crisp.png
+ - name: Localazy
+ url: >-
+ https://localazy.com/blog/how-to-localize-vuejs-app-with-vue-i18n-and-localazy?utm_source=vuejs&utm_medium=banner&utm_campaign=sponsorships_vuejs&utm_content=logo
+ img: localazy.svg
+ - name: Casinoburst.com
+ url: https://casinoburst.com/casino-utan-licens/
+ img: casinoburst_com.png
+ - name: 'Enkrypt: Ethereum and Polkadot Web3 Wallet'
+ url: https://www.enkrypt.com
+ img: enkrypt__ethereum_and_polkadot_web3_wallet.svg
+ - name: uudetkasinot.com
+ url: https://www.uudetkasinot.com
+ img: uudetkasinot_com.png
+ - name: Fathom Analytics
+ url: https://usefathom.com/
+ img: fathom_analytics.svg
+ - name: Goread.io
+ url: https://goread.io/buy-instagram-followers
+ img: goread_io.png
+ - name: Sentry
+ url: https://sentry.io/for/vue?utm_source=vuejs.org&utm_medium=paid-community
+ img: sentry.png
+ - name: Poprey.com
+ url: https://poprey.com/
+ img: poprey_com.png
+ - name: Ilmaiset Pitkävetovihjeet
+ url: https://www.vedonlyontibonukset.com/pitkavetovihjeet
+ img: ilmaiset_pitk_vetovihjeet.png
+ - name: Famoid
+ url: https://famoid.com/
+ img: famoid.png
+ - name: Certible
+ url: https://www.certible.com
+ img: certible.svg
+ - name: FORTUNE GAMES
+ url: https://www.fortunegames.com
+ img: fortune_games.png
+ - name: TBDC - Agro Software
+ url: http://tbdc.com.br/
+ img: tbdc___agro_software.svg
+ - name: FineProxy
+ url: https://fineproxy.org/
+ img: fineproxy.svg
+ - name: Daniel
+ url: >-
+ https://rxdb.info/?utm_source=sponsor&utm_medium=opencollective&utm_campaign=opencollective-vuejs
+ img: daniel.png
+ - name: SurveyJS
+ url: https://surveyjs.io/
+ img: surveyjs.png?v2
+ - name: Stormlikes
+ url: https://www.stormlikes.net/buy-instagram-followers
+ img: stormlikes.png
+silver:
+ - name: Draxlr
+ url: https://www.draxlr.com
+ img: draxlr.svg
+ - name: Team Extension North America Inc
+ url: https://teamextension.io
+ img: team_extension_north_america_inc.png
+ - name: Free Bets US
+ url: https://freebets.us
+ img: free_bets_us.png
+ - name: Doximity
+ url: https://technology.doximity.com/
+ img: doximity.png
+ - name: Interflora Group
+ url: https://www.interflora.fr
+ img: interflora_group.png
+ - name: Codesmith
+ url: https://codesmith.io
+ img: codesmith.png
+ - name: Optimizers
+ url: https://www.optimizers.nl
+ img: optimizers.png
+ - name: FORTUNE GAMES
+ url: https://www.fortunegames.com
+ img: fortune_games.png
+ - name: Indy
+ url: https://www.indy.fr/
+ img: indy.png
+ - name: Buy Instagram Followers from SocialWick
+ url: https://www.socialwick.com/instagram/followers
+ img: buy_instagram_followers_from_socialwick.png
+ - name: Social Followers
+ url: https://www.socialfollowers.uk/buy-tiktok-followers/
+ img: social_followers.png
+ - name: Nettcasino
+ url: https://www.nettcasino.com/
+ img: nettcasino.png
+ - name: Spelpressen
+ url: https://spelpressen.se/
+ img: spelpressen.png
+ - name: Casino Utan Svensk Licens
+ url: https://casino-utan-svensk-licens.com/
+ img: casino_utan_svensk_licens.png
+ - name: Outlook India
+ url: >-
+ https://www.outlookindia.com/outlook-spotlight/casinos-not-on-gamstop-uk-news-302214/
+ img: outlook_india.png
+bronze:
+ - name: Derek Pollard
+ url: https://polyglotengineer.com/derek.pollard
img: derek_pollard.png
- name: Derek Pollard
- - url: 'https://www.earthlink.ro'
- img: earthlink.png
- name: Earthlink
+ - name: BGASoft
+ url: https://www.bgasoft.com
+ img: bgasoft.png
+ - name: RStudio
+ url: https://rstudio.com
+ img: rstudio.png
+ - name: Darkhorse Analytics
+ url: https://www.darkhorseanalytics.com/
+ img: darkhorse_analytics.png
+ - name: vuejs.de - German Vue Community
+ url: https://vuejs.de
+ img: vuejs_de___german_vue_community.svg
+ - name: Liip AG
+ url: https://www.liip.ch/en
+ img: liip_ag.png
+ - name: Bürkert Werke GmbH & Co KG
+ url: https://www.burkert.com
+ img: b_rkert_werke_gmbh___co_kg.png
+ - name: codefortynine
+ url: https://codefortynine.com
+ img: codefortynine.png
+ - name: Arcanite
+ url: https://arcanite.ch
+ img: arcanite.png
+platinum_china:
+ - name: CRMEB
+ url: http://github.crmeb.net/u/vue
+ img: crmeb.svg?v2
+ description: 开源电商系统
+ - name: MISBoot
+ url: https://vue.misboot.com/#/user/Login?from=vuejs
+ img: misboot.png?v3
+ description: 低代码开发平台
+# END SPONSORS
+redirects:
+ '/v2/api/index.html': '/api/'
+ '/v2/guide/index.html': '/guide/introduction.html'
+ '/v2/guide/installation.html': '/guide/quick-start.html'
+ '/v2/guide/instance.html': '/guide/essentials/application.html' # has page redirects
+ '/v2/guide/syntax.html': '/guide/essentials/template-syntax.html'
+ '/v2/guide/computed.html': '/guide/essentials/computed.html' # has page redirects
+ '/v2/guide/class-and-style.html': '/guide/essentials/class-and-style.html'
+ '/v2/guide/conditional.html': '/guide/essentials/conditional.html'
+ '/v2/guide/list.html': '/guide/essentials/list.html'
+ '/v2/guide/events.html': '/guide/essentials/event-handling.html'
+ '/v2/guide/forms.html': '/guide/essentials/forms.html'
+ '/v2/guide/components.html': '/guide/essentials/component-basics.html'
+ '/v2/guide/components-registration.html': '/guide/components/registration.html'
+ '/v2/guide/components-props.html': '/guide/components/props.html' # has page redirects
+ '/v2/guide/components-custom-events.html': '/guide/components/events.html'
+ '/v2/guide/components-slots.html': '/guide/components/slots.html'
+ '/v2/guide/components-dynamic-async.html': '/guide/built-ins/keep-alive.html' # has page redirects
+ '/v2/guide/transitions.html': '/guide/built-ins/transition.html' # has page redirects
+ '/v2/guide/transitioning-state.html': '/guide/extras/animation.html'
+ '/v2/guide/custom-directive.html': '/guide/reusability/custom-directives.html'
+ '/v2/guide/render-function.html': '/guide/extras/render-function.html'
+ '/v2/guide/plugins.html': '/guide/reusability/plugins.html'
+ '/v2/guide/single-file-components.html': '/guide/scaling-up/sfc.html'
+ '/v2/guide/testing.html': '/guide/scaling-up/testing.html'
+ '/v2/guide/typescript.html': '/guide/typescript/overview.html'
+ '/v2/guide/deployment.html': '/guide/best-practices/production-deployment.html'
+ '/v2/guide/routing.html': '/guide/scaling-up/routing.html'
+ '/v2/guide/state-management.html': '/guide/scaling-up/state-management.html'
+ '/v2/guide/ssr.html': '/guide/scaling-up/ssr.html'
+ '/v2/guide/security.html': '/guide/best-practices/security.html'
+ '/v2/guide/reactivity.html': '/guide/extras/reactivity-in-depth.html'
diff --git a/themes/vue/layout/icons/github-dark.ejs b/themes/vue/layout/icons/github-dark.ejs
index eb71a11da5..296fede1ec 100644
--- a/themes/vue/layout/icons/github-dark.ejs
+++ b/themes/vue/layout/icons/github-dark.ejs
@@ -1 +1 @@
-
+
diff --git a/themes/vue/layout/index.ejs b/themes/vue/layout/index.ejs
index 10eed9f2ca..efb5587336 100644
--- a/themes/vue/layout/index.ejs
+++ b/themes/vue/layout/index.ejs
@@ -1,126 +1,157 @@
-
-
-
-
-
- 
" alt="vue logo">
-
-
- The Progressive
-
-Vue.js
-
- The Progressive
JavaScript Framework
-
- - - <%- partial('icons/play') %> - WHY VUE.JS? - ">GET STARTED - - <%- partial('icons/github-dark') %> - GITHUB -
+
+
-
+
+ " alt="Vue logo">
+
+
+ The Progressive
+
Vue.js
+
+ The Progressive
JavaScript Framework
+
+ + + <%- partial('icons/play') %> + WHY VUE.JS? + ">GET STARTED + + <%- partial('icons/github-dark') %> + GITHUB +
+
-  %>)
-
- <%- specialSponsor.description %> - -
+ <%_ if (theme.special) { _%>
+ Special Sponsor
- <% var specialSponsor = theme.special_sponsors[0]; %> - -
- - <%- specialSponsor.description %> - -
+  %>)
+
+ + +
+ <%_ } _%>
-Special Sponsor
+ <% var specialSponsor = theme.special[0]; %> + ++ + +
-
-
-
+ Approachable
-Already know HTML, CSS and JavaScript? Read the guide and start building things in no time!
-
+
-
+
-
+
- Approachable
+Already know HTML, CSS and JavaScript? Read the guide and start building things in no time!
+
-
+ Versatile
-An incrementally adoptable ecosystem that scales between a library and a full-featured framework.
-
+
- Versatile
+An incrementally adoptable ecosystem that scales between a library and a full-featured framework.
+
-
Performant
-
- 20KB min+gzip Runtime
- Blazing Fast Virtual DOM
- Minimal Optimization Efforts
-
+
Performant
+
+ 20KB min+gzip Runtime
+ Blazing Fast Virtual DOM
+ Minimal Optimization Efforts
+
- <%- page.title ? page.title + ' — ' : '' %>Vue.js
@@ -9,17 +11,18 @@
-
+
+
- ">
+
@@ -40,7 +43,7 @@
">
">
- " type="image/png">
+ ">
@@ -48,36 +51,44 @@
-
-
+
+
+
-
+
+
+
+
<%- css(isIndex ? 'css/index' : 'css/page') %>
-
+
+
+ <% if (isThemes) { %>
+
+
+ <% } %>
+
-
-
+
+
+
-
+
+
+ <% if (hasVueSchoolBanner) { %>
+ <%- partial('partials/vueschool_banner') %>
+ <% } %>
+
- <%- partial('partials/sponsors') %>
+
-
+
-
+ <%- partial('partials/sponsors') %>
+
-
+
-
+
-
-
-
-
@@ -136,10 +167,11 @@
})
window.addEventListener('scroll', function () {
- if (window.pageYOffset > 165 && !topScrolled) {
+ var offset = 20
+ if (window.pageYOffset > offset && !topScrolled) {
topScrolled = true
document.getElementById('mobile-bar').classList.remove('top')
- } else if (window.pageYOffset <= 165 && topScrolled) {
+ } else if (window.pageYOffset <= offset && topScrolled) {
topScrolled = false
document.getElementById('mobile-bar').classList.add('top')
}
diff --git a/themes/vue/layout/layout.ejs b/themes/vue/layout/layout.ejs
index b4fcdd2ccd..e2cfbcb80e 100644
--- a/themes/vue/layout/layout.ejs
+++ b/themes/vue/layout/layout.ejs
@@ -1,7 +1,9 @@
<% var isIndex = page.path === 'index.html' %>
+<% var isThemes = page.path === 'resources/themes.html' %>
+<% var hasVueSchoolBanner = true %>
-
+
-
- Video by Vue Mastery. Watch Vue Mastery’s free Intro to Vue course. +
+
+
+
+ + Video by + + Vue Mastery + . Watch Vue Mastery’s free + + Intro to Vue course + .
>
@@ -85,11 +96,7 @@
<%- partial('partials/header') %>
<% if (!isIndex) { %>
<% } else { %>
@@ -101,9 +108,9 @@
-
+
<%- css('css/search') %>
-
+
-
-
-
+
diff --git a/themes/vue/layout/page.ejs b/themes/vue/layout/page.ejs
index cd5204b3bc..7ccbb38985 100644
--- a/themes/vue/layout/page.ejs
+++ b/themes/vue/layout/page.ejs
@@ -1,52 +1,57 @@
-<% if (page.type) { %>
- <%- partial('partials/sidebar', { type: page.type === 'menu' ? 'guide' : page.type, index: page.index }) %>
-<% } else { %>
-
+<% if (page.type) { %> <%- partial('partials/sidebar', { type: page.type ===
+'menu' ? 'guide' : page.type, index: page.index }) %> <% } else { %>
+
<% } %>
-
- <% if (page.type) { %>
- <% if (page.type === 'menu') { %>
-
- <%- partial('partials/toc', { type: 'guide' }) %>
- <% } else { %>
- <%- partial('partials/ad') %>
+
diff --git a/themes/vue/layout/partials/ad-text.ejs b/themes/vue/layout/partials/ad-text.ejs
index 73e83ef0b9..a806a186c5 100644
--- a/themes/vue/layout/partials/ad-text.ejs
+++ b/themes/vue/layout/partials/ad-text.ejs
@@ -1,13 +1,11 @@
-
+
+
diff --git a/themes/vue/layout/partials/ad.ejs b/themes/vue/layout/partials/ad.ejs
index 1a904321d3..9c035c3f02 100644
--- a/themes/vue/layout/partials/ad.ejs
+++ b/themes/vue/layout/partials/ad.ejs
@@ -1,8 +1,10 @@
+<% if (!page.sponsors && !page.partners) { %>
+<% } %>
diff --git a/themes/vue/layout/partials/ecosystem_dropdown.ejs b/themes/vue/layout/partials/ecosystem_dropdown.ejs
index 88a739c322..f3e0f80d5a 100644
--- a/themes/vue/layout/partials/ecosystem_dropdown.ejs
+++ b/themes/vue/layout/partials/ecosystem_dropdown.ejs
@@ -3,39 +3,32 @@
diff --git a/themes/vue/layout/partials/header.ejs b/themes/vue/layout/partials/header.ejs
index 0816e99d41..6d26110791 100644
--- a/themes/vue/layout/partials/header.ejs
+++ b/themes/vue/layout/partials/header.ejs
@@ -1,9 +1,19 @@
-
- ">
- " alt="vue logo">
- Vue.js
-
-
+
Translations
diff --git a/themes/vue/layout/partials/learn_dropdown.ejs b/themes/vue/layout/partials/learn_dropdown.ejs
index 7f79a504d3..dfc305f039 100644
--- a/themes/vue/layout/partials/learn_dropdown.ejs
+++ b/themes/vue/layout/partials/learn_dropdown.ejs
@@ -14,8 +14,20 @@
diff --git a/themes/vue/layout/partials/main_menu.ejs b/themes/vue/layout/partials/main_menu.ejs
index 7474e22f56..f6f47769e1 100644
--- a/themes/vue/layout/partials/main_menu.ejs
+++ b/themes/vue/layout/partials/main_menu.ejs
@@ -1,12 +1,12 @@
<%- partial('partials/learn_dropdown') %>
<%- partial('partials/ecosystem_dropdown') %>
+<%- partial('partials/resources_dropdown') %>
- " class="nav-link team<%- page.path.match(/team\.html/) ? ' current' : '' %>">Team
+ EOLNEW
-<%- partial('partials/support_vue_dropdown') %>
<%- partial('partials/language_dropdown') %>
diff --git a/themes/vue/layout/partials/platinum_sponsors.ejs b/themes/vue/layout/partials/platinum_sponsors.ejs
index 9af6df99b8..f402302576 100644
--- a/themes/vue/layout/partials/platinum_sponsors.ejs
+++ b/themes/vue/layout/partials/platinum_sponsors.ejs
@@ -2,9 +2,9 @@
+
+
+
+ ">
+ " alt="Vue logo">
+ Vue.js
+
+
+
diff --git a/themes/vue/layout/partials/language_dropdown.ejs b/themes/vue/layout/partials/language_dropdown.ejs
index a5ad14553c..6f3d0fad3b 100644
--- a/themes/vue/layout/partials/language_dropdown.ejs
+++ b/themes/vue/layout/partials/language_dropdown.ejs
@@ -1,12 +1,14 @@
Video Courses
-
-
- Vue Mastery -
- Vue School +
- + + Vue Mastery + + +
- + + Vue School + +
Platinum Sponsors
+ Resources
+
+
diff --git a/themes/vue/layout/partials/sidebar.ejs b/themes/vue/layout/partials/sidebar.ejs
index 25c98c0289..4d421e8862 100644
--- a/themes/vue/layout/partials/sidebar.ejs
+++ b/themes/vue/layout/partials/sidebar.ejs
@@ -1,8 +1,12 @@
+<% var isHomePage = page.path === 'index.html' %>
+
-
+<% if (!page.sponsors && !page.partners) { %>
<%- partial('partials/platinum_sponsors', { context: 'right' }) %>
+<% } %>
diff --git a/themes/vue/layout/partials/sponsors.ejs b/themes/vue/layout/partials/sponsors.ejs
index 086397112f..7ef4e9cf7e 100644
--- a/themes/vue/layout/partials/sponsors.ejs
+++ b/themes/vue/layout/partials/sponsors.ejs
@@ -1,37 +1,23 @@
+<% function logo(img) { return `https://sponsors.vuejs.org/images/${img}` } %>
+
 %>)
+<%_ for (const sponsor of theme.platinum) {_%>
+
+  %>)
<%_ } _%>
-<%_ for (const sponsor of theme.gold_sponsors) {_%> - -
+<%_ for (const sponsor of theme.gold) {_%>
+
+
<%_ } _%>
">Become a Sponsor! - -
- <%_ for (const sponsor of theme.platinum_sponsors) {_%>
-
-  %>)
+ <%_ for (const sponsor of theme.platinum) {_%>
+
+ 
<%_ } _%>
diff --git a/themes/vue/layout/partials/resources_dropdown.ejs b/themes/vue/layout/partials/resources_dropdown.ejs
new file mode 100644
index 0000000000..ba6d6c18b0
--- /dev/null
+++ b/themes/vue/layout/partials/resources_dropdown.ejs
@@ -0,0 +1,39 @@
+
+ <%_ for (const sponsor of theme.platinum) {_%>
+
+
<%_ } _%>
Patreon Sponsors
-<%_ for (const sponsor of theme.platinum_sponsors) {_%> - -
+<%_ for (const sponsor of theme.platinum) {_%>
+
+ -<%_ for (const sponsor of theme.gold_sponsors) {_%> - -
+<%_ for (const sponsor of theme.gold) {_%>
+
+ ">Become a Sponsor! - -
- 
-