Activities

msymms

msymms posted a new question

hare •

Accessing store in js plugin

I have reviewed the comments in c6898 and still am a little confused. I have an asyncData call in nuxtServerInit loading an array and storing in the store. I have code that needs to be run in four separate components and wanted to combine this into a plugin/mixin. However, this code (which of course works fine in the component locally) requires access to the store. I get an error stating the prop 'getters' is undefined. Here is the js code for the methods/mixin.

util.js

getCategories (categories) {
    const loadedCategories = this.$store.getters.loadedCategories;
    let categoryNames = [];
    for (let idx in loadedCategories) {
      for (let cIdx in categories) {
        if (loadedCategories[idx].uuid === categories[cIdx]) {
          categoryNames.push(loadedCategories[idx].name);
          console.log(loadedCategories[idx].name);
        }
      }
    }
    return categoryNames;
  }

plugin code (main.js)

import Vue from 'vue'
import util from '~/static/js/util.js'

Vue.mixin({
  methods: {
    listCategories(categories) {
      util.getCategories(categories)
    }
  }
})

Again, I load the required array in the nuxtServerInit action and commit it to the store

Is the store available at this stage of the lifecycle??

TIA

podlebar

podlebar posted a new bug report

hare •

bug PWA Icon Module is generating false output

Version

2.6.0

Reproduction link

https://gist.github.com/podlebar/c3199368b0ff026d0454e2c77115297f

Steps to reproduce

Install nuxt pwa module as described in the docs. Add a 512px icon.png to static folder.

What is expected ?

icon prop should be array without size

What is actually happening?

the icon prop gets the size of the icons array passed. mainfest.json is not valid anymore

brandonpittman

brandonpittman posted a new bug report

hare •

bug Nuxtent cannot load pages when @nuxtjs/axios is registered as a module

Version

v0.4.0

Reproduction link

https://github.com/brandonpittman/nuxtent-module/blob/master/examples/multiple-content-types/nuxt.config.js

Steps to reproduce

Add '@nuxtjs/axios' to nuxt.config.js

What is expected ?

Should display content files

What is actually happening?

Can't find page

aaaguirrep

aaaguirrep posted a new question

hare •

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

nathanchase

nathanchase posted a new feature request

hare •

idea Add function to nuxt.config that passes current instance to enable access to URL path

What problem does this feature solve?

I want to try to add a canonical URL declaration like so:

link: [
    { rel: 'canonical', href: `https://www.mysite.com/${this.$route.path}` },
],

but it doesn't seem that there's anyway to access this.$route from within nuxt.config

@manniL suggested in Discord that creating a function that passes the current instance would enable this.

Having a single place in the config to declare a canonical URL structure would prevent having to declare it on every individual page component.

What does the proposed changes look like?

Add a function to nuxt.config to allow access to the router (path).

Perhaps something like this.$instance.$route.path ?

Modcat

Modcat posted a new question

hare •

Babel

IE11 support I have followed the docs on the page…

https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/babel-preset-app

However, Babel is not poly filling or transpiling for example parameters with default values such as…

