Dear All,

Is there a way to contribute and have an extense link to an Arabic translation of the nuxt Documentation? it seems to be useful to have many personas using this great framework

i can colaborate if needed

thanks

regards

Version

dev

Reproduction link

https://pwa.nuxtjs.org/modules/workbox.html#adding-custom-cache-strategyoption

Steps to reproduce

The cacheExpiration object that is in the documentation is not used at all.

In order to configure the cache expiration of a workbox strategy, the workbox.expiration.Plugin should be used.

The way to achieve this is to define the entire runtime caching rule in a separate plugin, and include it using cachingExtensions:

plugins/workbox-runtime-caching.js:

workbox.routing.registerRoute(
  /api/,
  workbox.strategies.cacheFirst({
    cacheName: 'my-runtime-cache',
    plugins: [
      new workbox.expiration.Plugin({
        maxEntries: 50,
        maxAgeSeconds: 300
      }),
    ],
  }),
  'GET'
);

nuxt.config.js:

  pwa: {
    workbox: {
      cachingExtensions: '@/plugins/workbox-runtime-caching.js',
    }
  }

What is expected ?

When configuring cacheExpiration I expect to see that after maxAgeSeconds, the cached asset gets updated in the service worker cache.

What is actually happening?

The cacheExpiration object that is defined in the docs is completely ignored. So assets are cached indefinitely.

What problem does this feature solve?

e.g. for hook description https://nuxtjs.org/api/internals-renderer#hooks some padding at the bottom of each table row <tr> would be very helpful to distinguish each table row.

What does the proposed changes look like?

Add add a CSS class e.g. py-4 to each <td> element or just apply some padding-bottom to each td

My code as follow
export default { name: "aboutUs", head () { return { title: 'My title', meta: [ { hid: 'description', name: 'description', content:'My description' } ] } } }
There is a error console:

