Repository hare

hzpOfLegends

hzpOfLegends posted a new question

hare • 17 hours ago

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 • a day ago

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 • 7 days ago

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 • 11 days ago

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 • 14 days ago

layout加载问题

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

wangxueliang

wangxueliang posted a new feature request

hare • 15 days ago

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 • 15 days ago

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 • 25 days ago

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 • 25 days ago

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 • a month ago

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 • a month ago

nuxt-koa Bug

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

begueradj

begueradj posted a new bug report

hare • a month ago

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 • a month ago

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?

yzszcn

yzszcn posted a new question

hare • a month ago

How to import a remote js file into body?

How to import a remote js file into body?

ZooTopiaGG

ZooTopiaGG posted a new question

hare • a month ago

Cannot find module 'webpack/lib/RequestShortener'

Cannot find module 'webpack/lib/RequestShortener'

ZooTopiaGG

ZooTopiaGG posted a new question

hare • a month ago

configuration loading not work?

in nuxt.config.js,
loading: {
color: 'blue',
height: '10px'
},
but not work.

zhenmang

zhenmang posted a new question

hare • a month ago

layouts中引入公共组件,公共组件中的mapState失效

<template lang='pug'> div.tip-container-customer(v-show='tipMsg') div.tip-content div.real-tip {{tipMsg}} p(@click='confirm' class='confirm') 确认 </template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
computed: {
…mapState(['tipMsg'])
},
created () {
console.log('this.tipMsg', this.tipMsg)
},
methods: {
…mapMutations(['showTip']),
confirm () {
this.showTip({msg: false})
}
}
}

ImreC

ImreC posted a new question

hare • a month ago

Entering nuxt app from specific route throwing server error when using Apollo in asyncData. Why?

I have a nuxt app running and got a bug report that someone shared a link to a certain route in my application. When the link was clicked the person got a server error. Upon investigating further I found that it happens when I browse inPrivate too. The culprit is this piece of code:

    async asyncData({app, params}) {
      let client = app.apolloProvider.defaultClient
      const result = await client.query({
        query: someQuery,
        variables: {
          params
        }
      })
      const res= result.data.someResult
      return { res }
    }

The error message is: “Network error: str must be a string”

It works perfectly when:

  • accessing the route from the application
  • opening the route directly on the desktop/mobile chrome and firefox in normal mode
  • opening the route in private mode when other routes have already been opened

It throws errors when:

  • going directly to this page from mobile Samsung browser
  • going directly to this page in incognito/private mode

The current workaround is to move the Apollo query from asyncData to created. My question is: “Why does this happen?”. I simply have no idea.

kutluhann

kutluhann posted a new question

hare • a month ago

How can i render v-html on server side?

Hi there. I need to render a string includes html tags with v-html on server side. You now v-html renders it on client side. So how can i render it on server side with nuxt.js

roqsantacruz

roqsantacruz posted a new question

hare • a month ago

Nuxt generate — IOS 9 Safari

After the generate it shows 2 console errors.

Anyone can help?

VMundefined vendor.a24d4ba….js:2 SyntaxError: Unexpected keyword 'const'. Const declarations are not supported in strict mode.(anonymous function) @ VMundefined vendor.a24d4ba….js:2
manifest.854a302….js:1 TypeError: undefined is not an object (evaluating 'e[n].call')