Activities

thelittlewonder

thelittlewonder posted a new question

create-nuxt-app •

Universal Mode generated meta tags not detected by Facebook or Twitter

Hi team

This is my first time with NUXT and I am getting frustrated with a small issue. I have a project (universal mode, static target generated, and deployed to Netlify)

The problem is when using the Facebook debugger tool or Twitter card validator, it is not generating the preview. If you inspect the page, you can see the generated meta tags. But the tool gives you an error – No card found or Missing properties.

I also tried adding some default values in nuxt.config.js and when I ran the crawler on the home page it shows the default values. But in the particular pages, where it is supposed to be overridden – it isn't working. The tags get replaced on the rendered page (I am using hid) but they are not picked up by the validator tools of Facebook or Twitter.

I think the problem is Twitter or Facebook are doing a GET call to my URL, but the result of this call, in my understanding, is a Nuxt.js pre-render page for being executed in the browser. In the browser, the JS sources are executed at the moment of the page loading, so it can inject all the metatags and many other things. I also checked the JS response, the meta tags are not obtained in the first response and are appended later to the page

I tried searching at a lot of places, but could not find a workaround. Hence raising it here. Please help me out.

Thanks :)

lovewmf

lovewmf posted a new bug report

create-nuxt-app •

bug npm run generate nuxtServerInit is invalid

Version

v2.0.1

Reproduction link

https://codepen.io/

Steps to reproduce

null

What is expected ?

null

What is actually happening?

npm run generate
页面刷新nuxtServerInit 无效

lovewmf

lovewmf posted a new bug report

create-nuxt-app •

bug npm run generate nuxtServerInit is invalid

Version

v2.0.1

Reproduction link

https://codepen.io/

Steps to reproduce

null

What is expected ?

null

What is actually happening?

npm run generate
页面刷新nuxtServerInit 无效

clarkdo

clarkdo posted a new question

create-nuxt-app •

Add description for `runInNewContext: false` in dev mode
tomelic

tomelic posted a new bug report

create-nuxt-app •

bug Critical dependency: the request of a dependency is an expression

Version

v2.1.1

Steps to reproduce

The issue occurs due to webpack trying to compile server-side node modules, such as express. this is weird, since if we take a look at https://github.com/nuxt/nuxt.js/pull/780/files we see that nuxt uses webpack-node-externals which tells webpack to ignore these kind of modules.

Ok, weird, moving on, I added an extended webpack config to nuxt to specifically ignore the express module:

    extend (config, { isServer }) {
      if (!isServer) {
        // Extend webpack config to ignore fs and net module compilation.
        // Weird, since this should've been taken care of by Nuxt.
        config.node = {
          fs: 'empty',
          net: 'empty',
          express: 'empty'
        }
      }
    }

Also removed and reinstalled node modules and stuff, still stuck with the same error.

What is expected ?

That server side modules won't be loaded in my code :O

What is actually happening?

 WARN  in ./node_modules/express/lib/view.js                                        friendly-errors 11:53:35

Critical dependency: the request of a dependency is an expression                   friendly-errors 11:53:35
f3ltron

f3ltron posted a new question

create-nuxt-app •

netlify + npm run generate

What i have ?

a nuxt app https://github.com/vuemontreal/vuemontreal/tree/vuemontreal-next

i am using npm run generate with dynamic routes.

when i am looking locally my app i have html with datas

my netlify app https://vuemontreal.netlify.com/

on first load i have no datas… on every pages. But after i navigate my data come.

ps:

At the beginning i thought it could be because of the new fetch api from nuxt but even with asyncData it’s not working.
I have no ideas…

Thank’s for your time

tugaybaltaci

tugaybaltaci posted a new question

create-nuxt-app •

Rendering page by paremeter (slug/id etc.)

Hi everyone,

I'm trying to render different pages by slug but all these pages should render under root path. I have a resolver API that I can ask which page should render by the slug. Is there a way to render several pages under root path?

Here is an example for mapping

/new-awesome-product => products/_slug.vue

/supreme-collection => collections/_slug.vue
AllanOricil

AllanOricil posted a new bug report

