afontcu

afontcu posted a new question

nuxt.js • 29 minutes ago

Nuxt or vue-cli 3?

Hi!

Does it make sense to combine Nuxt.js and vue-cli 3? They are not exactly the same (prerender and SSR being the main difference from my point of view), but besides that, both offer a plugin system and some sort of conventions (well, vue-cli offers conventions through its plugins).

I know there are Nuxt plugins for vue-cli, but does it make sense? Wouldn't this break vue-cli plugin system (since the project structure would change)?

What's your take on this? Has anyone combined both? Are you happy with the result?

btw, thanks for your hard work with Nuxt. It's an amazing tool.

Mattchewone

Mattchewone posted a new question

nuxt.js • 3 hours ago

Memory issue

Screenshot 2018-06-22 20.22.50.png

I have been looking around Github issue's and noticed that there seemed to be an issue related to Axios, I am however not using Axios. I am using socketio and I am using feathers-vuex module to create vuex plugins based on my API. Within a 2 hour window I seem to hit high memory usage ~100 times. Given this is my staging setup and there is no usage on the site I can't understand why there is such high memory usage.

jeck5895

jeck5895 posted a new question

axios-module • 7 hours ago

.onResponse is not a function

Hello I just need help about this one. Cant found related about it
image

lupas

lupas posted a new question

nuxt.js • 16 hours ago

Plugins do not get re-calculated on server-side?

Hi all 🙂 I love working with nuxt - what a great framework! 😃 Hope someone can help me with this issue. Currently struggling with the following:

I have multiple apps (different websites) running on the same codebase on Heroku. It's a nuxt app in universal mode, that should serve multiple different websites with different domains. It workes well by just reading the .env variable "website" that I set in each app, which affects my api's, layout and so on. But I want to change my setup so that I can run all domains with only one application server on Heroku. Much cheaper and of course much easier to set up additional "copies" of the website. But of course I cannot rely on the .env variables anymore.

so what I do is:

1) I my "setWebsite.js" plugin I get the domainname via "context.req.headers.host" and then map that to my "website" variable in the store.

export default function (ctx) {

if (!process.browser) {
    const host = ctx.req.headers.host
    let website = null

    switch (host) {
      case 'localhost:3000':
      case 'www.AAAA.com':
      case 'AAAA.herokuapp.com':
        website = 'AAAA'
        /* and so on*/

ctx.store.commit('setWebsite', website)
}

2) That "website" variable I set as a custom header in axios within the axios plugin

export default function (ctx) {
  ctx.$axios.onRequest(() => {
    ctx.$axios.setHeader('website', ctx.store.getters['getWebsite'])
  })
}

3) So the backend delivers only website specific data, and all the other relevant frontend settings (like dynamic styles etc.) also get set by that variable.

Now with my "domainname" approach, it works almost, with one small issue. I think I'm almost there and I miss something really small. But maybe it's something big ^^

What happens is:

1) I deploy my app freshly to Heroku.
2) When I open up the website the first time with domain AAAA, it renders domain AAAA perfectly, with all the right data, right styles and so on. SSR and also client-side rendering works like a charm. 👍
3) When I open domain BBBB then, it first shows quickly data/styles from website AAAA, and then renders website BBBB. From then on, all API-related data works fine. But stuff touching my store (mainly strings) and my vuetify-theme . After the first router-link clicked, everything works fine of course. But the initial SSR render is data/styles from the old app. Kinda feels like my app is "pre-rendering" instead of "server-side-rendering"👎

BUT: Logs show, that in both cases only the respective website-api gets called, so there is NO WAY that the session on website AAAA gets data/styles for website BBBB and vice versa.

And funnily, when after a fresh deployment I visit website BBBB, the problem persists with website AAAA instead, but everything is fine for website BBBB this time. So the domain I visit first get's rendering fine every time for the rest of its life.

So I think I am facing a caching (?) problem within nuxt or node.js. Something must happen on the very first call of these plugins that "caches" the data, so the initially call to BBBB still ssr's the data from AAAA, although it does an api call and recieves correct data for BBBB….

Can someone point me in the right direction?

