Activities

fy0

fy0 posted a new question

nuxt.js •

Can not use '$store' in vue plugin, it's undefined.

My vuex store:

export const state = () => ({
  config: {
    a: 123
  }
});

A simple vue plugin:

export default {
  install(Vue, options) {
    if (!Vue.prototype.$config) {
      Object.defineProperty(Vue.prototype, "$config", {
        get() {
          return this.$store.state.config;
        }
      });
    }
  }
};

import with nuxt.js:

import Vue from "vue";
import ConfigHelper from "./config_helper";

Vue.use(ConfigHelper);

Used in template:

<template>
  <div class="container">
    <div>{{ $config }} test</div>
    <h1 class="title">nuxt-test</h1>
  </div>
</template>

Got a crash:

TypeError
Cannot read property 'state' of undefined

May I ask for a solution?

CodeSandbox: https://codesandbox.io/s/zq47z00lj4

lock[bot]

lock[bot] posted a new question

nuxt.js •

[Lock] Configuration error

Lock has encountered a configuration error in lock.yml.

ValidationError: child "daysUntilLock" fails because ["daysUntilLock" must be less than or equal to 3650]
lock[bot]

lock[bot] posted a new question

nuxt.js •

[Lock] Configuration error

Lock has encountered a configuration error in lock.yml.

ValidationError: child "daysUntilLock" fails because ["daysUntilLock" must be less than or equal to 3650]
lock[bot]

lock[bot] posted a new question

nuxt.js •

[Lock] Configuration error

Lock has encountered a configuration error in lock.yml.

ValidationError: child "daysUntilLock" fails because ["daysUntilLock" must be less than or equal to 3650]
lock[bot]

lock[bot] posted a new question

nuxt.js •

[Lock] Configuration error

Lock has encountered a configuration error in lock.yml.

ValidationError: child "daysUntilLock" fails because ["daysUntilLock" must be less than or equal to 3650]
lock[bot]

lock[bot] posted a new question

nuxt.js •

[Lock] Configuration error

Lock has encountered a configuration error in lock.yml.

ValidationError: child "daysUntilLock" fails because ["daysUntilLock" must be less than or equal to 3650]
mauxtin

mauxtin posted a new question

nuxt.js •

Nuxt.js routes: limit possible parameter options

I have the following url structure in my Nuxt.js app.

/pages/_wildcard/_id.vue