create-nuxt-app •

bug Failed to install dependency

Version

v2.1.1

Reproduction link

https://…

Steps to reproduce

just try to create a new nuxt app using npx or use npm install nuxt and you receive a message:

npm ERR! Unexpected end of JSON input while parsing near '…ct/-/connect-2.9.0.tg'

This is my npm config:
{
"json": true,
"user-agent": "npm/6.12.1 node/v12.13.1 win32 x64",
"metrics-registry": "https://registry.npmjs.com/",
"scope": "",
"always-auth": true,
"https://registry.npmjs.org/": "",
"registry": "https://registry.npmjs.com/",
"\"always-auth": "true\"=npm",
"prefix": "C:\Users\oricil\AppData\Roaming\npm",
"access": null,
"allow-same-version": false,
"also": null,
"audit": true,
"audit-level": "low",
"auth-type": "legacy",
"before": null,
"bin-links": true,
"browser": null,
"ca": null,
"cache": "C:\Users\oricil\AppData\Roaming\npm-cache",
"cache-lock-stale": 60000,
"cache-lock-retries": 10,
"cache-lock-wait": 10000,
"cache-max": null,
"cache-min": 10,
"cert": null,
"cidr": null,
"color": true,
"depth": null,
"description": true,
"dev": false,
"dry-run": false,
"editor": "notepad.exe",
"engine-strict": false,
"force": false,
"format-package-lock": true,
"fetch-retries": 2,
"fetch-retry-factor": 10,
"fetch-retry-mintimeout": 10000,
"fetch-retry-maxtimeout": 60000,
"git": "git",
"git-tag-version": true,
"commit-hooks": true,
"global": false,
"globalconfig": "C:\Users\oricil\AppData\Roaming\npm\etc\npmrc",
"global-style": false,
"group": 0,
"ham-it-up": false,
"heading": "npm",
"if-present": false,
"ignore-prepublish": false,
"ignore-scripts": false,
"init-module": "C:\Users\oricil\.npm-init.js",
"init-author-name": "",
"init-author-email": "",
"init-author-url": "",
"init-version": "1.0.0",
"init-license": "ISC",
"key": null,
"legacy-bundling": false,
"link": false,
"loglevel": "notice",
"logs-max": 10,
"long": false,
"maxsockets": 50,
"message": "%s",
"node-options": null,
"node-version": "12.13.1",
"offline": false,
"onload-script": null,
"only": null,
"optional": true,
"otp": null,
"package-lock": true,
"package-lock-only": false,
"parseable": false,
"prefer-offline": false,
"prefer-online": false,
"preid": "",
"production": false,
"progress": true,
"proxy": null,
"https-proxy": null,
"noproxy": null,
"read-only": false,
"rebuild-bundle": true,
"rollback": true,
"save": true,
"save-bundle": false,
"save-dev": false,
"save-exact": false,
"save-optional": false,
"save-prefix": "^",
"save-prod": false,
"script-shell": null,
"scripts-prepend-node-path": "warn-only",
"searchopts": "",
"searchexclude": null,
"searchlimit": 20,
"searchstaleness": 900,
"send-metrics": false,
"shell": "C:\windows\system32\cmd.exe",
"shrinkwrap": true,
"sign-git-commit": false,
"sign-git-tag": false,
"sso-poll-frequency": 500,
"sso-type": "oauth",
"strict-ssl": true,
"tag": "latest",
"tag-version-prefix": "v",
"timing": false,
"tmp": "C:\Users\oricil\AppData\Local\Temp",
"unicode": false,
"unsafe-perm": true,
"update-notifier": true,
"usage": false,
"user": 0,
"userconfig": "C:\Users\oricil\.npmrc",
"umask": 0,
"version": false,
"versions": false,
"viewer": "browser",
"globalignorefile": "C:\Users\oricil\AppData\Roaming\npm\etc\npmignore"
}

What is expected ?

To have a nuxt app with all dependencies installed

What is actually happening?

Failing to fetch a nuxt dependency. Thus the app can't be finish its creation.

ksbgenius

ksbgenius posted a new feature request

