From 9fcb57bf6d2b061d0ed919d1fd9f93081eb59462 Mon Sep 17 00:00:00 2001 From: MachinisteWeb Date: Sat, 10 Mar 2018 16:49:30 +0100 Subject: [PATCH 1/3] Some typo fix Signed-off-by: MachinisteWeb --- en/api/configuration-env.md | 14 ++++++------ en/api/context.md | 6 +++--- en/examples/auth-external-jwt.md | 37 +++++++++++++++++++------------- en/guide/development-tools.md | 16 ++++++++------ en/guide/menu.json | 2 +- en/guide/vuex-store.md | 4 +++- 6 files changed, 47 insertions(+), 32 deletions(-) diff --git a/en/api/configuration-env.md b/en/api/configuration-env.md index 74b32fa1f..b00fdac0d 100644 --- a/en/api/configuration-env.md +++ b/en/api/configuration-env.md @@ -19,18 +19,19 @@ module.exports = { } ``` -This lets me create a `baseUrl` property that will be equal to the `BASE_URL` environment variable if defined, otherwise, equal to `http://localhost:3000`. +This lets you create a `baseUrl` property that will be equal to the `BASE_URL` environment variable if defined, otherwise, equal to `'http://localhost:3000'`. Then, I can access my `baseUrl` variable with 2 ways: -1. Via `process.env.baseUrl` -2. Via `context.env.baseUrl`, see [context api](/api/context) +1. Via `process.env.baseUrl`. +2. Via `context.env.baseUrl`, see [context API](/api/context). You can use the `env` property for giving public token for example. For the example above, we can use it to configure [axios](https://github.com/mzabriskie/axios). `plugins/axios.js`: + ```js import axios from 'axios' @@ -42,18 +43,19 @@ export default axios.create({ Then, in your pages, you can import axios like this: `import axios from '~/plugins/axios'` ## process.env == {} -Note that nuxt uses webpack's `definePlugin` to define the environmental variable. This means that, the actual `process` or `process.env` from node is not available and is not defined. Each of the env properties defined in nuxt.config.js is individually mapped to process.env.xxxx and converted during compilation. + +Note that Nuxt uses webpack's `definePlugin` to define the environmental variable. This means that, the actual `process` or `process.env` from Node.js is not available and is not defined. Each of the env properties defined in nuxt.config.js is individually mapped to `process.env.xxxx` and converted during compilation. Meaning, `console.log(process.env)` will output `{}` but `console.log(process.env.you_var)` will still output your value. When webpack compiles your code, it replaces all instances of `process.env.your_var` to the value you've set it to. ie: `env.test = 'testing123'`. If you use `process.env.test` in your code somewhere, it is actually translated to 'testing123'. before + ``` if (process.env.test == 'testing123') ``` after + ``` if ('testing123' == 'testing123') ``` - - diff --git a/en/api/context.md b/en/api/context.md index 542132770..0b992aaca 100644 --- a/en/api/context.md +++ b/en/api/context.md @@ -10,11 +10,11 @@ List of all the available keys in `context`: | Key | Type | Available | Description | |------------------------|------------------------------------------------------------------------------------|-----------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | `app` | Root Vue Instance | Client & Server | The root Vue instance that includes all your plugins. For example, when using `axios`, you can get access to `$axios` through `context.app.$axios`. | -| `isClient` | `Boolean` | Client & Server | Boolean to let you know if you're actually renderer from the client-side. (_deprecated._ use `process.client`) | -| `isServer` | `Boolean` | Client & Server | Boolean to let you know if you're actually renderer from the server-side. (_deprecated._ use `process.server`) | +| `isClient` | `Boolean` | Client & Server | Boolean to let you know if you're actually renderer from the client-side (_deprecated._ use `process.client`). | +| `isServer` | `Boolean` | Client & Server | Boolean to let you know if you're actually renderer from the server-side (_deprecated._ use `process.server`). | | `isStatic` | `Boolean` | Client & Server | Boolean to let you know if you're actually inside a generated app (via `nuxt generate`). | | `isDev` | `Boolean` | Client & Server | Boolean to let you know if you're in dev mode, can be useful for caching some data in production. | -| `isHMR` | `Boolean` | Client & Server | Boolean to let you know if the method/middleware is called from webpack hot module replacement (*only on client-side in dev mode*). | +| `isHMR` | `Boolean` | Client & Server | Boolean to let you know if the method/middleware is called from webpack hot module replacement (*only on client-side in dev mode*). | | `route` | [Vue Router Route](https://router.vuejs.org/en/api/route-object.html) | Client & Server | Vue Router route instance. | | `store` | [Vuex Store](https://vuex.vuejs.org/en/api.html#vuexstore-instance-properties) | Client & Server | Vuex Store instance. **Available only if the [vuex store](/guide/vuex-store) is set**. | | `env` | `Object` | Client & Server | Environment variables set in `nuxt.config.js`, see [env api](/api/configuration-env). | diff --git a/en/examples/auth-external-jwt.md b/en/examples/auth-external-jwt.md index f58cfbb5c..89f0ad071 100644 --- a/en/examples/auth-external-jwt.md +++ b/en/examples/auth-external-jwt.md @@ -6,16 +6,19 @@ code: https://github.com/ahadyekta/nuxt-auth-external-jwt --- # Documentation -In auth-routes example both api and nuxt start together and use one node server. However, sometimes we should work with external api with jsonWebToken. -In this example it will be explained in a simple way. -## Structure: +In auth-routes example both api and nuxt start together and use one Node.js server instance. However, sometimes we should work with external api with jsonWebToken. In this example it will be explained in a simple way. -Since the nuxt.js provides both server and client rendering and the cookie of browser is different from cookie of the node server, we should push token data to somestorage that can be accessible in both sides. +## Structure + +Since Nuxt.js provides both server and client rendering and the cookie of browser is different from cookie of the Node.js server, we should push token data to some storage that can be accessible in both sides. + +### For server rendering + +We should save the token in session browser cookie after login, then it can be accessed through `req.headers.cookie` in middleware files, `nuxtServerInit` function or wherever you can access the `req`. + +### For client rendering -### For server rendering: -We should save the token in browser cookie after login, then it can be accessed through `req.headers.cookie` in middleware files, nuxtServerInit function or wherever you can access the `req`. -### For client rendering: We directly commit token in the store, as long as the page is not closed or reloaded, we have the token. First, we install the dependencies: @@ -27,7 +30,7 @@ npm install cookieparser --save ## Login Page -Then inside page directory make `login.vue` , and inside the script section: +Then inside page directory make a `login.vue` file, and inside the script section, add: ```js import Cookie from 'js-cookie' @@ -40,15 +43,16 @@ export default { const auth = { accessToken: 'someStringGotFromApiServiceWithAjax' } - this.$store.commit('update', auth) //mutating to store for client rendering - Cookie.set('auth', auth) //saving token in cookie for server rendering + this.$store.commit('update', auth) // mutating to store for client rendering + Cookie.set('auth', auth) // saving token in cookie for server rendering this.$router.push('/') }, 1000) } } } ``` -> Note: We simulate the async request with timeout. + +> Note: we simulate the async request with timeout. ## Using the store @@ -56,7 +60,9 @@ After that make `index.js` in `store` directory like below : ```javascript import Vuex from 'vuex' + var cookieparser = require('cookieparser') + const createStore = () => { return new Vuex.Store({ state: { @@ -79,14 +85,15 @@ const createStore = () => { } }) } + export default createStore ``` -> Note: The `nuxtServerInit` function only runs in every server side rendering. So we use it to mutate the browser cookie in the store. we can get the browser cookie by req.headers.cookie and parse it using `cookieparser` +> Note: the `nuxtServerInit` function only runs in every server side rendering. So we use it to mutate the session browser cookie in the store. We can get the session browser cookie by using `req.headers.cookie` and parse it using `cookieparser`. ## checking auth middlewares -we can check the store for havin the accessToken in every page we need to limit access. -in middleware directory we make `authenticated.js` file: + +We can check the store for havin the accessToken in every page we need to limit access. In middleware directory we make `authenticated.js` file: ```javascript export default function ({ store, redirect }) { @@ -107,5 +114,5 @@ export default function ({ store, redirect }) { } } ``` -> Note: use `authenticated` for pages which need authentication and use `notAuthenticated` middleware inside the login/register pages. +> Note: use `authenticated` middleware for pages which need authentication and use `notAuthenticated` middleware inside the login/register and similar pages. diff --git a/en/guide/development-tools.md b/en/guide/development-tools.md index 9e0eb7198..398447b32 100644 --- a/en/guide/development-tools.md +++ b/en/guide/development-tools.md @@ -119,11 +119,11 @@ jsdom has some limitations because it does not use a browser. However, it will c ## ESLint and Prettier -> [ESLint](http://eslint.org) is a great tool to keep your code clean +> [ESLint](http://eslint.org) is a great tool to keep your code clean. -> [Prettier](prettier.io) is a very popular code formatter +> [Prettier](prettier.io) is a very popular code formatter. -You can add ESLint with Prettier pretty easily with nuxt.js, first, you need to add the npm dependencies: +You can add ESLint with Prettier pretty easily with Nuxt.js, first, you need to add the npm dependencies: ```bash npm install --save-dev babel-eslint eslint eslint-config-prettier eslint-loader eslint-plugin-vue eslint-plugin-prettier prettier @@ -161,7 +161,7 @@ module.exports = { } ``` -Then, you can add a `lint` and`lintfix` scripts in your `package.json`: +Then, you can add a `lint` and `lintfix` scripts in your `package.json`: ```js "scripts": { @@ -171,10 +171,13 @@ Then, you can add a `lint` and`lintfix` scripts in your `package.json`: ``` You can now launch `lint` to just check for errors: + ```bash npm run lint ``` + or `lintfix` to also fix those which are doable + ```bash npm run lintfix ``` @@ -182,6 +185,7 @@ npm run lintfix ESLint will lint every of your JavaScript and Vue files while ignoring your ignored files defined in your `.gitignore`. It is also recommended to enable ESLint at hot reloading mode via webpack. This way ESLint will run on save during `npm run dev`. Just add the following to your `nuxt.config.js`: + ``` ... /* @@ -191,7 +195,7 @@ It is also recommended to enable ESLint at hot reloading mode via webpack. This /* ** You can extend webpack config here */ - extend(config, ctx) { + extend(config, ctx) { // Run ESLint on save if (ctx.isDev && ctx.isClient) { config.module.rules.push({ @@ -200,7 +204,7 @@ It is also recommended to enable ESLint at hot reloading mode via webpack. This loader: "eslint-loader", exclude: /(node_modules)/ }) - } + } } } ``` diff --git a/en/guide/menu.json b/en/guide/menu.json index 4332b56af..b3b602dd4 100644 --- a/en/guide/menu.json +++ b/en/guide/menu.json @@ -111,7 +111,7 @@ "to": "/development-tools", "name": "Development Tools", "contents": [ { "to": "#end-to-end-testing", "name": "End-to-End Testing" }, - { "to": "#eslint-and-prettier", "name": "ESLint" } + { "to": "#eslint-and-prettier", "name": "ESLint and Prettier" } ] } ] diff --git a/en/guide/vuex-store.md b/en/guide/vuex-store.md index a2d7caf48..a7e5212b5 100644 --- a/en/guide/vuex-store.md +++ b/en/guide/vuex-store.md @@ -164,6 +164,7 @@ export default { } ``` + > The module method also works for top-level definitions without implementing a sub-directory in the `store` directory Example for state; you create a file `store/state.js` and add the following @@ -175,6 +176,7 @@ export default { ``` And the corresponding mutations can be in the file `store/mutations.js` + ```js export default { increment (state) { @@ -240,5 +242,5 @@ actions: { async nuxtServerInit({ dispatch }) { await dispatch('core/load') } -} +} ``` From ab3b65aa05c222fee12e3c8e6581d180537917da Mon Sep 17 00:00:00 2001 From: MachinisteWeb Date: Tue, 12 Jun 2018 13:37:43 +0200 Subject: [PATCH 2/3] Nuxt.js for file configuration-builddir.md Signed-off-by: MachinisteWeb --- en/api/configuration-builddir.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/en/api/configuration-builddir.md b/en/api/configuration-builddir.md index b4da8e9c1..616f5fa6c 100644 --- a/en/api/configuration-builddir.md +++ b/en/api/configuration-builddir.md @@ -1,6 +1,6 @@ --- title: "API: The buildDir Property" -description: Define the dist directory for your nuxt.js application +description: Define the dist directory for your Nuxt.js application --- # The buildDir Property @@ -8,7 +8,7 @@ description: Define the dist directory for your nuxt.js application - Type: `String` - Default: `.nuxt` -> Define the dist directory for your nuxt.js application +> Define the dist directory for your Nuxt.js application Example (`nuxt.config.js`): From 44bb51ba9198fa505ed0709839184a014e063f3b Mon Sep 17 00:00:00 2001 From: MachinisteWeb Date: Tue, 12 Jun 2018 13:39:14 +0200 Subject: [PATCH 3/3] Readd ``` Signed-off-by: MachinisteWeb --- en/guide/vuex-store.md | 1 + 1 file changed, 1 insertion(+) diff --git a/en/guide/vuex-store.md b/en/guide/vuex-store.md index b34f4dd44..ddc29fb11 100644 --- a/en/guide/vuex-store.md +++ b/en/guide/vuex-store.md @@ -243,6 +243,7 @@ actions: { await dispatch('core/load') } } +``` ## Vuex Strict Mode