Is there any default caching that I need to somehow disable? (I did not set any manually)

Thanks a lot! :)

Oh - and my dependencies:

 "dependencies": {
    "@fortawesome/fontawesome": "^1.1.8",
    "@fortawesome/fontawesome-free-brands": "^5.0.13",
    "@fortawesome/fontawesome-pro-light": "^5.0.13",
    "@fortawesome/fontawesome-pro-regular": "^5.0.13",
    "@fortawesome/fontawesome-pro-solid": "^5.0.13",
    "@fortawesome/vue-fontawesome": "0.0.23",
    "@nuxtjs/axios": "^5.3.1",
    "@nuxtjs/sitemap": "0.1.1",
    "axios": "^0.18.0",
    "firebase": "^5.0.4",
    "load-script": "^1.0.0",
    "lodash": "^4.17.10",
    "marked": "^0.4.0",
    "moment": "^2.22.2",
    "numeral": "^2.0.6",
    "nuxt": "^1.4.1",
    "raven-js": "^3.26.3",
    "redirect-ssl": "^1.3.0",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.1",
    "vue-analytics": "^5.12.2",
    "vue-infinite-loading": "^2.3.1",
    "vuetify": "^1.0.19",
    "vuetify-google-autocomplete": "^2.0.0-beta.3"
  },
  "devDependencies": {
    "babel-eslint": "^8.2.1",
    "eslint": "^4.15.0",
    "eslint-friendly-formatter": "^4.0.1",
    "eslint-loader": "^2.0.0",
    "eslint-plugin-vue": "^4.0.0",
    "vue-style-loader": "^4.0.2",
    "css-loader": "^0.28.11",
    "sass-loader": "^7.0.3",
    "node-sass": "^4.8.1"
  }
o1lab

o1lab posted a new feature request

create-nuxt-app • 18 hours ago

idea Please add electron support

What problem does this feature solve?

Please add support to scaffold electron app.

Looking for : electron + express + vuetify + axios

mmase

mmase posted a new question

nuxt.js • 21 hours ago

Is there a way to modify the localIdentName for css-loader (using css modules) in nuxt config?

Is there a way to modify the localIdentName for css-loader (using css modules) in nuxt config?

milu2003

milu2003 posted a new question

nuxt.js • a day ago

How to avoid loading all js file?

image

All the pages of my project's JS are loaded in when they open the front page.

These JS files add up too much and slow down the loading speed.

alphaelf

alphaelf posted a new question

create-nuxt-app • a day ago

i get error with fresh nuxt app

$ npx create-nuxt-app
npx: installed 1 in 3.411s
Path must be a string. Received undefined
null

Generating Nuxt.js project in D:\Documents\projects\daal
? Project name daal
? Project description Modualr SPA
? Use a custom server framework adonis
? Use a custom UI framework element-ui
? Choose rendering mode Single Page App
? Use axios module yes
? Use eslint yes
? Author name Mohsen Akbari
? Choose a package manager npm
Reinitialized existing Git repository in D:/Documents/projects/daal/.git/
npm WARN deprecated [email protected]: 'postcss-cssnext' has been deprecated in favor of 'postcss-preset-env'. Read more at https://moox.io/blog/deprecating-cssnext/
npm ERR! Unexpected end of JSON input while parsing near '…dbd632008d65d982d5872'

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Landima\AppData\Roaming\npm-cache_logs\2018-06-24T091202_546Z-debug.log

To get started:

npm run dev

To build & start for production:

npm run build
npm start
hkmsadek

hkmsadek posted a new question

adonuxt-template • a day ago

Nuxt js pages shows 404 not found in ssl enabled site

I have a nodejs project created with adonuxt. I have ssl enabled in my site.

I am using nginx reverse proxy that take requests to localhost:port in my server.

There two problems.

It always shows 404 in all js file.

I have a nodejs project created with adonuxt. I have ssl enabled in my site.

I am using nginx reverse proxy that take requests to localhost:port in my server.

There two problems.

It always shows 404 in all js file. See the image please. enter image description here

It also doesn't load any images.