create-nuxt-app •

idea Vuetify 2.0.0 Release...

What problem does this feature solve?

not problem

Vuetify 2.0.0 Release..

just apply dependence and modify

What does the proposed changes look like?

not problem

Vuetify 2.0.0 Release..

just apply dependence and modify

begueradj

begueradj posted a new bug report

create-nuxt-app •

bug error Unexpected require, please use import instead

Version

v2.1.1

Reproduction link

https://github.com/nuxt/create-nuxt-app

Steps to reproduce

Simply run yarn create nuxt-app project and choose Eslint in the process.

What is expected ?

When I lint nuxt.config.js I do not want complaints about ES6 syntax

What is actually happening?

I get these errors when I try to lint nuxt.config.js:

1:29  error  Unexpected require, please use import instead                 nuxt/no-cjs-in-config                                               
  2:13  error  Unexpected require, please use import instead                 nuxt/no-cjs-in-config                                               
  4:1   error  Unexpected module.exports, please use export default instead  nuxt/no-cjs-in-config 

Additional comments?

No need for a reproducible link in this case, I think.
Billal Begueradj

rchl

rchl posted a new bug report

create-nuxt-app •

bug Default link color doesn't contrast with background

Version

v2.1.1

Reproduction link

https://codesandbox.io/s/319w02xwrp

Steps to reproduce

  1. npx create-nuxt-app sample-project
  2. Select vuetify as UI framework
  3. Run npm run dev and open http://localhost:3000 in the browser

What is expected ?

That the default colors play well together

What is actually happening?

Links have dark color that almost blends with the background color. Basically deafult colors are poor contrast-wise.

Additional comments?

vuetify-colors.png

ELFoglalt

ELFoglalt posted a new bug report

create-nuxt-app •

bug Arrow keyes skip an option in menu navigation

Version

v2.1.1

Reproduction link

https://i.imgur.com/9oVUVPZ.gifv

Steps to reproduce

Re-created by using Git Bash with MinTTY on Windows:

  • Simply create new project
  • Run 'create-nuxt-app' using winpty npx.cmd create-nuxt-app
  • Observe as the up and down arrow keys jump 2 options instead of one in the selection menus

Happened with a fresh install of git (2.20.1 x64) + mintty, [email protected] and [email protected]

What is expected ?

Arrow keys move a single option up or down in the menus.

What is actually happening?

Arrow keys move two options up or down in the menus.

imShara

imShara posted a new bug report

create-nuxt-app •

bug "Tapable.plugin is deprecated. Use new API on `.hooks` instead" while building generated app

Version

2.2.1

Reproduction link

--

Steps to reproduce

Generating Nuxt.js project in /home/user/app
? Project name app
? Project description Peertubes cross-instance search client
? Use a custom server framework none
? Choose features to install Progressive Web App (PWA) Support, Linter / Formatter, Prettier, Axios
? Use a custom UI framework none
? Use a custom test framework none
? Choose rendering mode Universal
? Author name User
? Choose a package manager npm

node --trace-deprecation node_modules/nuxt/bin/nuxt.js build

ERROR  (node:10155) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead                                                                                19:12:51
    at Object.apply (/home/user/app/node_modules/@nuxtjs/icon/index.js:98:20)
    at webpack (/home/user/app/node_modules/webpack/lib/webpack.js:47:13)
    at compilers.compilersOptions.map (/home/user/app/node_modules/@nuxt/webpack/dist/webpack.js:5048:24)
    at Array.map (<anonymous>)
    at WebpackBundler.build (/home/user/app/node_modules/@nuxt/webpack/dist/webpack.js:5047:39)
    at Builder.build (/home/user/app/node_modules/@nuxt/builder/dist/builder.js:5735:30)

What is expected ?

Clean install

What is actually happening?

Deprecation warning

How to solve

Need to bump pwa-module version, bug fixed here

rubenberendsen

rubenberendsen posted a new question

create-nuxt-app •

create-nuxt-app 1.0.0

Hi,

If i'm using create-nuxt-app it generated always an app with nuxt version 1.0.0 in the package.json.

nuxt100.png