which basically corresponds to example.com/*/*

I am looking for a way to only fire that page when visiting specific parameters.

For example, I would like to only allow only clothes, electronics and babies as the possible wildcard value which correspond to

  • example.com/clothes/*
  • example.com/electronics/*
  • example.com/babies/*

Anything else other than the three of them shouldn't go to this page.

The problem occurs since the first parameter is a wildcard. I am looking for a way to only allow specific wildcard values in the route. Is there anything like that?

The only thing I thought is having an if statement inside the asyncData method to do the validation but I'd like to avoid that. Looking for a better solution here.

lock[bot]

lock[bot] posted a new question

nuxt.js •

[Lock] Configuration error

Lock has encountered a configuration error in lock.yml.

ValidationError: child "daysUntilLock" fails because ["daysUntilLock" must be less than or equal to 3650]
jllagerberg

jllagerberg posted a new question

nuxt.js •

Error after build

I created a nuxt project (SPA) and I'm now trying to build it (npm run build).

I am generating a /dist folder but when I open the index.html I get these errors:
nuxt

Is there some setting in the nuxt.config I have to make? All code there is on default.

lock[bot]

lock[bot] posted a new question

nuxt.js •

[Lock] Configuration error

Lock has encountered a configuration error in lock.yml.

ValidationError: child "daysUntilLock" fails because ["daysUntilLock" must be less than or equal to 3650]
lock[bot]

lock[bot] posted a new question

nuxt.js •

[Lock] Configuration error

Lock has encountered a configuration error in lock.yml.

ValidationError: child "daysUntilLock" fails because ["daysUntilLock" must be less than or equal to 3650]
GOGOGOSIR

GOGOGOSIR posted a new question

nuxt.js •

cropper in the nuxt 2.0.0 报错

在plugins/cropper.js

import Vue from 'vue'
import VueCropper from 'vue-cropper'
Vue.component('VueCropper', VueCropper)

然后在 nuxt.config.js
{
build: {
vendor: [
'vue-cropper'
]
},
plugins: [
{
src: '~/plugins/cropper',
ssr: false
}
]
}

最后在page/index.vue 使用
<VueCropper ref="bscropper" :img="cropperImg" :auto-crop="true" :fixed-box="false" :fixed="false" :full="false" outputType='png' />

浏览器会报
You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build 和

The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside

, or missing . Bailing hydration and performing full client-side render.
的错误!

AhmedHdeawy

AhmedHdeawy posted a new question

nuxt.js •

can't use admin-lte

hello

i want to use Admin-lte for my admin Panel only, not for all my website

i installed admin-lte package npm install --save admin-lte

but i don't know how to use it and import css and js files for this package

please help me

thanks in advance

zhanghaisong11

zhanghaisong11 posted a new question

nuxt.js •

我用<nuxt-child> 传入的props 不变

我用<nuxt-child>做嵌套路由并传参类似于<nuxt-child :test="testData">,testData为一个可变化的对象,但是子集props得到的全是父集data()初始化的值。我要怎么解决呢

axetroy

axetroy posted a new question

nuxt.js •

Discuss routing aliases

In the actual project, we want the route to have an alias

eg.
/user/:username map to /u/:username

we can only define the router like this

pages/
└── u
    └── _username.vue

and you knew. the directory structure of /pages/u/_username.vue is very ugly and unreadable.

This issue is just to discuss how to achieve it gracefully.

achieved goals:

directory structure

pages/
└── user
    └── _username.vue

router defined
/u/:username

fabsfabs

fabsfabs posted a new question

nuxt.js •

Nuxtjs and Pixijs load a JSON in to loader Pixi function

Hi everyone
I'm quite new with nuxtjs and webpack and I'm facing my first big question about it.
How do I load a JSON spritesheet with loader function of Pixijs in Nuxtjs?

What I try to reach is similar to this example provided by Pixijs https://pixijs.io/examples/#/basics/spritesheet.js

What happen to me is that the spritesheet.json file added to the loader doesn't load actually and few errors are displayed.
Screen Shot 2019-01-18 at 14.42.44.png

Here you can find the final result, not in nuxtjs of course
http://fabiobertozzi.it/portfolio/intro.html

The spritesheet animation is this one below (the dissolving grey panel)
Screen Shot 2019-01-18 at 14.45.41 3.png

Certainly I miss some basic knowledge of nuxtjs and webpack.
Anyone can help me?

Many thanks

fabsfabs

fabsfabs posted a new feature request

nuxt.js •

idea Nuxtjs and Pixijs load a JSON in to loader Pixi function

What problem does this feature solve?

Hi everyone
I'm quite new with nuxtjs and webpack and I'm facing my first big question about it.
How do I load a JSON spritesheet with loader function of Pixijs in Nuxtjs?

What I try to reach is similar to this example provided by Pixijs https://pixijs.io/examples/#/basics/spritesheet.js

What happen to me is that the spritesheet.json file added to the loader doesn't load actually and few errors are displayed.
Screen Shot 2019-01-18 at 14.42.44.png

Here you can find the final result, not in nuxtjs of course
http://fabiobertozzi.it/portfolio/intro.html

The spritesheet animation is this one below (the dissolving grey panel)
Screen Shot 2019-01-18 at 14.45.41 3.png

Certainly I miss some basic knowledge of nuxtjs and webpack.
Anyone can help me?

Many thanks

TTouka

TTouka posted a new question

nuxt.js •

Nuxt2's SSR doesn't transpile modules in node_modules

I added bootstrap-vue partially:

import Vue from 'vue';
import bCollapse from 'bootstrap-vue/es/components/collapse/collapse';
Vue.component('b-collapse', bCollapse);

bootstrap-vue/es/* are ES6 script, so I configured nuxt.config.js to transpile them:

build.transpile = [
      /\/bootstrap-vue\//,
];

When I run this app as SPA, it works fine.
But when I enable SSR, I got errors like:

/web/app/node_modules/bootstrap-vue/es/components/collapse/collapse.js:1
(function (exports, require, module, __filename, __dirname) { import listenOnRootMixin from '../../mixins/listen-on-root';
                                                              ^^^^^^

SyntaxError: Unexpected token import
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:607:28)
    at Object.Module._extensions..js (module.js:654:10)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:499:12)
    at Function.Module._load (module.js:491:3)
    at Module.require (module.js:587:17)
    at require (internal/module.js:11:18)
    at r (/web/app/node_modules/vue-server-renderer/build.js:8359:16)
    at Object.<anonymous> (server-bundle.js:623:18)
    at __webpack_require__ (server-bundle.js:27:30)
    at Module.<anonymous> (server-bundle.js:3628:17)
    at __webpack_require__ (server-bundle.js:27:30)
    at Object.<anonymous> (server-bundle.js:665:18)
    at __webpack_require__ (server-bundle.js:27:30)

When I wrote this app with Nuxt1, it worked fine with webpack-node-externals.
https://github.com/Justineo/vue-awesome/issues/7#issuecomment-322034039
But Nuxt2 does not.

Do you have any ideas?

elton2048

elton2048 posted a new question

nuxt.js •

Crash when using with css-loader

A project using nuxt.js cannot serve normally when css-loader is dependency. It always compiled with error for both client and server side. How to serve a project with both packages?

This is the error message shown when css-loader is added into the project with nuxt.
Screenshot 2019-01-18 at 6.40.16 PM.png

dschewchenko

dschewchenko posted a new feature request

nuxt.js •

idea zero-downtime deployment

What problem does this feature solve?

I have many modules and one custom async module for serverMiddleware with db connection. When I make some changes in module it will start server up to 10 seconds. And users see nginx error page.
For zero-downtime deployment in cluster mode we need to notify pm2 about successful start of server

https://pm2.io/doc/en/runtime/best-practices/graceful-shutdown/#graceful-start

What does the proposed changes look like?

call process.send(‘ready’) when all modules are initialized and server is ready