Repositories

Feed

Capu-zennio

Capu-zennio posted a new question

nuxt-i18n • 7 hours ago

Browser detection is not working with nuxt generate.

Since the browser detection is done in the middleware, it doesn't fire when loading a static html page created with nuxt generate.

Is this intended or a bug?

flovan

flovan posted a new question

nuxt.js • 9 hours ago

Components not rendering proper element tags in production

I'm having problems with Nuxt 2 in production mode, where components are rendered with their component name as tag name, rather than the desired proper HTML tag. Before we upgraded to V2, this was working just fine.

I was hoping someone could point me in the right direction of where to start looking.

For example where <custom-title :is="h1">Foo</custom-title> will render <h1> in development, it renders <custom-title> in production, removing the semantic value from the element. This is a dumbed-down example of one of our components:

// Title.vue

<template>
  <component :is="tagName">
    <slot />
  </component>
</template>

<script>
export default {
  props: {
    tagName: {
      type: String,
      default: 'h1',
    }
  }
};
</script>

We use it like this:

// in a Nuxt plugin:
// (note that we import our components from a private NPM package, this is just for replication purposes)

import Title from '~/components/Title.vue';
Vue.component('my-title', Title);

// Elsewhere in a component, we could render a <button> tag like this:

<my-title' tag-name="button">Test title</my-title'>

It seems to be really specific to our setup, as I did not succeed to isolate the issue on a blank project; the snippet above works just fine.

ChandruCR

ChandruCR posted a new question

nuxt.js • 11 hours ago

Nuxt 2.0 IE 11 support

How to get nuxt starter project on IE11 browser?

In earlier version of Nuxt adding babel-polyfill to vendor option in nuxt.config.js would resolve this issue.

Since it is deprecated now because Nuxt 2.0 is using webpack 4.0. What needs to be done to get the starter project working on IE 11

jhlim82

jhlim82 posted a new question

nuxt.js • 12 hours ago

-webkit-box-orient is declared, but not applied.

We use sass-loader / scss on nuxt.js(recent version) and it works very good, except one thing.

I put '-webkit-box-orient: vertical;, inside of style statement but the browsers(chrome) can't render that.

Where I use inline tag, then works fine.

Do I have to modify some webpack or sass-loader setting?? Or, Is it some browser's issue??

adi-zz

adi-zz posted a new question

create-nuxt-app • 12 hours ago

How to submit a bug?
waqas-mehmood-pk

waqas-mehmood-pk posted a new question

create-nuxt-app • 13 hours ago

Vuetify & axios not added in project

Hello, I am first time install nuxt.js via npx and select vuetify and axios during the installation procedure but after installation, I can't find both libraries in package.json and nuxt.config.js file.

Lukang689

Lukang689 posted a new question

docs • 13 hours ago

How import .scss only?

I defined some scss variable in a scss file. I don't want to compile them.
By scss document, a scss file's name with the begining of "_", when the file imported, it will not be compiled.But,in nuxt.js, this method will occurr error.
What I should do?

Ic3m4n34

Ic3m4n34 posted a new question

nuxt.js • 14 hours ago

Ho to react to browser zoom?

I want to detect the browser zoom.

I'm using the https://www.npmjs.com/package/detect-zoom package

This works fine in my mounted-hook:

mounted() { if (process.browser) { const zoom = detectZoom.zoom(); console.log(zoom); } },

However I want to update my zoom-const when the user is zooming in. Is there a way to do this since we can not use the computed-property because it doesn't update on the server-side.

Ben1980

Ben1980 posted a new question

example-auth0 • 14 hours ago

Missing dependencies core-js/modules/...

npm run dev show up the following errors:
These dependencies were not found:

  • core-js/modules/es6.regexp.to-string in ./.nuxt/client.js, ./.nuxt/utils.js
  • core-js/modules/es7.promise.finally in ./.nuxt/client.js
  • core-js/modules/es7.symbol.async-iterator in ./.nuxt/client.js, ./.nuxt/middleware.js and 1 other

To install them, you can run: npm install --save core-js/modules/es6.regexp.to-string core-js/modules/es7.promise.finally core-js/modules/es7.symbol.async-iterator

I use node 10.12, npm 6.4.1 on Windows 10 and the original package.json

InvincibleJun

InvincibleJun posted a new question

nuxt.js • 16 hours ago

I want to know the implementation principle of auxtjs asyncData, can give some ideas?

getMatchedComponents returns components, it can't not set any data in it and it do not has options, i find it not a vuecomponent constructor. But in nuxtjs , it will be returns mathed vuecomponent constructor and then set options data will achiece.

i know the answer in source code , please give me some ideas, thank.

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

su1924

su1924 posted a new bug report

nuxt.js • 18 hours ago

bug Repeat the package to style after using CSS module.

Version

v2.2.0

Reproduction link

https://github.com/su1924/nuxt-cssModules

Steps to reproduce