Another problem is, I can only see some out put for the home page, but if I visit to site.com/page it shows 404 not found (nginx/1.10.3 (Ubuntu))

Any idea whats wrong? Thank you so much for your time.

NextStepGuru

NextStepGuru posted a new bug report

nuxt.js • 2 days ago

bug Pug not working in Nuxt.2.0

Version

v2.0

Reproduction link

https://github.com/nuxt/nuxt.js/tree/dev/examples/markdownit

Steps to reproduce

Make sure to install nuxt-edge as the current dev version has the nuxt package.

i removed all modules from nuxt.config.js as md throws an error as well

What is expected ?

pug should render

What is actually happening?

This relative module was not found:

  • ./pug.vue?vue&type=template&id=6fbf9768&lang=pug in ./pages/pug.vue

Additional comments?

i have another larger nuxt project that i'm trying to convert to nuxt2.0 with hundreds of pug files. i'm consistently getting relative module not found in all of them.

NextStepGuru

NextStepGuru resolved the question #c7262

nuxt.js • 2 days ago

Uncaught SyntaxError: Unexpected token =>

I was able to solve my problem on older browsers by adding the following build in nuxt.config.js

    extend (config, { isDev, isClient }) {
      // if you're testing on browserstack for babel-polyfill, you'll need to remove the isDev
      // clause to see what modules do not work in chrome 41!
      if (isClient && !isDev) {
        let nodeModules = ['node_modules/isemail', 'node_modules/joi', 'node_modules/topo']
        config.entry.common = ['babel-polyfill']

        for (let i = 0; i < nodeModules.length; i++) {
          config.module.rules.push ({
            test: Path.resolve(__dirname, nodeModules[i]),
            loader: "babel-loader",
            options: {
              babelrc: false,
              cacheDirectory: false,
              presets: ["es2015"],
              plugins: ["syntax-async-functions", "transform-regenerator"]
            },
            exclude: /\.json/
          })
        }
      }
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }
dmwin72015

dmwin72015 posted a new question

nuxt.js • 2 days ago

how to remove meta attribute llike "data-n-head" "data-hid" ???

i do not want attribute "data-n-head" appear in meta tag or other tags

joshukraine

joshukraine posted a new question

nuxt.js • 2 days ago

How to use postcss syntax inside single file components (.vue files)?

Hello,

Just getting started with Nuxt.js, and having some trouble integrating PostCSS plugins.

In particular, I am trying to use the postcss-inline-svg plugin. When I use its syntax within the <style> tags in a Vue component (e.g. pages/index.vue) it is not processed. However, if I use it inside a normal css file (e.g. assets/styles/tailwind.css), it is processed.

So here's my code so far.

postcss.config.js

const join = require('path').join
const tailwindJS = join(__dirname, 'tailwind.js')

module.exports = {
  plugins: [
    require('tailwindcss')(tailwindJS),
    require('postcss-inline-svg'),
    require('autoprefixer')
  ]
}

pages/index.vue

<template lang="pug">
div.coming-soon.w-full.h-screen.bg-cover.bg-black.relative
  div.greeting.border.border-white
</template>

<script>
export default {}
</script>

<style scoped>

...