Is there something i do wrong?


I have found the reason:

When create-nuxt-app a project of nuxt-community (1.0.0) i have installed it globaly. I have updated it with:

npm install -g create-nuxt-app

aaaguirrep

aaaguirrep posted a new bug report

create-nuxt-app •

bug Issue creating nuxt app by npx create-nuxt-app <project_name>

Version

v2.1.0

Reproduction link

https://codesandbox.io/

Steps to reproduce

run "npx create-nuxt-app" in the terminal

What is expected ?

Project created

What is actually happening?

The creation process of a new nuxt project is not finishing.

It shows the next message:

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN [email protected] requires a peer of [email protected] - 3 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of [email protected]^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of [email protected]^3.18.0 || ^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of [email protected]^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 1191 packages from 698 contributors and audited 10748 packages in 115.74s
found 1 high severity vulnerability
run npm audit fix to fix them, or npm audit for details

Additional comments?

I am using the next version of node and npm:

node --> 11.6.0
npm --> 6.5.0

I am choosing the next options:
? Project name test1
? Project description My doozie Nuxt.js project
? Use a custom server framework none
? Use a custom UI framework bootstrap
? Choose rendering mode Universal
? Use axios module yes
? Use eslint yes
? Author name Arsenio Aguirre
? Choose a package manager npm

matamune94

matamune94 posted a new question

create-nuxt-app •

Can change port nuxt

im try
const {
host = process.env.HOST || '127.0.0.1',
port = process.env.PORT || 3003
} = nuxt.options.server

but when npm run dev , it's locahost:3000

ChrisDillinger

ChrisDillinger posted a new question

create-nuxt-app •

Has anyone successfully programmatically called create-nuxt-app or used shelljs to successfully open create-nuxt-app without blocking inputs from the end user?

I'm trying to see if I can either execute the create-nuxt-app as part of a step within a multi-step tool that does some other custom tasks. I'm relying on shelljs ( https://github.com/shelljs/shelljs ) to execute my commands from node, however I run into an issue where my custom CLI freezes up when I execute the create-nuxt-app cli.

If this isn't feasible, then I was hoping I could programmatically provide inputs to the create-nuxt-app cli (--name 'project-name', --description 'my-description', etc, etc). However after looking at docs and source code I'm not seeing a way to do this.

Any criticisms or general ideas would be greatly appreciated

Regards,
Chris

seybsen

seybsen posted a new question

create-nuxt-app •

Debug vue-files with VS Code breakpoints

I started with https://github.com/nuxt/create-nuxt-app with following configuration:

and added config.devtool = "eval-source-map"; to build.extend in nuxt.config.js.

VS Code is configured to just attach to a running node process via launch.json:

{
  "type": "node",
  "request": "attach",
  "cwd": "${workspaceRoot}",
  "name": "Node: Nodemon",
  "processId": "${command:PickProcess}",
  "sourceMaps": true,
  "protocol": "inspector",
  "console": "integratedTerminal"
}

Node process is started via yarn dev before starting debugging in VS Code.

package.json scripts:

"dev": "cross-env NODE_ENV=development nodemon --inspect server/index.js --watch server",

Issue:
A set breakpoint is shown as Unverified breakpoint in VS Code or sometimes moves from e.g. asyncData to a line within <template>.

Question:
How to make VS Code breakpoints work in single file components (layouts, pages and components folders)?

ThatNerdyPikachu

ThatNerdyPikachu posted a new bug report

create-nuxt-app •

bug Freezes at the end of generation

Version

v2.1.1

Reproduction link

https://google.com

Steps to reproduce

  1. Run npx create-nuxt-app blah or yarn create nuxt-app blah
  2. Select features, etc
  3. Wait for completion

What is expected ?

The program to exit and or complete

What is actually happening?

It freezes right after the package manager completes

Almusamim

Almusamim posted a new question

create-nuxt-app •

New nuxt installation stuck on 1.0.0

Every time I run npx create-nuxt-app <project-name> --edge Nuxt 1.0 is being installed?

What is happening here?

OS: Win 10
npm 6.5.0
node v10.15.0