nuxt2.20
After using cssModules(<style module>) and setting extractCSS: true, CSS packages the files, but it will be repeatedly packaged into style. How do you solve this problem?

What is expected ?

Package to file only

What is actually happening?

Packaging to files and pages <style>

BroTrue

BroTrue posted a new question

nuxt-i18n • a day ago

redirectCookieKey is not working.

1) nuxt-i18n version: 5.4.3
2) nuxt.config

modules: [
   ['@nuxtjs/axios'],
   ['@nuxtjs/auth'],
   ['nuxt-i18n', {
     locales: [
         { code: 'en', iso: 'en-US' },
         { code: 'fr', iso: 'fr-FR'}
       ],
     baseUrl: environment.API_URL,
     defaultLocale: 'fr',
     detectBrowserLanguage: {
       useCookie: true,
       cookieKey: 'i18n_redirected'
     },
     useRedirectCookie: true,
     redirectCookieKey: 'i18n_redirected',
     vueI18n: {
       fallbackLocale: 'fr',
       messages: {
         'en': require('./locales/en.json'),
         'fr': require('./locales/fr.json')
       }
     }
   }],

Problem:
useRedirectCookie: true - is not working , also tried with redirectCookieKey: 'i18n_redirected' and redirectCookieKey: 'redirected',
When I switch lang by calling function for example switchLocalePath('en') it doesnt save It to cookies and doesn't use when I enter site next time, (but switching to default). Also strange behaviour when I enter localhost:5876/en/ (with / at the end), It dublicate cookies and We got 2 i18n_redirected.
What I want to achieve:
When first time enter to website it set lang from default option to cookies. When change lang by click on navbar - it change cookies, and when I will enter next time website will use that lang.
Someone can help me? Or maybe im doing something wrong .. =/

BroTrue

BroTrue posted a new question

nuxt-i18n • a day ago

redirectCookieKey

1) nuxt-i18n version: 5.4.3
2) nuxt.config

