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.

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

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??

If I created this bug https://cmty.app/nuxt/create-nuxt-app/issues/c72, why doesn't it appear in https://github.com/nuxt/create-nuxt-app/issues?

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.

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?

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.

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

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.

How to solve Nuxt.js SPA First load white screen ? Here's the screenshot .

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>

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 .. =/

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 .. =/

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,
});

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.

This is what the implementation code looks like in my nuxt.config file:

This is my network tab in the developer console showing that both analytics and e-commerce scripts are loading into the site:

This is the code in my vue template which is calling the GA e-commerce functions.

This is what the GA Debugger is logging in the console:

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!

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?

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?

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.