Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs(id): fix type in faq/jsx.md and add files guides/internals-glossary v2 #793

Merged
merged 16 commits into from
Oct 25, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 33 additions & 0 deletions content/id/faq/jsx.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
---
title: Cara menggunakan JSX ?
description: Bagaimana cara menggunakan JSX dengan Nuxt.js?
category: configuration
position: 3
---

Nuxt.js menggunakan [@nuxt/babel-preset-app](https://github.com/nuxt/nuxt.js/tree/dev/packages/babel-preset-app), yang mana didasarkan *official* dari [@vue/babel-preset-app](https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/babel-preset-app) untuk konfigurasi babel secara *default*, sehingga Anda dapat menggunakan JSX di komponen.



Anda sekarang dapat menggunakan JSX dalam *method* `render` pada komponen Anda:

```html
<script>
export default {
data() {
return { name: 'World' }
},
render(h) {
return <h1 class="red">{this.name}</h1>
}
}
</script>
```

<div class="Alert Alert--orange">

Alias `createElement` menjadi `h` adalah konvensi umum yang akan Anda lihat di ekosistem Vue, tetapi sebenarnya opsional untuk JSX karena itu [_inject_ secara otomatis](https://github.com/vuejs/babel-plugin-transform-vue-jsx#h-auto-injection) `const h = this.$createElement` dalam beberapa *method* dan pengambilan apapun (bukan *function* atau *arrow function*) yang dideklarasikan dalam sintaks ES2015 yang memiliki JSX sehingga Anda dapat menghapus parameter (h).

</div>

Anda dapat mempelajari lebih lanjut tentang cara menggunakannya di [Bagian JSX](https://vuejs.org/v2/guide/render-function.html#JSX) dari dokumentasi Vue.js.
45 changes: 45 additions & 0 deletions content/id/guides/internals-glossary/nuxt-render-and-get-window.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
---
title: 'nuxt.renderAndGetWindow(url, options)'
description: Dapatkan `window` dari URL tertentu dari Aplikasi Nuxt.js.
menu: renderAndGetWindow
category: internals-glossary
position: 12
---

- Tipe: `Function`
- Argument: `String`
1. `String`: URL untuk dirender
2. _Optional_, `Object`: opsi
- Konsol virtual: `Boolean` (default: `true`)
- Kembalian: `Promise`
- Kembalian: `window`

> Dapatkan window dari URL tertentu dari Aplikasi Nuxt.js.

<base-alert>

*Method* ini dibuat untuk tujuan pengujian.

</base-alert>

Untuk menggunakan *function* ini, Anda harus menginstal `jsdom`:

```bash
npm install --save-dev jsdom
```

Contoh:

```js
const { Nuxt, Builder } = require('nuxt')

const config = require('./nuxt.config.js')
config.dev = false

const nuxt = new Nuxt(config)

nuxt.renderAndGetWindow('http://localhost:3000').then(window => {
// menampilkan head `<title>`
console.log(window.document.title)
})
```
55 changes: 55 additions & 0 deletions content/id/guides/internals-glossary/nuxt-render-route.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
---
title: 'nuxt.renderRoute(route, context)'
description: Merender rute tertentu dengan konteks tertentu.
menu: renderRoute
category: internals-glossary
position: 11
---

- Tipe: `Function`
- Argumen:
1. `String` : rute untuk dirender
2. _Optional_, `Object`, konteks yang diberikan, kunci yang tersedia: `req` & `res`
- Kembalian: `Promise`
- `html`: `String`
- `error`: `null` atau `Object`
- `redirected`: `false` atau `Object`

> Merender rute tertentu dengan konteks tertentu.

*Method* ini harus digunakan sebagian besar untuk tujuan pengujian dan juga dengan [`nuxt.renderAndGetWindow`](/guides/internals-glossary/nuxt-render-and-get-window).

<base-alert>

`nuxt.renderRoute` harus dijalankan setelah proses _build_ dalam mode produksi.

</base-alert>

```js
const { loadNuxt, build } = require('nuxt')

async function start() {
// Pastikan untuk `nuxt build` berjalan sebelum menjalankan skrip init
const nuxt = await loadNuxt({ for: 'start' })

const { html, error, redirected } = await nuxt.renderRoute('/')

// `html` akan selalu menjadi string

// `error` tidak null saat tata letak kesalahan ditampilkan, format kesalahannya adalah:
// { statusCode: 500, message: 'My error message' }

// `redirected` tidak `false` ketika `redirect()` telah digunakan di `asyncData()` atau `fetch()`
// { path: '/other-path', query: {}, status: 302 }
}

start()
```

### Apa berikutnya

<base-alert type="next">

Lihat [buku Komponen Glosarium](/guides/components-glossary/pages-fetch)

</base-alert>
49 changes: 49 additions & 0 deletions content/id/guides/internals-glossary/nuxt-render.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
---
title: 'nuxt.render(req, res)'
description: Anda dapat menggunakan Nuxt.js sebagai middleware untuk server Node.js Anda.
menu: render
category: internal-glosarium
position: 10
---

- Tipe: `Function`
- Argumen:
1. [Request](https://nodejs.org/api/http.html#http_class_http_incomingmessage)
2. [Response](https://nodejs.org/api/http.html#http_class_http_serverresponse)
- Kembalian : `Promise`

> Anda dapat menggunakan Nuxt.js sebagai middleware dengan `nuxt.render` untuk server node.js Anda.

Contoh dengan [Express](https://github.com/expressjs/express):

```js
const { loadNuxt, build } = require('nuxt')

const app = require('express')()
const isDev = process.env.NODE_ENV !== 'production'
const port = process.env.PORT || 3000

async function start() {
// kita mendapatkan instance Nuxt
const nuxt = await loadNuxt(isDev ? 'dev' : 'start')

// Render setiap rute dengan Nuxt.js
app.use(nuxt.render)

// Build hanya dalam mode pengembang dengan hot-reload
if (isDev) {
build(nuxt)
}
// Dengarkan server
app.listen(port, '0.0.0.0')
console.log('Server listening on `localhost:' + port + '`.')
}

start()
```

<div class="Alert">

Direkomendasikan untuk memanggil `nuxt.render` di akhir middleware Anda, karena ini akan menangani _rendering_ aplikasi web Anda dan tidak akan memanggil `next()`

</div>
40 changes: 40 additions & 0 deletions content/id/guides/internals-glossary/nuxt.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
---
title: 'Menggunakan Nuxt.js Secara Terprogram'
description: Anda dapat menggunakan Nuxt.js secara terprogram untuk menggunakannya sebagai _middleware_ yang memberi Anda kebebasan untuk membuat server sendiri untuk merender aplikasi web Anda.
menu: Using Nuxt Programmatically
category: internals-glossary
position: 9
---

Anda mungkin ingin menggunakan server Anda sendiri dengan _middleware_ dan API Anda. Itulah mengapa Anda dapat menggunakan Nuxt.js secara terprogram.

## Nuxt Konstrukor

Untuk melihat daftar opsi yang akan diberikan kepada Nuxt.js, lihat bagian konfigurasi.

```js
const { loadNuxt, build } = require('nuxt')

// Periksa apakah kita perlu menjalankan Nuxt dalam mode pengembangan
const isDev = process.env.NODE_ENV !== 'production'

// Siapkan instance Nuxt yang siap digunakan
const nuxt = await loadNuxt(isDev ? 'dev' : 'start')

// Aktifkan live build & muat ulang di dev
if (isDev) {
build(nuxt)
}

// Kita bisa menggunakan `nuxt.render (req, res)` atau `nuxt.renderRoute (route, context)`
```

Anda dapat melihatnya di [nuxt-express](https://github.com/nuxt/express) dan [adonuxt](https://github.com/nuxt/adonuxt) untuk pemula agar memulai dengan cepat.

### Catatan _Debug_

Jika Anda ingin menampilkan log Nuxt.js, Anda dapat menambahkan kode berikut ini ke bagian atas berkas Anda:

```js
process.env.DEBUG = 'nuxt:*'
```