modules: [
   ['@nuxtjs/axios'],
   ['@nuxtjs/auth'],
   ['nuxt-i18n', {
     locales: [
         { code: 'en', iso: 'en-US' },
         { code: 'fr', iso: 'fr-FR'}
       ],
     baseUrl: environment.API_URL,
     defaultLocale: 'fr',
     detectBrowserLanguage: {
       useCookie: true,
       cookieKey: 'i18n_redirected'
     },
     useRedirectCookie: true,
     redirectCookieKey: 'i18n_redirected',
     vueI18n: {
       fallbackLocale: 'fr',
       messages: {
         'en': require('./locales/en.json'),
         'fr': require('./locales/fr.json')
       }
     }
   }],

Problem:
useRedirectCookie: true - is not working , also tried with redirectCookieKey: 'i18n_redirected' and redirectCookieKey: 'redirected',
When I switch lang by calling function for example switchLocalePath('en') it doesnt save It to cookies and doesn't use when I enter site next time, (but switching to default). Also strange behaviour when I enter localhost:5876/en/ (with / at the end), It dublicate cookies and We got 2 i18n_redirected.
What I want to achieve:
When first time enter to website it set lang from default option to cookies. When change lang by click on navbar - it change cookies, and when I will enter next time website will use that lang.
Someone can help me? Or maybe im doing something wrong .. =/

adrianoresende

adrianoresende posted a new question

router-module • a day ago

How I import router created?

Hello there,

How I import route created with router-module?

import Vue from 'vue'
import VueGtm from 'vue-gtm'
import VueRouter from 'vue-router'
const router = new VueRouter() //new router but is wrong, the correct is getting VueRouter created.
const isProduction = process.env.NODE_ENV !== 'development'

Vue.use(VueGtm, {
  id: 'GTM-XXXXXXX',
  enabled: isProduction,
  vueRouter: router,
  debug: true,
});
emerg

emerg posted a new question

analytics-module • a day ago

E-Commerce tracking not registering in GA Dashboard.

I am having an issue getting e-commerce tracking data to actually register and display on the GA dashboard.
I am running a laravel/vue/nuxt app in a vagrant virtual machine on my local computer. Regular analytics data, such as page views, etc is registering and displaying in the GA dashboard just fine, as are "real time" metrics, so I know that my localhost environment is successfully communicating to googles servers and there's no network connectivity issues. The GA e-commerce script is successfully loading into the site, and events seem to fire off correctly, and I'm not seeing any issues when I use the official GA Debugger browser extension for chrome. Initially, I thought perhaps that it was the google analytics delay time that might have been preventing any data from registering in the dashboard immediately, so I waited a day or so, but I'm still getting this screen when I view the e-commerce dashboard in analytics.
Screen Shot 2018-10-22 at 1.28.07 PM.png

This is what the implementation code looks like in my nuxt.config file:
Screen Shot 2018-10-22 at 1.27.19 PM.png

This is my network tab in the developer console showing that both analytics and e-commerce scripts are loading into the site:
Screen Shot 2018-10-22 at 1.30.38 PM.png

This is the code in my vue template which is calling the GA e-commerce functions.
Screen Shot 2018-10-22 at 1.29.10 PM.png

This is what the GA Debugger is logging in the console:
Screen Shot 2018-10-22 at 1.39.07 PM.png

Everything seems to be working fine, but for some reason I am still getting the "This report requires e-commerce tracking to be set up for this view" issue in the GA dashboard, so I'm not able to see any actual data showing up in the dashboard.

This is my first time using vue/nuxt/analytics-module, so I think there might be a slight mishap on my end. Any help/insight would be greatly appreciated.

Thank you!

sebmor

sebmor posted a new question

pwa-module • a day ago

Splash screen on iOS

I noticed that @nuxt/pwa only adds something like this

<link data-n-head="true" rel="apple-touch-startup-image" href="/_nuxt/icons/icon_512.884ah64198A.png">

After some investigation why the splash screen didn't show up I came across this:
https://medium.com/appscope/adding-custom-ios-splash-screens-to-your-progressive-web-app-41a9b18bdca3
and this
https://medium.com/@applification/progressive-web-app-splash-screens-80340b45d210

They explain that you need a splash screen per resolution.

<link rel="apple-touch-startup-image" href="images/splash/launch-640x1136.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="images/splash/launch-750x1294.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="images/splash/launch-1242x2148.png" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="images/splash/launch-1125x2436.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="images/splash/launch-1536x2048.png" media="(min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="images/splash/launch-1668x2224.png" media="(min-device-width: 834px) and (max-device-width: 834px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="images/splash/launch-2048x2732.png" media="(min-device-width: 1024px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)">

Is this maybe something we could integrate in @nuxt/pwa as well?

jimpsson

jimpsson posted a new question

nuxt-i18n • a day ago

How to make lang switcher reactive?

I am trying to make language reactive, i would like it to update languages on my page when chaining it.

In my navbar I use:

<nuxt-link :to="switchLocalePath('en')" class="navbar-item">English</nuxt-link>
<nuxt-link :to="switchLocalePath('sv')" class="navbar-item">Svenska</nuxt-link>
``

From my `nuxt.config.js`: 
[
  'nuxt-i18n',
  {
    detectBrowserLanguage: true,
    locales: [
      {
        code: 'sv',
        iso: 'sv-SE',
        name: 'Svenska',
        file: 'sv-SE.js'
      },
      {
        code: 'en',
        iso: 'en-US',
        name: 'English',
        file: 'en-US.js'
      }
    ],
    lazy: true,
    langDir: 'lang/',
    seo: true,
    defaultLocale: 'sv',
    vueI18n: {
      fallbackLocale: 'sv'
      /*
      messages: {
        en: {
        },
        sv: {
        }
      }
      */
    }
  }
],

```

I have tested mapping the state of i18n.locale to a page component and it will not react or update until i manually update the page.

I guess the problem have to do with some middleware or such that I would need to implement, but I have tried many things and cannot get it to work, anyone?

adi-zz

adi-zz posted a new bug report

create-nuxt-app • a day ago

bug Build with vuetify and css extraction

Version

v2.1.1

Reproduction link

n/a

Steps to reproduce

  1. npx create-nuxt-app test (accept all default expect UI framework, which should be vuetify)
  2. enable css extraction (add extractCSS: true, in nuxt.config.js#build
  3. npm run build

What is expected ?

The build should work.

What is actually happening?

Build fails with TypeError: Cannot read property 'search' of undefined

Additional comments?

The build would work if I edit node_modules/vuetify/src/stylus/components/_time-picker-clock.styl#54, and use border-color: black instead of border-color: inherit.

iamwwc

iamwwc posted a new question

nuxt.js • a day ago

How to use plugin only in server side?

I have a plugin which will inject some variables to store. But it's a node modules and call some nodejs special API.

I found a config in official docs

ssr: Boolean (default to true) If false, the file will be included only on the client-side.

But it use for client side only

Here is my plugins codes

var Hexo = require("hexo")

export default ({app, store}) => {
  var hexo = new Hexo(process.cwd() + '/hexo',{})

  hexo.load().then(function(){
  var posts = hexo.locals.get("posts")
  var pages = hexo.locals.get("pages")
  var categories = hexo.locals.get("categories")
  var tags = hexo.locals.get("tags")
  store.$commit("init",[posts,pages,categories,tags])
})
}

When I run

npm run dev

console show

These dependencies were not found:

* child_process in ./node_modules/hexo-util/node_modules/cross-spawn/index.js
* fs in ./node_modules/graceful-fs/graceful-fs.js, ./node_modules/graceful-fs/fs.js and 19 others
* module in ./node_modules/hexo/lib/hexo/index.js

I have try install these modules, but in their modules folder, there are only have package.json, don't have *.js files