.greeting {
  background: svg-load("../images/coming-soon.svg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  box-sizing: content-box;
  height: 200px;
  width: 400px;
}

...

</style>

However, if I cut the greeting class from pages/index.vue and move it to the bottom of assets/styles/tailwind.css then it works fine. My best guess at this point is that css inside components is not being processed through the postcss-loader. I think there is a way to add this in the build section of nuxt.config.js. I've searched this a lot, but so far have not found a solution.

What am I doing wrong? Thanks in advance for any assistance!

Bonus Question

What is the preferred way to add PostCSS plugins in general in a Nuxt app? The Nuxt docs say to put them in nuxt.config.js. However when I researched setting up Tailwind CSS, everyone was requiring it in postcss.config.js. Which is correct/preferred?

jalcine

jalcine posted a new question

starter-template • 3 days ago

Add Testing Harness

Giving a basis on how to test new Nuxt.js applications can encourage good guidelines and practices for those just starting with Nuxt.

mvaneijgen

mvaneijgen posted a new question

nuxt-generate-cluster • 3 days ago

Setting base: in the generate: {} object

I am building an app to host on Github Pages so I changed my generate object in nux.config.js to

generate: {
    dir: 'docs',
    router: {
      base: '/<repo-name>/',
    },
  }

but it seems not possible to change the router with this when running npm run generate. What would be the correct way if setting this?

I still want to use npm run dev and have the app just run locally (localhost:3000) and use npm run generate and host it on Github Pages.

anish000kumar

anish000kumar posted a new bug report

nuxt.js • 3 days ago

bug FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory , on localhost

Version

v1.4.0

Reproduction link

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

Steps to reproduce

Running npm run dev works fine, but on making any changes in any existing page, the localhost server crashes at 91% of the build step.

Here's the message receives on crash:

 WAIT  Compiling...                                                                                                                    14:30:29


  ████████████████████ 91% additional chunk assets processing
<--- Last few GCs --->

[9604:0x103000000]   130019 ms: Mark-sweep 1391.6 (1540.6) -> 1391.6 (1540.6) MB, 200.2 / 0.0 ms  allocation failure GC in old space requested
[9604:0x103000000]   130263 ms: Mark-sweep 1391.6 (1540.6) -> 1391.6 (1537.1) MB, 206.9 / 0.0 ms  last resort GC in old space requested
[9604:0x103000000]   130478 ms: Mark-sweep 1391.6 (1537.1) -> 1391.6 (1535.6) MB, 214.8 / 0.0 ms  last resort GC in old space requested


<--- JS stacktrace --->

==== JS stack trace =========================================

Security context: 0x1fa090125ec1 <JSObject>
    0: builtin exit frame: parse(this=0x1fa090109021 <Object map = 0x1fa046302ba1>,0x1fa0d80cbe69 <Very long string[1580674]>)

    2: /* anonymous */(aka /* anonymous */) [/Users/ak/Documents/nuxt/nuxt-frontend/node_modules/vue-server-renderer/server-plugin.js:81] [bytecode=0x1fa02ff40979 offset=184](this=0x1fa0c9a02311 <undefined>,asset=0x1fa0be347c91 <Object map = 0x1fa0c62fe7f9>...

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
 1: node::Abort() [/usr/local/bin/node]
 2: node::FatalException(v8::Isolate*, v8::Local<v8::Value>, v8::Local<v8::Message>) [/usr/local/bin/node]
 3: v8::internal::V8::FatalProcessOutOfMemory(char const*, bool) [/usr/local/bin/node]
 4: v8::internal::Factory::NewRawOneByteString(int, v8::internal::PretenureFlag) [/usr/local/bin/node]
 5: v8::internal::Handle<v8::internal::String> v8::internal::JsonParser<false>::SlowScanJsonString<v8::internal::SeqOneByteString, unsigned char>(v8::internal::Handle<v8::internal::String>, int, int) [/usr/local/bin/node]
 6: v8::internal::JsonParser<false>::ParseJsonValue() [/usr/local/bin/node]
 7: v8::internal::JsonParser<false>::ParseJsonArray() [/usr/local/bin/node]
 8: v8::internal::JsonParser<false>::ParseJsonValue() [/usr/local/bin/node]
 9: v8::internal::JsonParser<false>::ParseJsonObject() [/usr/local/bin/node]
10: v8::internal::JsonParser<false>::ParseJsonValue() [/usr/local/bin/node]
11: v8::internal::JsonParser<false>::ParseJson() [/usr/local/bin/node]
12: v8::internal::Builtin_Impl_JsonParse(v8::internal::BuiltinArguments, v8::internal::Isolate*) [/usr/local/bin/node]
13: 0x3b73ec08441d
[1]    9603 abort      npm run dev

I'm not sure what's causing this issue and any help would be really appreciated. I have looked into similar issues reported on github already, but none of those could actually lead me to the solution. Also, if there a way to run local server without hot module reloading ( with live reload), in case it's caused because of HMR?

What is expected ?

Hot module reloading should work on changes, without crashing the server

What is actually happening?

Localhost server crashes and build stops.

rktyt

rktyt posted a new bug report

auth-module • 3 days ago

bug Layout does not work in SPA mode

Version

v4.5.1

Reproduction link

https://example.com/none

Steps to reproduce

mode: 'spa',
router: {
    middleware: ['auth']
},

layouts/auth.vue

<template>
  <div>
    <header>Header</header>
    <main><nuxt/></main>
    <footer>Footer</footer>
  </div>
</template>

pages/login.vue

<template>
  <div>
    Login Form
  </div>
</template>
<script>
export default {
  layout: 'auth'
}
</script>

After generated, shown only "Login Form" when direct access to /login/.

What is expected ?

Make the layout available.

What is actually happening?

The layout can not be fully used in SPA mode.

kid-wumeng

kid-wumeng posted a new question

hare • 3 days ago

How to set the 'lang' attribute of <html> ?

Hi, I want to replace the lang="en" with lang="zh" in <html> tag. What should I do ?

derekshull

derekshull posted a new question

express-template • 3 days ago

HTTPS localhost on latest version

I'd like to see if anyone else has had success and whether there's an "official way" to do this. In order to get it working I had to first create an key and cert using the following command

openssl req \
    -newkey rsa:2048 \
    -x509 \
    -nodes \
    -keyout key.pem \
    -new \
    -out cert.pem \
    -subj /CN=localhost \
    -reqexts SAN \
    -extensions SAN \
    -config <(cat /System/Library/OpenSSL/openssl.cnf \
        <(printf '[SAN]\nsubjectAltName=DNS:localhost')) \
    -sha256 \
    -days 3650

Then I created a server.js file in the project with the following code

const { Nuxt, Builder } = require('nuxt');
const app = require('express')();
const http = require('http');
const https = require('https');
const fs = require('fs-extra');

let server;

const isProd = (process.env.NODE_ENV === 'production');
const port = process.env.PORT || 3000;

// Prepare for HTTP or HTTPS
if (process.env.NODE_ENV !== 'production') {
  const pkey = fs.readFileSync('./key.pem');
  const pcert = fs.readFileSync('./cert.pem');
  const httpsOptions = {
    key: pkey,
    cert: pcert,
  };
  server = https.createServer(httpsOptions, app);
} else {
  server = http.createServer(app);
}

// We instantiate nuxt.js with the options
const config = require('./nuxt.config.js');

config.dev = !isProd;
const nuxt = new Nuxt(config);

// Render every route with Nuxt.js
app.use(nuxt.render);

function listen() {
  // Listen the server
  // app.listen(port, '0.0.0.0');
  server.listen(port, 'localhost');
  console.log(`Server listening on localhost:${port}.`);
}

// Build only in dev mode with hot-reloading
if (config.dev) {
  new Builder(nuxt).build()
    .then(listen)
    .catch((error) => {
      console.error(error);
      process.exit(1);
    });
} else {
  listen();
}

And finally I changed the npm run dev command from nuxt to NODE_ENV=development node server.js in package.json

When you run dev for the first time it'll say the site isn't secure when you go to https://localhost:3000. I used the following instructions to allow the cert.pem file to be trusted by my machine: https://stackoverflow.com/questions/7580508/getting-chrome-to-accept-self-signed-localhost-certificate#answer-15076602

Is there any reason not to do it this way? If so, what's the best way? Thanks!

iambtr

iambtr posted a new question

nuxtjs.org • 3 days ago

nuxt generate 静态化 部署到github 资源404

带下划线404
Request URL: https://iambtr.github.io/_nuxt/style.css
Request Method: GET
Status Code: 404
不带下划线正常
Request URL: https://iambtr.github.io/nuxtjs/nuxt/style.css
Request Method: GET
Status Code: 200
怎么配置生成的_nuxt文件夹为 nuxt

Latest Releases see all

v4.0.1

Released 3 days ago

Bugfix release (v4.0.0-beta.4)

Released 5 days ago

Bugfix getAuth function ignored if set (v4.0.0-beta.3)

Released 6 days ago
Stats
49 repos
8796 commits
4905 issues
227 releases
4716 contributors