Repository nuxt.js

flovan

flovan posted a new question

nuxt.js • 9 hours ago

Components not rendering proper element tags in production

I'm having problems with Nuxt 2 in production mode, where components are rendered with their component name as tag name, rather than the desired proper HTML tag. Before we upgraded to V2, this was working just fine.

I was hoping someone could point me in the right direction of where to start looking.

For example where <custom-title :is="h1">Foo</custom-title> will render <h1> in development, it renders <custom-title> in production, removing the semantic value from the element. This is a dumbed-down example of one of our components:

// Title.vue

<template>
  <component :is="tagName">
    <slot />
  </component>
</template>

<script>
export default {
  props: {
    tagName: {
      type: String,
      default: 'h1',
    }
  }
};
</script>

We use it like this:

// in a Nuxt plugin:
// (note that we import our components from a private NPM package, this is just for replication purposes)

import Title from '~/components/Title.vue';
Vue.component('my-title', Title);

// Elsewhere in a component, we could render a <button> tag like this:

<my-title' tag-name="button">Test title</my-title'>

It seems to be really specific to our setup, as I did not succeed to isolate the issue on a blank project; the snippet above works just fine.

ChandruCR

ChandruCR posted a new question

nuxt.js • 11 hours ago

Nuxt 2.0 IE 11 support

How to get nuxt starter project on IE11 browser?

In earlier version of Nuxt adding babel-polyfill to vendor option in nuxt.config.js would resolve this issue.

Since it is deprecated now because Nuxt 2.0 is using webpack 4.0. What needs to be done to get the starter project working on IE 11

jhlim82

jhlim82 posted a new question

nuxt.js • 12 hours ago

-webkit-box-orient is declared, but not applied.

We use sass-loader / scss on nuxt.js(recent version) and it works very good, except one thing.

I put '-webkit-box-orient: vertical;, inside of style statement but the browsers(chrome) can't render that.

Where I use inline tag, then works fine.

Do I have to modify some webpack or sass-loader setting?? Or, Is it some browser's issue??

Ic3m4n34

Ic3m4n34 posted a new question

nuxt.js • 14 hours ago

Ho to react to browser zoom?

I want to detect the browser zoom.

I'm using the https://www.npmjs.com/package/detect-zoom package

This works fine in my mounted-hook:

mounted() { if (process.browser) { const zoom = detectZoom.zoom(); console.log(zoom); } },

However I want to update my zoom-const when the user is zooming in. Is there a way to do this since we can not use the computed-property because it doesn't update on the server-side.

InvincibleJun

InvincibleJun posted a new question

nuxt.js • 16 hours ago

I want to know the implementation principle of auxtjs asyncData, can give some ideas?

getMatchedComponents returns components, it can't not set any data in it and it do not has options, i find it not a vuecomponent constructor. But in nuxtjs , it will be returns mathed vuecomponent constructor and then set options data will achiece.

i know the answer in source code , please give me some ideas, thank.

su1924

su1924 posted a new bug report

nuxt.js • 18 hours ago

bug Repeat the package to style after using CSS module.

Version

v2.2.0

Reproduction link

https://github.com/su1924/nuxt-cssModules

Steps to reproduce

nuxt2.20
After using cssModules(<style module>) and setting extractCSS: true, CSS packages the files, but it will be repeatedly packaged into style. How do you solve this problem?

What is expected ?

Package to file only

What is actually happening?

Packaging to files and pages <style>

iamwwc

iamwwc posted a new question

nuxt.js • a day ago

How to use plugin only in server side?

I have a plugin which will inject some variables to store. But it's a node modules and call some nodejs special API.

I found a config in official docs

ssr: Boolean (default to true) If false, the file will be included only on the client-side.

But it use for client side only

Here is my plugins codes

var Hexo = require("hexo")

export default ({app, store}) => {
  var hexo = new Hexo(process.cwd() + '/hexo',{})

  hexo.load().then(function(){
  var posts = hexo.locals.get("posts")
  var pages = hexo.locals.get("pages")
  var categories = hexo.locals.get("categories")
  var tags = hexo.locals.get("tags")
  store.$commit("init",[posts,pages,categories,tags])
})
}

When I run

npm run dev

console show

These dependencies were not found:

* child_process in ./node_modules/hexo-util/node_modules/cross-spawn/index.js
* fs in ./node_modules/graceful-fs/graceful-fs.js, ./node_modules/graceful-fs/fs.js and 19 others
* module in ./node_modules/hexo/lib/hexo/index.js

I have try install these modules, but in their modules folder, there are only have package.json, don't have *.js files

su1924

su1924 posted a new question

nuxt.js • a day ago

Repeat the package to style after using CSS module.

nuxt2.20
After using cssModules and setting extractCSS: true, CSS packages the files, but it will be repeatedly packaged into style. How do you solve this problem?

hjaiim

hjaiim posted a new question

nuxt.js • 2 days ago

Unexpected token ...

node_modules/nuxt/dist/nuxt.js:3210
this.builder, config, { loaders: this.loaders, …this.nuxtEnv }
^^^

SyntaxError: Unexpected token …

