<template>
  <div>
    <p>你好好</p>
    <p>Hello world</p>
  </div>
</template>
<script>
export default {
  head() {
    return {
      meta: [
        {
          hid: 'viewport',
          name: 'viewport',
          content:
            'width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no'
        }
        }
      ]
    }
  }
}
</script>
<style>
html {
  font-size: calc(100vw / 3.75) !important;
  /* 将宽度是750~375的设计稿 ，分为100份 */
}

body {
  font-size: 0.14rem;
  /* 这样就是14像素 */
}
</style>

Those are grouped wrong and in the wrong order

The Nuxt mode you want (Universal or SPA)
Add axios module to make HTTP request easily into your application.
Add EsLint to Lint your code on save.
Add Prettier to prettify your code on save.

Document nuxt/nuxtjs#6149

Version

master

Reproduction link

https://fr.nuxtjs.org/guide/routing#named-views

Steps to reproduce

Go to https://fr.nuxtjs.org/guide/routing#named-views
Open "Routage" category in menu panel
Click on "Named Views (EN)"

What is expected ?

Clicking on "Named Views (EN)" should redirect to the corresponding ID, and set the text's color to green (active).

What is actually happening?

The title "Named Views (EN)" in the left menu panel on is not green green.
Clicking on it does nothing (should redirect).

Additional comments?

Clicking on "Transitions" sets "Named Views (EN)" to active in the menu
Clicking on "Middleware" sets "Transition" to active in the menu

Hey Folks! I like to contribute for translation to Turkish.

What problem does this feature solve?

It would be nice to have a fade switch. When you need to concentrate it is only distracting.

What does the proposed changes look like?

Remove fade effect or create toggle button.

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