Repositories

Feed

sebmor

sebmor posted a new feature request

nuxt.js • 5 hours ago

idea Default pre-processor language

What problem does this feature solve?

Currently, if you use a certain pre-processor (cfr.
https://nuxtjs.org/faq/pre-processors/), you most likely use it predominantly in your app. It would potentially make sense to have the option to declare a default so you don't have to repeat yourself. Of course always possible to be overridden on a per component basis.

For example; I use in every component <style lang="scss">. This could be a setting in nuxt.config instead and I could default to <style>.

I think of it kind of similar to how currently transition is implemented, there is a default config available in nuxt.config, but you can also set per component transitions. (cfr. https://nuxtjs.org/api/configuration-transition#the-transition-property & https://nuxtjs.org/api/pages-transition#the-transition-property)

What does the proposed changes look like?

Something along the lines of:

module.exports = {
  preprocessors: {
    style: scss
 }
}
<style scoped>
</style>
PrimozRome

PrimozRome posted a new question

nuxt.js • 5 hours ago

nuxt command not found

I am trying to build and analyse the bundle as described here https://nuxtjs.org/api/configuration-build#analyze but nuxt command can not be found?

TheNoim

TheNoim posted a new question

axios-module • 8 hours ago

setToken nuxtServerInit

I read https://github.com/nuxt-community/modules/issues/89 and some people had the same problem like I have now and it was never resolved.
How can I set the token in nuxtServerInit and don't need to set it again on client side?

mauxtin

mauxtin posted a new question

create-nuxt-app • 8 hours ago

Include api routes in a nuxt and express app (using create-nuxt-app)

I created an app using the create-nuxt-app npm command and I got this server/index.js file.

const express = require('express')
const consola = require('consola')
const { Nuxt, Builder } = require('nuxt')
const app = express()
const host = process.env.HOST || '127.0.0.1'
const port = process.env.PORT || 3000

app.set('port', port)

// Import and Set Nuxt.js options
let config = require('../nuxt.config.js')
config.dev = !(process.env.NODE_ENV === 'production')

async function start() {
  // Init Nuxt.js
  const nuxt = new Nuxt(config)

  // Build only in dev mode
  if (config.dev) {
    const builder = new Builder(nuxt)
    await builder.build()
  }

  // Give nuxt middleware to express
  app.use(nuxt.render)

  // Listen the server
  app.listen(port, host)
  consola.ready({
    message: `Server listening on http://${host}:${port}`,
    badge: true
  })
}
start()

I also have a js file containing my api routes.

const { Router } = require('express')
const router = Router()
router.get('/route1', function(req, res){
   return 'Hello world';
}
module.exports = router

I am looking for a way to prefix the routes with 'api', without adding it to each route one by one (if possible) as well as including the routes in the first place.

rchl

rchl posted a new bug report

nuxt.js • 9 hours ago

bug Clicking nuxt-link within transition-group triggers page loading error

Version

v1.4.4

Reproduction link

https://codesandbox.io/s/6x1ww89xon

Steps to reproduce

  1. Create list of <nuxt-link> elements wrapped within <transition-group>
  2. Click any of the links to navigate to another page

What is expected ?

For target page to load

What is actually happening?

Page loading error is thrown

Additional comments?

Error (Cannot read property 'length' of undefined) triggers within TransitionGroup component, in updated life cycle.

  updated: function updated () {
    var children = this.prevChildren;
    var moveClass = this.moveClass || ((this.name || 'v') + '-move');
    if (!children.length || !this.hasMove(children[0].elm, moveClass)) {
      return
    }

The reason for that is probably due to Nuxt triggering asyncData handler on the page to-be-navigated-to and something is triggering the list update while that happens.

I've also created testcase (https://codesandbox.io/s/kxp0pqnomv) using pure Vue and VueRouter but it doesn't reproduce there. Probably because navigation happens synchronously (there is no async step for fetching data for the-page-to-be-loaded).

AndrewBogdanovTSS

AndrewBogdanovTSS posted a new bug report

nuxt.js • 11 hours ago

bug Ngrok module fires 2 duplicate messages to the terminal in dev mode

Version

v2.2.0

Reproduction link

https://github.com/nuxt-community/modules/tree/master/packages/ngrok

Steps to reproduce

What is expected ?

One message from ngrok appear in the terminal

What is actually happening?

Two messages from ngrok appear in the terminal
http://take.ms/R0njRf

PrimozRome

PrimozRome posted a new question

dotenv-module • 13 hours ago

Variables from .env are not written into process.env

I have .env file in my root Nuxt.js project but the variables are not read into process.env. ž

I have added the module following the instruction here https://github.com/nuxt-community/dotenv-module. Module looks to be loaded properly but process.env is empty object.

Any idea why?

creativemind1

creativemind1 posted a new question

nuxt.js • 13 hours ago

Why Parent Component displaying in Child Component If I use <nuxt-child/>?

Hello,
I'm having structure as like this
--pages
----Users
---- index.vue (Parent Component)
---- addEdit.vue (Child Component)

In my parent component:
'<-div-> <-div-> Parent</-div> <nuxt-child> </-div>'
In my child component:
<-div>
Child
<-/div>

When I load the child component, first parent component is displaying and then the child? My main purpose of using children in routes is to get the 'actual route' of the parent? I'm able to achieve this with the above method however, parent should not be displayed along with child as both are separate. How can I solve this?

ll931217

ll931217 posted a new question

nuxt.js • 14 hours ago

socket hang up (Socket.IO, Expressjs, Nuxtjs)

Hello,

I am trying to use HTTPS in my Nuxtjs web app. However, after adding in the certificates and changing the imported module from http to https, the error socket hang up shows up. This didn't happen when I didn't use HTTPS. I believe that it couldn't be socket.io because after removing all the code relating to it, this error still shows up. Somehow it works if I have both HTTP and HTTPS servers on, by doing the following:

import express from 'express'
import http from 'http'
import https from 'https'
import fs from 'fs'
import path from 'path'
import socket from 'socket'

const options = {
  key: fs.readFileSync(path.join(__dirname, 'key.pem'), 'utf8'),
  cert: fs.readFileSync(path.join(__dirname, 'cert.pem'), 'utf8'),
  requestCert: false,
  requestUnauthorized: false
}

const app = express()
const httpServer = http.createServer(app)
const httpsServer = https.createServer(options, app)
const io = socket()

io.attach(httpServer)
io.attach(httpsServer)

// Some other code

async function start() {
  // ...
  httpServer.listen(port, host)
  httpsServer.listen(https_port, host)
}
start()

This code is generated with create-nuxt-app anc choosing the Express option when selecting the servers. Obviously this didn't work so, I took out the HTTP bits, and just got socket hang up error. I have also saw in the Nuxtjs Documentation about HTTPS configuration, but I don't think that would work here since I am using expressjs.

I couldn't figure out what is wrong with it, read many SO pages on it but still couldn't figure it out, so I had come to you for help. Hopefully someone is able to help me figure this out.

This is the error message I get:

 READY  Server listening on https://192.168.0.61:3000

ℹ info URL: /
ℹ info Method: GET
✖ error Error: socket hang up
  at createHangUpError (_http_client.js:330:15)
  at Socket.socketOnEnd (_http_client.js:433:23)
  at Socket.emit (events.js:187:15)
  at Socket.EventEmitter.emit (domain.js:441:20)
  at endReadableNT (_stream_readable.js:1094:12)
  at process.internalTickCallback (internal/process/next_tick.js:72:19)
ℹ info URL: /favicon.ico
ℹ info Method: GET

A lot of SO posts are saying to use longjohn but somehow I couldn't get it to work.

EDIT: I created a new project with the exact same method, and it works. Not quite sure what is the error, or where to look for the error.

EDIT 2: Upon further investigation, the API endpoints work as expected, however the frontend side is the one throwing the socket hang up error.

EDIT 3: Used curl to test out the request, this is what I get back:

{
  "error": {
    "message": "socket hang up",
    "name": "NuxtServerError",
    "frames": [
      {
        "file": "_http_client.js",
        "method": "createHangUpError",
        "line": 330,
        "column": 15,
        "context": {},
        "lang": "js"
      },
      {
        "file": "_http_client.js",
        "method": "Socket.socketOnEnd",
        "line": 433,
        "column": 23,
        "context": {},
        "lang": "js"
      },
      {
        "file": "events.js",
        "method": "Socket.emit",
        "line": 187,
        "column": 15,
        "context": {},
        "lang": "js"
      },
      {
        "file": "domain.js",
        "method": "Socket.EventEmitter.emit",
        "line": 441,
        "column": 20,
        "context": {},
        "lang": "js"
      },
      {
        "file": "_stream_readable.js",
        "method": "endReadableNT",
        "line": 1094,
        "column": 12,
        "context": {},
        "lang": "js"
      },
      {
        "file": "internal/process/next_tick.js",
        "method": "process.internalTickCallback",
        "line": 72,
        "column": 19,
        "context": {},
        "lang": "js"
      }
    ]
  },
  "hasInternal": false
}

When I do the request again, it goes straight to request timeout. (Due to connect-timeout).

Modcat

Modcat posted a new question

electron-template • a day ago

SASS loader issue

I have done a fresh install followed all instructions and sass loader. I'm not so concerned about configs as I am making this a professional grade product. I should not be having this problem and if you want to replicate my problem simple…
git clone <repo>
cd my-project
yarn install
… and then modify a component to use SCSS and it will literally break in pieces in a sea of red. This should not be happening at all guys!

chrisvfritz

chrisvfritz posted a new question

nuxt.js • a day ago

Hotfix for double escaping static class

This will be fixed in the next release of Vue, but currently, new lines, tabs, and other escape characters are escaped twice by Vue's SSR. The result is this:

<div>
  <div 
    class="
      foo
      bar
    " 
  />
</div>

compiles to:

<div>
  <div 
    class="\n
      foo\n
      bar\n
    " 
  />
</div>

so the styles for foo and bar are not applied.

I just wanted to share that this can be worked around with the following hotfix in Nuxt projects:

build: {
  extend(config, ctx) {
    const vueRule = config.module.rules.find(
      rule => rule.loader === 'vue-loader'
    )
    vueRule.options.compilerOptions = {
      ...vueRule.options.compilerOptions,
      modules: [
        ...((vueRule.options.compilerOptions &&
          vueRule.options.compilerOptions.modules) ||
          []),
        { postTransformNode: staticClassHotfix }
      ]
    }

    function staticClassHotfix(el) {
      el.staticClass = el.staticClass && el.staticClass.replace(/\\[a-z]\b/g, '')
      if (Array.isArray(el.children)) {
        el.children.map(staticClassHotfix)
      }
    }
  }
}

It might even be a good idea to build the hotfix into a patch release of Nuxt to fix the issue until the new version of Vue is out.

manniL

manniL posted a new feature request

create-nuxt-app • a day ago

idea Preselect package manager based on CMD

What problem does this feature solve?

Pre-select package manager depending on whether the user used npx create-nuxt-app or yarn create nuxt-app.

bjunc

bjunc posted a new bug report

nuxt.js • a day ago

bug Minify Inline CSS

Version

v2.1.0

Reproduction link

https://nuxtjs.org

Steps to reproduce

If you add CSS via Nuxt config, that CSS is minified and inlined into the page head. Component CSS/SCSS is inlined after the Nuxt config global CSS, but not minified.

What is expected ?

All inline CSS should be minified (both global via Nuxt config, and component CSS).

What is actually happening?

Only global (Nuxt config) CSS is being minified.

Additional comments?

I really don't think a reproduction link should be required. It should be strongly encouraged, but it's often unnecessarily onerous.
Reporting bugs should be easy and quick.

aaaguirrep

aaaguirrep posted a new question

hare • 2 days ago

Best practice to load all information of users after the authentication process

Hi, i am not a developer but i am deploying a web application using nuxt and i have a doubt about load all information related to the users once in the application, all the information is managed by vuex. I need to load all information after the authentication process because i am showing a dashboard to the user. I have read and found the next options but i don't know where is the best practice without impact the performance of the application:

1.- Load all information in the same vuex action where the user authenticates. I have an action to validate the user and password and it creates the cookies and token sessions. I can load all information in the same action but the authentication process could be slower. With this option the load of information is executed just once.

2.- Load all information in the main/dashboard component by the fetch function consuming an vuex action (do a dispatch). It works but i am seeing that when i browse to the main/dashboard component the fetch function is always appearing. Load of information should be once after the authentication process.

3.- I also am using the nuxtserverinit to load all information when the users press F5 button or reload the web application but if i do a reload in the main/dashboard component i am seeing nuxtserverinit and fetch functions . I am duplicating resources.

I really appreciate your help.

Thanks in advance.

Regards,
Arsenio

xxRockOnxx

xxRockOnxx posted a new bug report

nuxt.js • 2 days ago

bug Page styles not overriding functional component styles when visited from different route

Version

v2.2.0

Reproduction link

https://codesandbox.io/s/k3y402xpyv

Steps to reproduce

Bug:

  • visit Other
  • visit Bug

No Bug

visit Bug directly or if you came from Other to Bug, just refresh it.

What is expected ?

Functional component's style gets overridden by page's style.

What is actually happening?

Functional component's style being overridden by page's style if coming from different route

Additional comments?

Not sure if this is nuxt issue or vue tbh

tanakaworld

tanakaworld posted a new bug report

sentry-module • 2 days ago

bug TypeError: this.$sentry.setUserContext is not a function

Version

v2.0.0

Reproduction link

https://github.com/tanakaworld/nuxt-vue-error-handling-demo

Steps to reproduce

Nuxt is v2.2.0.

  1. Clone source code from reproduction link
  2. Check out 'verify' branch
  3. Setup according to README, and run 'npm run dev'
  4. The error will happen at here

Screenshot 2018-11-11 00.06.08.png

What is expected ?

We can use a method 'this.$sentry.setUserContext'.

What is actually happening?

We can use a method 'this.$sentry.setUserContext'.

jeehyukwon

jeehyukwon posted a new question

nuxt.js • 2 days ago

build.extends(config) function in nuxt.config.js cannot override config.external option

I am distributing the nuxt app using AWS Lambda. Since AWS lambda has a 150MB limit, I can't upload all node_modules folder. So I'm trying to bundle most dependencies on .nuxt/dist/server/server-bundle.json. However, the current config.externals option is not configurable in nuxt.config.js.

So I'm currently manually commenting out lines 3545 through 3558 in node_modules/nuxt/dist/nuxt.js. I think this behavior is wrong. I hope to be able to configure all build options in nuxt.config.js.

manniL

manniL posted a new bug report

webpackbar • 2 days ago

bug Duplicate bars on webpack error

Version

v3.0.0

Reproduction link

https://github.com/manniL/lichter.io

Steps to reproduce

webpackbar-duplicated-bars

  1. Download latest master version (linked above)
  2. Install deps
  3. Run yarn generate
    Happens in WebStorm terminal but also in normal Gnome Terminal. (Running Ubuntu LTS)

What is expected ?

No duplicate Client bar

What is actually happening?

Duplicate bar

manniL

manniL posted a new feature request

docs • 2 days ago

idea Document modern mode

What problem does this feature solve?

https://github.com/nuxt/nuxt.js/pull/4231

valeriosillari

valeriosillari posted a new question

nuxt.js • 2 days ago

Nuxt2 the command "generate" not create correct path for JS and Fonts Files

I am using nuxt 2 and I'm trying to generate a static website: I want all files generated as html, css and js, ready to be uploaded on a FTP server.

So I run the command "yarn generate" for generating the static files.

The command runs correctly and I got the files.
No errors on CLI.
I can also see the pages with the content (html) and my styles (css) generated.

But I have issues with the JS files and the fonts.
It looks that they are generated but the url path are not correct and the browser cannot file this files.

Am I doing something wrong or the generate command got some issues?
I set the project as Nuxt Universal, with also express web server for some tests.

Please let me know :)