Uncaught DOMException: Failed to execute 'setAttribute' on 'Element': '0' is not a valid attribute name.
at eval (webpack-internal:///./nodemodules/[email protected]@vue-meta/dist/vue-meta.esm.browser.js:1166:18)
at Array.forEach (<anonymous>)
at eval (webpack-internal:///./nodemodules/[email protected]@vue-meta/dist/vue-meta.esm.browser.js:1122:22)
at Array.forEach (<anonymous>)
at updateTag (webpack-internal:///./nodemodules/[email protected]@vue-meta/dist/vue-meta.esm.browser.js:1115:8)
at updateClientMetaInfo (webpack-internal:///./nodemodules/[email protected]@vue-meta/dist/vue-meta.esm.browser.js:1272:22)
at refresh (webpack-internal:///./nodemodules/[email protected]@vue-meta/dist/vue-meta.esm.browser.js:1434:14)
at Object.refresh$1 as refresh
at eval (webpack-internal:///./nodemodules/[email protected]@vue-meta/dist/vue-meta.esm.browser.js:169:34)
at eval (webpack-internal:///./nodemodules/[email protected]@vue-meta/dist/vue-meta.esm.browser.js:191:5)

How to fix it ?

What problem does this feature solve?

Short version

Please add links pointing to the proper documentation of req and res objects.

I don't do it myself (and send the PR) because I'm not familiar with this project and I don't know what is the correct documentation.

Long version

1. Start writing an application using NuxtJS.

2. Decide you want to write a custom Server Middleware in NuxtJS.

3. Find the official NuxtJS documentation. It points to Connect Docs (I've created an issue over there as well).

4. Observe the documentation says:

     // req is the Node.js http request object
     // res is the Node.js http response object
   

5. Fumble and waste time trying to search the documentation for Node.js http request/response objects.

Expectation: To have a link pointing to the right documentation.

Reality: No link, so now I have to search for it, and hope the documentation I'm reading is the correct one.

λ npm init nuxt-app nuxt007

create-nuxt-app v2.11.1
✨ Generating Nuxt.js project in nuxt007
? Project name nuxt007
? Project description My great Nuxt.js project
? Author name \alex
? Choose the package manager Npm
? Choose UI framework Element
? Choose custom server framework Koa
? Choose Nuxt.js modules Axios
? Choose linting tools Prettier
? Choose test framework None
? Choose rendering mode Universal (SSR)
? Choose development tools jsconfig.json (Recommended for VS Code)
Trace: SyntaxError: Unexpected token y in JSON at position 104
at JSON.parse (<anonymous>)
at C:\Users\alex1\AppData\Roaming\npm\nodemodules\create-nuxt-app\nodemodules\sao\lib\runActions.js:101:31 at Array.map (<anonymous>) at C:\Users\alex\AppData\Roaming\npm\nodemodules\create-nuxt-app\nodemodules\sao\lib\runActions.js:97:30 at C:\Users\alex\AppData\Roaming\npm\nodemodules\create-nuxt-app\nodemodules\majo\dist\majo.cjs.js:58:49 at C:\Users\alex\AppData\Roaming\npm\nodemodules\create-nuxt-app\cli.js:46:17

Version

master

Reproduction link

https://fr.nuxtjs.org/guide/directory-structure#r-pertoires

Steps to reproduce

1. Just go to the url and see the title

What is expected ?

New line after h2

What is actually happening?

h3 is on the same line as h2 :

https://fr.nuxtjs.org/examples/typescript-vuex/ is not linked

On the Theme page, should the pricing format be updated from "99$" to "$99"?

使用swiper组件，在开发环境中使用是正常的，然而在nuxt generate 过后并没有正确编译swiper。swiper作为一个dom元素在生成的静态文件中，

swiper 的使用参考:https://www.cnblogs.com/kobewang/p/10043867.html

There is no documentation about the title attribute in the head object, or?
https://github.com/nuxt/docs/blob/master/en/api/configuration-head.md

I suggest your team may add egg.js to the server-side frameworks while create project

Did you forget to import it?

or

What problem does this feature solve?

I'm trying to get Nuxt rendering working inside of an existing express app. I followed the docs but got errors. I don't know what to put in my nuxt.config.js file. The docs should provide the most basic complete example that works, including:

• [exists] how to integrate Nuxt into an express app
• the simplest nuxt.config.js that works
• a basic .vue file that works + which folder to place it in

Without these details, I'm just guessing, trying random things, and interpreting inscrutible error messages. For example, here's an error message I received, but these dependencies are installed:

 ERROR  Failed to compile with 19 errors                                                                                                   friendly-errors 10:50:21

These dependencies were not found:                                                                                                         friendly-errors 10:50:21

                                                                                                                                           friendly-errors 10:50:21
* fs in ./node_modules/@chriscalo/ejs-extra/node_modules/@chriscalo/file/index.js, ./node_modules/@chriscalo/file/index.js and 11 others   friendly-errors 10:50:21
* module in ./node_modules/@chriscalo/ejs-extra/index.js, ./node_modules/rewire/lib/moduleEnv.js                                           friendly-errors 10:50:21
* mssql/package.json in ./node_modules/knex/lib/dialects/mssql/index.js                                                                    friendly-errors 10:50:21
* net in ./node_modules/express/lib/request.js, ./node_modules/mysql/lib/Connection.js                                                     friendly-errors 10:50:21
* tls in ./node_modules/mysql/lib/Connection.js                                                                                            friendly-errors 10:50:21
                                                                                                                                           friendly-errors 10:50:21
To install them, you can run: npm install --save fs module mssql/package.json net tls                                                      friendly-errors 10:50:21

What does the proposed changes look like?

A docs page or an example repo on Github that includes the following:

• [exists] how to integrate Nuxt into an express app
• the simplest nuxt.config.js that works
• a basic .vue file that works + which folder to place it in

Version

0.0.0

Reproduction link

https://nuxtjs.org/api/nuxt#using-nuxt-js-programmatically

Steps to reproduce

Related : https://github.com/nuxt/typescript/issues/92

What is expected ?

It is missing to call

nuxt.moduleContainer.ready()

to load modules from configuration.

It should be awaited to work properly :

await nuxt.moduleContainer.ready()

What is actually happening?

Missing statement, so users using Nuxt programmatically think modules are automatically handled, but it's not.

Additional comments?

As it needs the code to be asynchronous, the whole snippet need to be updated, but I'm not sure how.

I'm trying to implement the Modules mode but in the documentation it's not clear and the code that you use is not working.
In the index you do this example:

export const state = () => ({
  counter: 0
})

export const mutations = {
  increment (state) {
    state.counter++
  }
}

and in todos this:

export const state = () => ({
  list: []
})

export const mutations = {
  add (state, text) {
    state.list.push({
      text: text,
      done: false
    })
  },
  remove (state, { todo }) {
    state.list.splice(state.list.indexOf(todo), 1)
  },
  toggle (state, todo) {
    todo.done = !todo.done
  }
}

But how to import the todos inside the index?

You say that after the output would be like that:

new Vuex.Store({
  state: () => ({
    counter: 0
  }),
  mutations: {
    increment (state) {
      state.counter++
    }
  },
  modules: {
    todos: {
      namespaced: true,
      state: () => ({
        list: []
      }),
      mutations: {
        add (state, { text }) {
          state.list.push({
            text,
            done: false
          })
        },
        remove (state, { todo }) {
          state.list.splice(state.list.indexOf(todo), 1)
        },
        toggle (state, { todo }) {
          todo.done = !todo.done
        }
      }
    }
  }
})

But where exactly is the code that will produce this output? The previus code (in the index.js and todos.js) wouldn't create this output for sure.
Some explanation please?

In documentation, the link to https://github.com/nuxt/nuxt.js/blob/feat/dev/packages/vue-app/template/router.scrollBehavior.js doesn't work. It returns 404