su1924

su1924 posted a new question

nuxt.js • 2 days ago

Repeat the package to style after using CSS module.

After using CSS and setting extractCSS: true, CSS packages the files, but it will be repeatedly packaged into style. How do you solve this problem?

Extarys

Extarys posted a new question

nuxt.js • 2 days ago

TypeError: this.setDynamic is not a function

I keep getting this error today. I got an error for each .vue file…

Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: this.setDynamic is not a function
    at PluginPass.pre (/srv/NodesProjects/__/mainWebsite/node_modules/babel-plugin-transform-runtime/lib/index.js:31:12)
    at transformFile (/srv/NodesProjects/__/mainWebsite/node_modules/@babel/core/lib/transformation/index.js:78:27)
    at runSync (/srv/NodesProjects/__/mainWebsite/node_modules/@babel/core/lib/transformation/index.js:45:3)
    at runAsync (/srv/NodesProjects/__/mainWebsite/node_modules/@babel/core/lib/transformation/index.js:35:14)
    at process.nextTick (/srv/NodesProjects/__/mainWebsite/node_modules/@babel/core/lib/transform.js:34:34)
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickDomainCallback (internal/process/next_tick.js:218:9)

 @ ./.nuxt/components/nuxt-error.vue 7:0-110 7:0-110 8:0-123 21:2-16
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/__webpack_hmr ./.nuxt/client.js

packages.json:

{
  "name": "test",
  "version": "1.0.0",
  "description": "My groundbreaking Nuxt.js project",
  "author": "Gogs",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server",
    "build": "nuxt build",
    "start": "cross-env NODE_ENV=production node server/index.js",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "precommit": "npm run lint"
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.0.0",
    "cookie": "^0.3.1",
    "cross-env": "^5.2.0",
    "fastify": "^1.12.1",
    "fastify-nuxt": "^1.0.12",
    "iview": "^3.1.3",
    "js-cookie": "^2.2.0",
    "koa": "^2.5.2",
    "koa-router": "^7.4.0",
    "nuxt": "^2.0.0",
    "paseto.js": "^0.1.2",
    "pg": "^7.5.0",
    "secure-password": "^3.1.0",
    "vue-loader": "^14.2.2"
  },
  "devDependencies": {
    "eslint": "^5.0.1",
    "eslint-config-prettier": "^3.1.0",
    "eslint-loader": "^2.0.0",
    "eslint-plugin-prettier": "2.6.2",
    "eslint-plugin-vue": "^4.0.0",
    "nodemon": "^1.11.0",
    "prettier": "1.14.3"
  }
}

I found a post saying I needed to use @babel/core and @babel/preset-env but it didn't do anything.

What should I do to fix this issue?

I also tried with fastify and fastify-nuxt and I get the same error.

Thanks!

Mohsunbagheri

Mohsunbagheri posted a new question

nuxt.js • 2 days ago

Using Vue-session in Nuxt Store

Hi,
I created session using vue-session in my login page
and i want to use it in NuxtInitServer in Store/index.js

but this.$session.get() doesnt work and it says window is not defined

can you help me ?
`async login () {

    let phone = this.formUsername

    let password = this.formPassword

    let data = {}

    try {

      await axios.post('/api/v1.0/accounts/login/', { phone, password }, {

        headers: {'Access-Control-Allow-Origin': '*'}

      }).then(function (response) {

        if (response.status === 200 && response.data.access_token !== '') {

          data = response.data

          this.$session.start()

          this.$session.set('token', response.data.access_token)

        }else {

          data = 'Error'

        }

      })

      this.$store.state.authUser = data

      console.log(this.$store.state.authUser)

    } catch (e) {

      this.formError = e.message

    }`

this is my login method

console.log(req.$session.getAll())

and this is my log in store

thx a alot

G3EORG3E

G3EORG3E posted a new question

nuxt.js • 3 days ago

How can I generate css files by layout?

In my Nuxt application I have an admin layout and default layout, and my goal is to generate one CSS bundle for each of those.
When I set extractCss: true its simply generate multiple CSS files which I dont desire.
Anybody who would know some solution?
Thanks a lot!

manniL

manniL posted a new feature request

nuxt.js • 3 days ago

idea Deprecate callback-based middleware, asyncData and friends

What problem does this feature solve?

A middleware can be asynchronous. To do this, simply return a Promise or use the 2nd callback argument

In times of Promises (supported since Node 4) and async/await (Node 8.something), supporting callback-based middleware doesn't seem necessary to me anymore. Deprecating that feature for 2.3 and remove it in 3.0 seems reasonable from my POV.

Related code: https://github.com/nuxt/nuxt.js/blob/dev/packages/app/template/utils.js#L203

Update: We should consider doing this together for all parts or not at all. This would include:

  • Middleware
  • Modules
  • asyncData
  • fetch
  • … (Did I miss sth?)
weotch

weotch posted a new question

nuxt.js • 4 days ago

Should `nuxt generate` emit an exit code of `1` on route render errors?

When a route throws an error, I see that Nuxt is capturing it. For instance, here is a bit from the Nuxt log:

nuxt:render Rendering url /events +398ms
[Vue warn]: Error in render: "TypeError: Cannot read property 'image' of undefined"

found in

---> <FeaturedEventBlock> at components/blocks/events/featured/index.vue
       <Blocks> at components/global/blocks.vue
         <Pages/Tower.vue> at pages/_tower.vue
           <Nuxt>
             <Default> at layouts/default.vue
               <Root>

...

 Generate errors summary:

 ROUTE  /events

  TypeError: Cannot read property 'image' of undefined

  - _tower.fd48a28f1d391c6564f2.js:6038 Proxy.render
    pages/_tower.fd48a28f1d391c6564f2.js:6038:49

...

nuxt:generate Generate done +151ms

I've noticed that the exit code from from the script is 0, though. I had expected it to be 1.

Where this matters to me is in the context of statically generating and deploying a site using Netlify. If there is an error on a route, I want Netlify to not deploy the build. However, since Nuxt returns 0, Netlify thinks there were no issues.

I realize that I could create a generate:done hook, check for errors, and do my own process.exit(1), but I was curious if the behavior I am describing IS the expected behavior or if this is a bug.

Thanks!

Eckhardt-D

Eckhardt-D resolved the question #c8005

nuxt.js • 4 days ago

Uncaught TypeError: tags.map is not a function from updateTags function

My apologies, the issue was incorrect structure of head object in nuxt config. Namely:

head: {
  title:"Title",
  description: "Stupid place to put description"
...

Should have been

head: {
  title:"Title",
  meta: [
    { hid: 'description', name: 'description', content: 'Better place to put description' }
  ]
...
Eckhardt-D

Eckhardt-D posted a new question

nuxt.js • 4 days ago

Uncaught TypeError: tags.map is not a function from updateTags function

Hi I have found this question posted a while ago that has no answers, so I'll post again. When Nuxt app mounts, a console error appears -

Uncaught TypeError: tags.map is not a function
    at updateTags (commons.app.js:5629)
    at commons.app.js:5735
    at Array.forEach (<anonymous>)
    at Vue.updateClientMetaInfo (commons.app.js:5709)
    at Vue.refresh (commons.app.js:5771)
    at commons.app.js:5918
    at commons.app.js:5810

Inspecting commons.app.js, this is the source of the error:

return function updateTags (type, tags, headTag, bodyTag) {
    var oldHeadTags = toArray(headTag.querySelectorAll((type + "[" + attribute + "]")));
    var oldBodyTags = toArray(bodyTag.querySelectorAll((type + "[" + attribute + "][data-body=\"true\"]")));
    var newTags = [];
    var indexToDelete;

    if (tags.length > 1) {
      // remove duplicates that could have been found by merging tags
      // which include a mixin with metaInfo and that mixin is used
      // by multiple components on the same page
      var found = [];
      tags = tags.map(function (x) { /* ERROR ORIGINATES HERE */
        var k = JSON.stringify(x);
        if (found.indexOf(k) < 0) {
          found.push(k);
          return x
        }
      }).filter(function (x) { return x; });
    }...

I am lost in getting to the bottom of it. I have no head property in any component except the nuxt.config.js file. Can somebody help? Meta details update correctly, just want to get rid of the log.

Thank You

awronski

awronski posted a new bug report

nuxt.js • 4 days ago

bug Missing route.meta in middleware when extendRoutes

Version

v2.2.0

Reproduction link

https://codesandbox.io/s/k3loj4rk7r

Steps to reproduce

  1. Open reproduction link
  2. Open console
  3. Click on "Info" button

What is expected ?

On console should be:

in middleware 
meta ABC

What is actually happening?

On console there is:

in middleware 
meta undefined

Additional comments?

nuxt.config.js:

router: {
    middleware: ["mw"],
    extendRoutes(routes, resolve) {
      routes.push({
        name: "info",
        path: "/info",
        component: resolve(__dirname, "pages/about.vue"),
        meta: { test: "ABC" }
      });
    }
  },

mw.js:

export default ({ route }) => {
  console.log("in middleware");
  console.log("meta", route.meta.test);
};
vlajos

vlajos posted a new feature request

nuxt.js • 4 days ago

idea Sharing environment variables at start time for client and server

What problem does this feature solve?

(Originally I tried to open a github issue which referred to some non-existing links http://cmty.nuxt.xyz/ , but after some googling I arrived here.)

If I understand well nuxt.config.js can be used to share environment variables with the client/server code which is nice, but happens at build time.
So If you want to build a container image what you want to control at startup with Environment variables you cannot do it this way.
You have to move the nuxt build step to the container's start script which causes downtime after the container's start.
Or you have to build different images for your different configurations.

What does the proposed changes look like?

Ideally it would be nice to be able to configure the application when it is started.
For example with moving the interpretation of the nuxt.config.js from build time to startup time.
(But I guess this is complicated because it is implemented with webpack…)

I wanted to open a question originally, but this interface does not have question types.
Anyway let me know please if I just overlooked something and there is already some solution for this problem.

Thanks!

yuchonghua

yuchonghua posted a new question

nuxt.js • 4 days ago