From 1a0e6f436c35cab752dc24c7d1869dd968d37a5a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=81tila=20Camur=C3=A7a=20Alves?= Date: Sat, 2 Mar 2019 10:54:36 -0300 Subject: [PATCH 1/8] Link to custom-elements-everywhere.com (#2039) The site runs a suite of tests against a framework to identify interoperability issues, and highlight potential fixes already implemented in other frameworks. This is a great way to give more confidence while choosing Vue. --- src/v2/guide/index.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/v2/guide/index.md b/src/v2/guide/index.md index 9f81c29936..2445ace4c4 100644 --- a/src/v2/guide/index.md +++ b/src/v2/guide/index.md @@ -393,6 +393,8 @@ You may have noticed that Vue components are very similar to **Custom Elements** 2. Vue components provide important features that are not available in plain custom elements, most notably cross-component data flow, custom event communication and build tool integrations. +Although Vue doesn't use custom elements internally, it has [great interoperability](https://custom-elements-everywhere.com/#vue) when it comes to consuming or distributing as custom elements. Vue CLI also supports building Vue components that register themselves as native custom elements. + ## Ready for More? We've briefly introduced the most basic features of Vue.js core - the rest of this guide will cover them and other advanced features with much finer details, so make sure to read through it all! From 5b979bf7fafebea9550b0990857ee3c8ef95d157 Mon Sep 17 00:00:00 2001 From: "P.E. Butler III" Date: Sat, 2 Mar 2019 22:23:49 -0700 Subject: [PATCH 2/8] Updated Nuxtent link (#2041) --- src/v2/cookbook/serverless-blog.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/cookbook/serverless-blog.md b/src/v2/cookbook/serverless-blog.md index 7a62d3c72f..84f2a20861 100644 --- a/src/v2/cookbook/serverless-blog.md +++ b/src/v2/cookbook/serverless-blog.md @@ -298,7 +298,7 @@ created() { ## Alternative Patterns -An alternative pattern to consider, especially if you prefer writing only in Markdown, is using something like [Nuxtent](https://nuxtent.now.sh/guide/writing#async-components). Nuxtent allows you to use `Vue Component` inside of Markdown files. This approach would be akin to a static site approach (i.e. Jekyll) where you compose your blog posts in Markdown files. Nuxtent adds a nice integration between Vue.js and Markdown allowing you to live in a 100% Vue.js world. +An alternative pattern to consider, especially if you prefer writing only in Markdown, is using something like [Nuxtent](https://nuxtent-module.netlify.com/guide/writing/#async-components). Nuxtent allows you to use `Vue Component` inside of Markdown files. This approach would be akin to a static site approach (i.e. Jekyll) where you compose your blog posts in Markdown files. Nuxtent adds a nice integration between Vue.js and Markdown allowing you to live in a 100% Vue.js world. ## Wrap up From 93eefd31e970eafe5baa69780e04037ac831f43f Mon Sep 17 00:00:00 2001 From: Ricardo Ambrogi Date: Sun, 3 Mar 2019 20:07:30 +0100 Subject: [PATCH 3/8] Fix wrong statement about arrow function and bound this (#2040) * Fix wrong statement about arrow function and bound this Stating that arrow functions are bound to it's parent `this` is wrong, arrow functions does not have a `this` at all. More: https://twitter.com/getify/status/1101521219243966466 * Update src/v2/guide/instance.md Co-Authored-By: KadoBOT * Update instance.md Remove unnecessary `a` --- src/v2/guide/instance.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/guide/instance.md b/src/v2/guide/instance.md index 826aa97d9c..268bab16d2 100644 --- a/src/v2/guide/instance.md +++ b/src/v2/guide/instance.md @@ -142,7 +142,7 @@ new Vue({ There are also other hooks which will be called at different stages of the instance's lifecycle, such as [`mounted`](../api/#mounted), [`updated`](../api/#updated), and [`destroyed`](../api/#destroyed). All lifecycle hooks are called with their `this` context pointing to the Vue instance invoking it. -

Don't use [arrow functions](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions) on an options property or callback, such as `created: () => console.log(this.a)` or `vm.$watch('a', newValue => this.myMethod())`. Since arrow functions are bound to the parent context, `this` will not be the Vue instance as you'd expect, often resulting in errors such as `Uncaught TypeError: Cannot read property of undefined` or `Uncaught TypeError: this.myMethod is not a function`.

+

Don't use [arrow functions](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions) on an options property or callback, such as `created: () => console.log(this.a)` or `vm.$watch('a', newValue => this.myMethod())`. Since an arrow function doesn't have a `this`, `this` will be treated as any other variable and lexically looked up through parent scopes until found, often resulting in errors such as `Uncaught TypeError: Cannot read property of undefined` or `Uncaught TypeError: this.myMethod is not a function`.

## Lifecycle Diagram From 08105cc4956fa87220fb1cf021152c667e29479f Mon Sep 17 00:00:00 2001 From: logustra Date: Thu, 7 Mar 2019 16:36:02 +0700 Subject: [PATCH 4/8] translate ssr --- src/v2/guide/ssr.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/v2/guide/ssr.md b/src/v2/guide/ssr.md index 7a206f9c19..bc7a2204a4 100644 --- a/src/v2/guide/ssr.md +++ b/src/v2/guide/ssr.md @@ -1,17 +1,17 @@ --- -title: Server-Side Rendering +title: Rendering di Sisi Server (SSR) type: guide order: 503 --- -## The Complete SSR Guide +## Panduan Rendering di Sisi Server (SSR) -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/). +Kami telah membuat panduan untuk membuat aplikasi Vue yang dibuat di server. Ini adalah panduan yang sangat mendalam bagi mereka yang akrab dengan pengembangan Vue di sisi klien, pengembangan Node.js di sisi server dan webpack. Lihat di [ssr.vuejs.org](https://ssr.vuejs.org/). ## Nuxt.js -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. +Mengkonfigurasi dengan benar semua aspek yang dibahas dari aplikasi yang disediakan oleh server dapat menjadi tugas yang menakutkan. Untungnya, ada proyek komunitas luar biasa yang bertujuan untuk mempermudah semua ini: [Nuxt.js](https://nuxtjs.org/). Nuxt.js adalah kerangka kerja tingkat tinggi yang dibangun di atas ekosistem Vue yang memberikan pengalaman pengembangan yang sangat efisien untuk menulis aplikasi Vue secara universal. Lebih baik lagi, Anda bahkan dapat menggunakannya sebagai generator situs statis (dengan halaman yang ditulis sebagai satu file komponen Vue)! Kami sangat merekomendasikan untuk mencobanya. -## Quasar Framework SSR + PWA +## Kerangka Kerja Quasar di Sisi Server (SSR) + Applikasi nan Progresif (PWA) -[Quasar Framework](https://quasar-framework.org/) will generate an SSR app (with optional PWA handoff) that leverages its best-in-class build system, sensible configuration and developer extensibility to make designing and building your idea a breeze. With over one hundred specific "Material Design 2.0"-compliant components, you can decide which ones to execute on the server, which are available in the browser - and even manage the `` tags of your site. Quasar is a node.js and webpack based development environment that supercharges and streamlines rapid development of SPA, PWA, SSR, Electron and Cordova apps - all from one codebase. +[Kerangka Kerja Quasar](https://quasar-framework.org/) akan menghasilkan aplikasi di sisi server (dengan pilihan Aplikasi nan Progresif (PWA)) yang memanfaatkan sistem build terbaik di kelasnya, konfigurasi yang masuk akal, dan ekstensibilitas pengembang untuk membuat, mendesain, dan membangun ide Anda dengan mudah. Dengan lebih dari seratus komponen yang sesuai dengan “Material Design 2.0”, Anda dapat memutuskan mana yang akan dijalankan di server yang tersedia di browser, dan bahkan mengelola tag `` di situs Anda. Quasar adalah kerangka kerja berbasis node.js dan webpack yang super dan dapat mempersingkat pengembangan Aplikasi Satu Halaman (SPA), Aplikasi nan Progresif (PWA), Rendering di Sisi Server (SSR), Electron, dan Cordova dengan cepat - semuanya dari satu basis kode. From 790c45bee62e93890be31ba3b18939ee8fccb2c1 Mon Sep 17 00:00:00 2001 From: Nusendra Hanggarawan Date: Thu, 7 Mar 2019 17:26:44 +0700 Subject: [PATCH 5/8] Update src/v2/guide/ssr.md Co-Authored-By: logustra --- src/v2/guide/ssr.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/guide/ssr.md b/src/v2/guide/ssr.md index bc7a2204a4..354b0bc7f9 100644 --- a/src/v2/guide/ssr.md +++ b/src/v2/guide/ssr.md @@ -4,7 +4,7 @@ type: guide order: 503 --- -## Panduan Rendering di Sisi Server (SSR) +## Panduan Lengkap Rendering di Sisi Server (SSR) Kami telah membuat panduan untuk membuat aplikasi Vue yang dibuat di server. Ini adalah panduan yang sangat mendalam bagi mereka yang akrab dengan pengembangan Vue di sisi klien, pengembangan Node.js di sisi server dan webpack. Lihat di [ssr.vuejs.org](https://ssr.vuejs.org/). From 37512ff12a8853edd2749c99c3ff8098f8909983 Mon Sep 17 00:00:00 2001 From: Nusendra Hanggarawan Date: Thu, 7 Mar 2019 17:27:51 +0700 Subject: [PATCH 6/8] Update src/v2/guide/ssr.md Co-Authored-By: logustra --- src/v2/guide/ssr.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/guide/ssr.md b/src/v2/guide/ssr.md index 354b0bc7f9..3a1b139700 100644 --- a/src/v2/guide/ssr.md +++ b/src/v2/guide/ssr.md @@ -6,7 +6,7 @@ order: 503 ## Panduan Lengkap Rendering di Sisi Server (SSR) -Kami telah membuat panduan untuk membuat aplikasi Vue yang dibuat di server. Ini adalah panduan yang sangat mendalam bagi mereka yang akrab dengan pengembangan Vue di sisi klien, pengembangan Node.js di sisi server dan webpack. Lihat di [ssr.vuejs.org](https://ssr.vuejs.org/). +Kami telah membuat panduan khusus untuk membangun aplikasi Vue yang bisa dirender di sisi server. Ini adalah panduan yang sangat lengkap dan mendalam bagi mereka yang sudah terbiasa dengan pengembangan Vue di sisi klien, pengembangan Node.js di sisi server dan webpack. Lihat di [ssr.vuejs.org](https://ssr.vuejs.org/). ## Nuxt.js From 79a86b0e9e0b1efd5ad590d16b740d8445bb5e53 Mon Sep 17 00:00:00 2001 From: Nusendra Hanggarawan Date: Thu, 7 Mar 2019 17:31:32 +0700 Subject: [PATCH 7/8] Update src/v2/guide/ssr.md Co-Authored-By: logustra --- src/v2/guide/ssr.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/guide/ssr.md b/src/v2/guide/ssr.md index 3a1b139700..7a541d8d51 100644 --- a/src/v2/guide/ssr.md +++ b/src/v2/guide/ssr.md @@ -14,4 +14,4 @@ Mengkonfigurasi dengan benar semua aspek yang dibahas dari aplikasi yang disedia ## Kerangka Kerja Quasar di Sisi Server (SSR) + Applikasi nan Progresif (PWA) -[Kerangka Kerja Quasar](https://quasar-framework.org/) akan menghasilkan aplikasi di sisi server (dengan pilihan Aplikasi nan Progresif (PWA)) yang memanfaatkan sistem build terbaik di kelasnya, konfigurasi yang masuk akal, dan ekstensibilitas pengembang untuk membuat, mendesain, dan membangun ide Anda dengan mudah. Dengan lebih dari seratus komponen yang sesuai dengan “Material Design 2.0”, Anda dapat memutuskan mana yang akan dijalankan di server yang tersedia di browser, dan bahkan mengelola tag `` di situs Anda. Quasar adalah kerangka kerja berbasis node.js dan webpack yang super dan dapat mempersingkat pengembangan Aplikasi Satu Halaman (SPA), Aplikasi nan Progresif (PWA), Rendering di Sisi Server (SSR), Electron, dan Cordova dengan cepat - semuanya dari satu basis kode. +[*Framework* Quasar](https://quasar-framework.org/) mampu membuat aplikasi *SSR* (dengan opsi PWA) yang bisa memanfaatkan sistem *build* terbaik di kelasnya, konfigurasi yang masuk akal, dan ekstensibilitas pengembang untuk membuat, mendesain, dan membangun ide Anda dengan mudah. Dengan lebih dari seratus komponen yang sesuai dengan “Material Design 2.0”, Anda bisa memutuskan komponen mana yang akan dijalankan di sisi server, yang tersedia di browser, dan bahkan bisa mengelola tag `` di situs Anda. Quasar adalah *framework* yang berbasis node.js dan webpack, serta dapat mempersingkat pengembangan SPA, PWA, SSR, Electron, dan Cordova. Semuanya hanya berasal dari satu basis kode. From 0703f21ad2fcfd77d9c8a2ed6ff64ddc614f3c5a Mon Sep 17 00:00:00 2001 From: Nusendra Hanggarawan Date: Thu, 7 Mar 2019 17:33:30 +0700 Subject: [PATCH 8/8] Update src/v2/guide/ssr.md Co-Authored-By: logustra --- src/v2/guide/ssr.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/guide/ssr.md b/src/v2/guide/ssr.md index 7a541d8d51..566d420691 100644 --- a/src/v2/guide/ssr.md +++ b/src/v2/guide/ssr.md @@ -10,7 +10,7 @@ Kami telah membuat panduan khusus untuk membangun aplikasi Vue yang bisa dirende ## Nuxt.js -Mengkonfigurasi dengan benar semua aspek yang dibahas dari aplikasi yang disediakan oleh server dapat menjadi tugas yang menakutkan. Untungnya, ada proyek komunitas luar biasa yang bertujuan untuk mempermudah semua ini: [Nuxt.js](https://nuxtjs.org/). Nuxt.js adalah kerangka kerja tingkat tinggi yang dibangun di atas ekosistem Vue yang memberikan pengalaman pengembangan yang sangat efisien untuk menulis aplikasi Vue secara universal. Lebih baik lagi, Anda bahkan dapat menggunakannya sebagai generator situs statis (dengan halaman yang ditulis sebagai satu file komponen Vue)! Kami sangat merekomendasikan untuk mencobanya. +Mengkonfigurasi aplikasi *server-rendered* di tingkat produksi yang mencakup keseluruhan aspek bisa menjadi tugas yang sangat menakutkan. Untungnya, ada proyek dari komunitas yang luar biasa dengan tujuan untuk mempermudah semua tugas ini: [Nuxt.js](https://nuxtjs.org/). Nuxt.js adalah *framework* tingkat tinggi yang dibangun di atas ekosistem Vue mampu memberikan pengalaman pengembangan yang sangat efisien untuk membangun aplikasi Vue secara universal. bahkan bisa lebih baik lagi, Anda bisa menggunakannya sebagai *generator* situs statis (dengan halaman yang ditulis menggunakan satu file komponen Vue saja)! Kami sangat merekomendasikan Anda untuk mencobanya. ## Kerangka Kerja Quasar di Sisi Server (SSR) + Applikasi nan Progresif (PWA)