function( param = 0 ) { …

…Transpiled to…

function( param ) { param = param || 0

I have this in my package.json

"browserslist": [
"> 0%",
"last 2 versions",
"IE 10"
],

I have this in my nuxt.config.js at the top

import '@babel/polyfill'

THEN under build, I've added the babel key

babel: {
presets: [
[
'@nuxtjs/babel-preset-app',
{
useBuiltIns: 'entry',
targets: { ie: 11 }
}
]
]
}

It does not transpile at all, still have erros and no poly filling.

begueradj

begueradj posted a new bug report

hare •

bug baseURL does not take effect

Version

v0.4.0

Reproduction link

https://github.com/begueradj/nuxt-axios-baseurl-bug

Steps to reproduce

  1. Clone my repo and change to the resulted directory
  2. Intall the dependencites: yarn install
  3. Launch the server: yarn run dev

What is expected ?

I expect the number of displayed posts to be 100.

This means in pages/index.vue, when I have this code:

mounted() {
    axios.get('/posts')
    .then(response => {
      this.posts = response.data
    })
    .catch(e => {
      this.errors.push(e)
    })
  }

axios should recoginize the baseURL configuration key I set in nuxt.config.js and thus fetch data from http://jsonplaceholder.typicode.com/posts

Here is my nuxt.config.js file content related to axios module:

modules: [
    // Doc: https://github.com/nuxt-community/axios-module#usage
    ['@nuxtjs/axios', {
      baseURL: 'http://jsonplaceholder.typicode.com'
    }]
  ],
  /*
  ** Axios module configuration
  */
  axios: {
    // See https://github.com/nuxt-community/axios-module#options
  },

What is actually happening?

The number of displayed posts is 0
axios is trying to send a get request to http://localhost/posts instead of http://jsonplaceholder.typicode.com/posts

Additional comments?

I checked similar posts but nothing worked for me.

Thanks,
Billal Begueradj

hzpOfLegends

hzpOfLegends posted a new question

hare •

Nuxt.js SPA First load white screen ?

How to solve Nuxt.js SPA First load white screen ? Here's the screenshot .
1540263338(1).jpg

tuotuogenjudi

tuotuogenjudi posted a new question

hare •

it find error,when I use element-ui.

Module Error (from ./node_modules/[email protected]/index.js):

/Users/siludaluan/Documents/testSpace/nuxt-custom/pages/login.vue
11:9 error Require self-closing on HTML elements (

) vue/html-self-closing
17:11 error Require self-closing on Vue.js custom components (<el-input>) vue/html-self-closing
17:53 error Attribute "type" should be on a new line vue/max-attributes-per-line
17:65 error Attribute "auto-complete" should be on a new line vue/max-attributes-per-line
17:85 error Attribute "placeholder" should be on a new line vue/max-attributes-per-line
17:102 error Attribute "on" should be on a new line vue/max-attributes-per-line
20:11 error Require self-closing on Vue.js custom components (<el-input>) vue/html-self-closing
20:37 error Attribute "model" should be on a new line vue/max-attributes-per-line
20:37 error Attribute "v-model.trim" should go before "type" vue/attributes-order
20:71 error Attribute "auto-complete" should be on a new line vue/max-attributes-per-line
20:91 error Attribute "placeholder" should be on a new line vue/max-attributes-per-line
20:108 error Attribute "on" should be on a new line

begueradj

begueradj posted a new feature request

hare •

idea Integrate Jest for testing

What problem does this feature solve?

Suggest Integrates unit testing through Jest during the scaffolding process.
This template ignores totally software testing concepts as it does not suggest any tool to run unit tests, for example.

What does the proposed changes look like?

During the scaffolding process, Jest should be selectable to run unit tests.

wangsong3635

wangsong3635 posted a new question

hare •

How to use middleware in layout

Environment: Node v10.12.0 + [email protected] + [email protected]

Description: when I use middleware in layout files,it does not work.

import { Vue, Component } from 'nuxt-property-decorator';
@Component 
export default class LayoutIndex extends Vue {
    middleware() {
        return 'auth';
    };
};

How to use middleware in Layouts or Pages ?

wangYaNan112618

wangYaNan112618 posted a new question

hare •

layout加载问题

线上环境,用完整的地址访问时总是加载默认的layout即default,忽略自己本来设置好的layout,但是在本地环境正常

wangxueliang

wangxueliang posted a new feature request

hare •

idea support ant-design-vue

What problem does this feature solve?

Add more Ui framework options is always good

What does the proposed changes look like?

Add ant-design-vue Ui framework

mahmoudrady248

mahmoudrady248 posted a new question

hare •

Nuxt or vue CLI better in big project ?

I have big project what is the best way to use in Nuxt or vue cli3
when can I use Nuxt and when can I use vue cli ?

herrdu

herrdu posted a new bug report

hare •

bug preserveWhitespace=false not work in Nuxt2

Steps to reproduce

Yesterday ,I update my project to Nuxt2.0 from Nuxt1.0.
I found the space between dom element has changed.
So , I set preserveWhitespace:false to vue-loader. But it's not working ?

Does someone konw the reason?
46240725-781b2100-c3de-11e8-80d1-e837c0c94798.png

What is expected ?

WX20180929-120230.png

What is actually happening?

WX20180929-120241.png

MrToxy

MrToxy posted a new question

hare •

How to solve memory leak and track down what's causing it

I'm using [email protected]^1.4.2 along side some plugins and out of nowhere, I started to experience some crashes due to a 'very long string' which gave me no clue of what it was or where it was in my app.
Now, these crashes are way too regular to be disregarded (happens every couple of saves) which is worrying since I'm nowhere close to tracking the culprit down.

Here's the actual node dump when it occurs:

<--- Last few GCs --->

[39379:0x103000000]  8337028 ms: Mark-sweep 1382.2 (1468.5) -> 1382.1 (1469.5) MB, 947.8 / 0.0 ms  allocation failure GC in old space requested
[39379:0x103000000]  8338115 ms: Mark-sweep 1382.1 (1469.5) -> 1381.9 (1433.5) MB, 1083.6 / 0.0 ms  last resort GC in old space requested
[39379:0x103000000]  8339133 ms: Mark-sweep 1381.9 (1433.5) -> 1381.9 (1433.0) MB, 1017.0 / 0.0 ms  last resort GC in old space requested


<--- JS stacktrace --->

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

Security context: 0x27507a325879 <JSObject>
    1: fromString(aka fromString) [buffer.js:314] [bytecode=0x27505a1ea351 offset=164](this=0x275098b022d1 <undefined>,string=0x2750494ff399 <Very long
 string[10906724]>,encoding=0x27507a3358e9 <String[4]: utf8>)
    2: from [buffer.js:177] [bytecode=0x27505a1e9e59 offset=11](this=0x2750359b64f1 <JSFunction Buffer (sfi = 0x27507a37c461)>,value=0x2750494ff399 <Very long string[10906724]>,encoding...

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::NewRawTwoByteString(int, v8::internal::PretenureFlag) [/usr/local/bin/node]
 5: v8::internal::String::SlowFlatten(v8::internal::Handle<v8::internal::ConsString>, v8::internal::PretenureFlag) [/usr/local/bin/node]
 6: v8::String::WriteUtf8(char*, int, int*, int) const [/usr/local/bin/node]
 7: node::StringBytes::Write(v8::Isolate*, char*, unsigned long, v8::Local<v8::Value>, node::encoding, int*) [/usr/local/bin/node]
 8: node::Buffer::New(v8::Isolate*, v8::Local<v8::String>, node::encoding) [/usr/local/bin/node]
 9: node::Buffer::(anonymous namespace)::CreateFromString(v8::FunctionCallbackInfo<v8::Value> const&) [/usr/local/bin/node]
10: v8::internal::FunctionCallbackArguments::Call(void (*)(v8::FunctionCallbackInfo<v8::Value> const&)) [/usr/local/bin/node]
11: v8::internal::MaybeHandle<v8::internal::Object> v8::internal::(anonymous namespace)::HandleApiCallHelper<false>(v8::internal::Isolate*, v8::internal::Handle<v8::internal::HeapObject>, v8::internal::Handle<v8::internal::HeapObject>, v8::internal::Handle<v8::internal::FunctionTemplateInfo>, v8::internal::Handle<v8::internal::Object>, v8::internal::BuiltinArguments) [/usr/local/bin/node]
12: v8::internal::Builtin_Impl_HandleApiCall(v8::internal::BuiltinArguments, v8::internal::Isolate*) [/usr/local/bin/node]
13: 0x1d7888c042fd
14: 0x1d7888cbd1d6

I've read through this log every time and I can't get any useful information out of it.
What I tried to do was setting every plugin I was using to ssr: false but saw no changes.

This is currently how part my nuxt.config.js looks like:

plugins: [
    "~/components/global",
    "~/plugins/i18n",
    "~/plugins/vform",
    "~/plugins/sweetalert",
    "~/plugins/axios",
    "~/plugins/fontawesome",
    "~/plugins/nuxt-client-init",
    "~/plugins/vuetify",
    "~/plugins/vue-stripe",
    "~/plugins/pusher",
    "~/plugins/test-image",
    {
      src: "~plugins/rating",
      ssr: false
    },
    {
      src: "~/plugins/vue-date-picker",
      ssr: false
    },
    {
      src: "~/plugins/vue-picture-input",
      ssr: false
    },
    {
      src: "~plugins/maps.js",
      ssr: false
    },
    {
      src: "~plugins/vuelidate",
      ssr: true
    }
  ],

  modules: ["@nuxtjs/router", "~/modules/spa", "@nuxtjs/axios"],
  axios: {
    proxy: false,
    baseURL: process.env.APP_URL
    // Can be also an object with default options
  },
  build: {
    vendor: ["~/plugins/vuetify.js"],
    analyze: {
      analyzerMode: "static"
    },
    optimization: {
      splitChunks: {
        chunks: 'all',
        automaticNameDelimiter: '.',
        name: true,
        cacheGroups: {},
        minSize: 500000,
        maxSize: 500000
      }
    },
    maxChunkSize: 500000,
    filenames: {
      chunk: '[id].[chunkhash].js'
    },
    // vendor: ['~/plugins/vuetify.js', '~/plugins/pusher'],
    extractCSS: true,
    extend(config, ctx) {
      if (!ctx.isClient) {
        // This instructs Webpack to include `vue2-google-maps`'s Vue files
        // for server-side rendering
        config.externals.splice(0, 0, function (context, request, callback) {
          if (/^vue2-google-maps($|\/)/.test(request)) {
            callback(null, false);
          } else {
            callback();
          }
        });
      }
    }
  }

I really need some help figuring this one out.
Thank you in advance

hacu9

hacu9 posted a new question

hare •

can langDir be a folder oustide project's folder?

Hey guys, i was wondering if is there any way the langDir can be outside of the root folder,

i got a project with the following structure

-shared
--config.js
--lang
---en-US.js
---fr-FR.js
---es-ES.js

-nuxt-app-1
-nuxt-app-2

the config.js looks like

const I18N = {
  defaultLocale: "en",
  seo:false, 
  locales: [
    {
      code: "es",
      iso: "es-ES",
      name: "Español",
      file: "es-ES.js"
    },
    {
      code: "en",
      iso: "en-US",
      name: "English",
      file: "en-US.js"
    },
    {
      code: "fr",
      iso: "fr-FR",
      name: "Francais",
      file: "fr-FR.js"
    }
  ],
  lazy: true,
  langDir: 'lang/' || './lang/ // tried both
};

i import the I18N const and use it in my nuxt.config.js like so

  modules: [
    ["nuxt-i18n", I18N]
  ],

but all i get is 'Failed to compile with 1 errors'

If i move the config file & lang folder to the project's folder it works like a charm but i would love to share the config and langs across these projects

516310460

516310460 posted a new question

hare •

nuxt-koa Bug

Nuxt-express refresh page resource is 304 nuxt-koa no 304

begueradj

begueradj posted a new bug report

hare •

bug Nuxt.js: message: 'This page could not be found' (nuxt-i18n)

Version

v0.4.0

Reproduction link

https://nuxt-community.github.io/nuxt-i18n/setup.html

Steps to reproduce

In my Nuxt application, I installed the nuxt-i18n plugin as described on the official documentation.
I then modified nuxt.config.js as recommended:

{
  modules: [
    ['nuxt-i18n', {
      // Options
    }]
  ]
}

What is expected ?

I expected my Nuxt application to run as before.

What is actually happening?

I am getting this error (in the console of the Development tools):


app.js:247 [nuxt] Error while initializing app TypeError: parentVal.concat is not a function
    at mergeHook (commons.app.js:10224)
    at mergeField (commons.app.js:10485)
    at mergeOptions (commons.app.js:10476)
    at Vue._init (commons.app.js:13601)
    at new Vue (commons.app.js:13719)
    at _callee5$ (app.js:1109)
    at tryCatch (commons.app.js:4154)
    at Generator.invoke [as _invoke] (commons.app.js:4388)
    at Generator.prototype.(:3000/anonymous function) [as next] (http://localhost:3000/_nuxt/commons.app.js:4206:21)
    at asyncGeneratorStep (commons.app.js:33)

Additional comments?

If I remove nuxt-i18n from the nuxt.config.js file, my Nuxt application works fine.

begueradj

begueradj posted a new question

hare •

Nuxt.js: message: 'This page could not be found' (nuxt-i18n)

In my Nuxt.js application, I installed the nuxt-i18n according to how the documentation suggests:

{
  modules: [
    ['nuxt-i18n', {
      // Options
    }]
  ]
}

But when I run npm run dev, I get this error message:

 DONE  Compiled successfully in -4519ms                                12:53:52                                                                                         


 OPEN  http://localhost:3000                                                                                                                                            

  nuxt:render Rendering url / +0ms                                                                                                                                      
{ statusCode: 404,                                                                                                                                                      
  path: '/',                                                                                                                                                            
  message: 'This page could not be found' }  

How to fix this?