Activities

jpsc

jpsc posted a new feature request

modules •

idea Critical CSS Module

What problem does this feature solve?

The short version:
Improve First Contentful Paint

The longer version:
No matter how much you optimize your css size (hint: purgeCSS) you will most likely load too much for the screen you are showing.
Critical CSS module would help with optimizing the loading of your styles without blocking the page render.
This link explains clearly the benefits.

What does the proposed changes look like?

We can use either criticalCSS or critical on the module and add a module to nuxt.config (only on production) that would generate the critical inline css and append it to the page.
We can then load the remaning css async. This should only work if extractCSS is active.

VarghaSabee

VarghaSabee posted a new question

modules •

@nuxtjs/google-tag-manager TypeError: The 'request' argument must be string. Received type object

I have this error. I cant add id to google-tag-manager module
Capture

After reinstall the module !Solved!

KO-Good-code

KO-Good-code posted a new question

modules •

Failure to use

I can't find the markdown-it-div module by installing the error message according to your document

the1nikola

the1nikola posted a new question

modules •

Markdown-it: How to avoid parent div duplication and still add .class on all instances?

Hi,
I'm only starting out with vue and nuxt so pardon me if I'm asking something too basic or impossible.
How to avoid parent div duplication and still add an id or class on all instances? (For static site generation)

<section id="hello">
  <p>Hi Tony!</p>
</section>

Following example usage on nuxtjs/markdownit:

  1. using .vue - produces a single <section> parent, but don't know how to avoid writing the dread that is <hello id="hello" /> every time.
  2. using .md - duplicates parent div, result is <div id="hello"><section>....
  3. using $md to render - same as above.

Constraints (?)

I don't want to use scoped styling because I would be targeting p and img elements (and that would be bad I believe). Moreover, I'd like to have those elements navigable with example.com#id. Ofc, p and img are generally styled elsewhere, but I still want to adjust their positions on a per section basis.

markdown-it-attrs doesn't solve my problems because it adds classes to specific children elements and not to the parent section. Likewise with markdownit-container.

I guess what I want is not available from what I see on markdown-it-loader line 35 return '<section>' + html + '</section>\n' and not something like return '<section :attrs>' + html + '</section>\n'


Ideally, I would like a way to say

<template>
  <hello />

<style>
  #hello
    // available both in component and here

with hello.vue being e.g. (since there is no parent el available)

<template lang="md" id="hello">
  Hi {{ name }}!
</template>

or (still great but a bit less clean and less functional)

<template>
  <md id="hello" src='~/path/to/some/MD' />
  // in which md.vue component is e.g. a factory or translator taking the path to .md and importing it for the main file

<style>
  #hello
    // only available in here
    // (though md can possibly be extended with style later)

Thanks!

renovate[bot]

renovate[bot] posted a new question

modules •

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: Cannot find preset's package (@nuxtjs)

incompletude

incompletude posted a new feature request

modules •

idea Font Awesome proper documentation

What problem does this feature solve?

Efficiency when using this package.

What does the proposed changes look like?

https://github.com/nuxt-community/modules/tree/master/packages/font-awesome

Can the following be added to the documentation:

Are additional packages necessary?
Example usage?
Additional configuration?

Thx

incompletude

incompletude posted a new question

modules •

Font Awesome

https://github.com/nuxt-community/modules/tree/master/packages/font-awesome

How can I use this properly? Are additional packages necessary? Can the documentation be more clear?

Youhan

Youhan posted a new question

modules •

[@nuxtjs/localtunnel] Is localtunnel.me down!?

Is localtunnel.me down!?

I run the yarn dev and it keeps reconnecting to localtunnel
I also tried to use it manually

$ lt --port 3000
tunnel server offline: read ECONNRESET, retry 1s
tunnel server offline: read ECONNRESET, retry 1s
tunnel server offline: read ECONNRESET, retry 1s
chiboreache

chiboreache posted a new question

modules •

OpenCV.js module

How it make properly?

I have a working example in Vue environment https://github.com/greenpdx/opencv-vue

so it looks pretty simple, just add npm i opencv.js into your project

and then

import * as cv from 'opencv.js'
Vue.prototype.$cv = cv

so after it we can use $cv globally in our project

but main question — is how to implement it in Nuxt.js ?

syffs

syffs posted a new feature request

modules •

idea google-tag-manager consent opt-out

What problem does this feature solve?

I haven't found any related info or guideline, so this could be only documentation related.

This is needed for european gdpr compliance

What does the proposed changes look like?

allow to disable gtm somehow, or disable it by default, and allow to enable it on opt-in

adamkhan

adamkhan posted a new bug report

modules •

bug @nuxtjs/markdownit not parsing HTML tags

Version

1.2.3

Reproduction link

https://codesandbox.io/s/l780y229q7?fontsize=14

Steps to reproduce

Install @nuxtjs/markdownit, follow the instructions to inject text as laid out in its README, and include some HTML in the markdowned text.

What is expected ?

Markdownit will parse HTML.

What is actually happening?

HTML tags are rendered literalIy, at least, the ones I have in my text, namely span and cite.

adamkhan

adamkhan posted a new question

modules •

delete me

delete me

waghcwb

waghcwb posted a new question

modules •

@nuxtjs/google-tag-manager - Add debug option

It would be nice if we have a option to enable/disable the debug mode instead of turning NODE_ENV to production.

BrenoRRodrigues

BrenoRRodrigues posted a new question

modules •

BootstrapVue Don't load

I create project nuxt using bootstrapvue, but when I'm going to use a bootstrap component, it does not recognize and does not show any error messages, just shows the text written inside the component

nuxt.config.js > modules:

modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
    // Doc: https://bootstrap-vue.js.org/docs/
    'bootstrap-vue/nuxt'
  ],

package.json

"version": "1.0.0",
  "description": "My top-notch Nuxt.js project",
  "author": "Breno R. Rodrigues",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "cross-env": "^5.2.0",
    "nuxt": "^2.4.0",
    "bootstrap-vue": "^2.0.0-rc.11",
    "bootstrap": "^4.1.3",
    "@nuxtjs/axios": "^5.3.6"
  },
  "devDependencies": {
    "nodemon": "^1.18.9"
  }

I make project using Universal option.

When I inspect the page, the bootstrap css tag does not appear.

Anyone have any idea what I can do to fix it?

Thanks

Glutnix

Glutnix posted a new feature request

modules •

idea google-tag-manager does not add noscript to body element.

What problem does this feature solve?

tracking still takes place when page loaded with javascript turned off

What does the proposed changes look like?

Module needs to add this immediately after the <body> open tag

    <!-- Google Tag Manager (noscript) -->
    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-xxxxxxx&gtm_auth=xxxxxxxxxxxx&gtm_preview=xxxx&gtm_cookies_win=x" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <!-- End Google Tag Manager (noscript) -->
IlyaShkurenko

IlyaShkurenko posted a new question

modules •

Not sending any requests to api for GTM id from nuxt.config.js
colsen1991

colsen1991 posted a new bug report

modules •

bug Google Tag Manager loading and installing more than once

Reproduction link

https://www.skogfrua.no/

Steps to reproduce

Install Tag Assistant (TA) and visit the reproduction link (it's a live site in Norwegian, but it shouldn't matter for testing). Use TA to view status of containers being loaded. Navigate on the site and watch the number of installations go up, and TA giving a warning of multiple installations being detected. Every other or so page navigations, as well as reloading the site, bumps this number.

single after page load.jpg
multiple after navigating.jpg

What is expected ?

Google Tag Manager should only be loaded and installed once on page load(?), then run as normal on page navigations.

(?)*) This is my first time using GTA, not too sure about the specifics here. But seeing as the site uses nuxt generate, which loads the first proper HTML file, then runs as an SPA, correct?

What is actually happening?

GTM is fetched twice and the is installed several times over on page navigation and page reloads.

Additional comments?

An unrelated(?) issue is network tab showing GTM js being loaded after on page load and first on the first page navigation, but then nothing. Is this intentional and could it be related? However on consecutive page loads after page navigation number 1, it doesn't fetch it any more, but the number of installations keep going up.

My modules config:

[
    '@nuxtjs/pwa',
    '@nuxtjs/sitemap',
    [
      '@nuxtjs/google-analytics',
      {
        ua: 'UA-107229265-6',
        disabled: isDev || isStaging
      }
    ],
    [
      '@nuxtjs/google-tag-manager',
      {
        id: 'GTM-KSHV228',
        disabled: isDev || isStaging
      }
    ],
    [
      'nuxt-facebook-pixel-module',
      {
        pixelId: '327112147918767',
        disabled: isDev || isStaging
      }
    ]
  ]

Using nuxt generate for publishing and nuxt-link for internal navigation.

Side note: adding the generated script tag from Google to app.html head seems to work as expected (tested locally). Of course this would not give me the opportunity to track page views without custom code, but since I'm using GA module, which works fine for page view tracking, is this a good alternative/temp fix?

It should be mentioned that this is my first time ever installing GTM, so I'm not sure what consequences this might have for the site? I did test pageview, link click and history change tag triggers, and all working fine and only firing once.

Any input, insight etc. is greatly appreciated! Cheers!

sowinski

sowinski posted a new question

modules •

Google Analytics not working in GTM container

Hi,

I successfully added Google Tag Manager to my nuxt project. I added Google Analytics into my Google Tag Manager Container and I can see the first loading of the page in Google Analytics.

BUT!
If I click on a router link (To display a new page) This page is not tracked in Google Analytics.
What can I do?

Thank you

furyscript

furyscript posted a new question

modules •

Question about A La Carte of Vuetify

Is it possible to import single components of Vuetify with A La Carte?

Extarys

Extarys posted a new question

modules •

[CLOSED] Vuetify doesn't work with nuxt, relative module not found

Package: https://github.com/nuxt-community/modules/tree/master/packages/vuetify

I did try with plugins before and then vuetify-loader but nothing seems to work.

I had to upgrade the following package as Vuetify was complaining of insufficient version:

"vue-template-compiler": "^2.5.22",
"vue-server-renderer": "^2.5.22",
"vue": "^2.5.22",

The complete error:

 ERROR  Failed to compile with 1 errors                                                friendly-errors 23:00:08

This relative module was not found:                                                    friendly-errors 23:00:08
                                                                                       friendly-errors 23:00:08
* ../../../src/stylus/components/_grid.styl in ./node_modules/vuetify/lib/components/VGrid/VLayout.js
(node:15312) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'loadResources' of undefined
    at Server.loadResources (/media/test/node_modules/@nuxt/server/dist/server.js:653:26)
    at compiler.hooks.done.tap (/media/test/node_modules/@nuxt/webpack/dist/webpack.js:5089:21)
    at <anonymous>
    at process._tickDomainCallback (internal/process/next_tick.js:229:7)
(node:15312) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)

Dependencies:

  "dependencies": {
    "@babel/plugin-transform-runtime": "^7.2.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.12",
    "@fortawesome/pro-light-svg-icons": "^5.6.3",
    "@fortawesome/pro-solid-svg-icons": "^5.6.3",
    "@fortawesome/vue-fontawesome": "^0.1.5",
    "@nuxtjs/auth": "^4.5.3",
    "@nuxtjs/axios": "^5.3.6",
    "@nuxtjs/moment": "^1.1.0",
    "@nuxtjs/proxy": "^1.3.1",
    "@nuxtjs/vuetify": "^0.5.1",
    "babel-eslint": "^10.0.1",
    "cookie": "^0.3.1",
    "countup": "^1.8.2",
    "cross-env": "^5.2.0",
    "howler": "^2.1.1",
    "iltorb": "^2.4.1",
    "iview": "^3.2.2",
    "js-cookie": "^2.2.0",
    "koa": "^2.6.2",
    "koa-subdomain": "^2.4.0",
    "moment": "^2.23.0",
    "nanoid": "^2.0.1",
    "nodemailer": "^5.1.1",
    "nuxt": "^2.3.4",
    "nuxt-i18n": "^5.5.0",
    "paseto.js": "^0.1.3",
    "pg": "^7.8.0",
    "uuid": "^3.3.2",
    "vue": "^2.5.22",
    "vue-echarts": "^3.1.3",
    "vue-howler": "^0.7.0",
    "vue-loader": "^14.2.2"
  },
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.2.3",
    "@babel/traverse": "^7.2.3",
    "@fortawesome/fontawesome-pro": "^5.6.3",
    "babel-plugin-transform-imports": "^1.5.1",
    "css-loader": "^2.1.0",
    "eslint": "^5.12.0",
    "eslint-config-prettier": "^3.1.0",
    "eslint-config-standard": "^12.0.0",
    "eslint-loader": "^2.1.1",
    "eslint-plugin-html": "^5.0.0",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-node": "^8.0.1",
    "eslint-plugin-prettier": "^3.0.0",
    "eslint-plugin-promise": "^4.0.1",
    "eslint-plugin-security": "^1.4.0",
    "eslint-plugin-standard": "^4.0.0",
    "eslint-plugin-vue": "^4.7.1",
    "node-sass": "^4.11.0",
    "nodemon": "^1.18.9",
    "prettier": "1.14.3",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "v8-profiler": "^5.7.0",
    "vue-server-renderer": "^2.5.22",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.5.22",
    "vuetify-loader": "^1.1.1",
    "webpack": "^4.28.4",
    "webpack-node-externals": "^1.7.2"
  }

nuxt.config.js
There may be some residual lines from all my tries to make Vuetify works with Nuxt

const pkg = require('./package')
const config = require('./server/config')

// TODO find a way to include colors from vuetify

const nodeExternals = require('webpack-node-externals')

module.exports = {
  mode: 'universal',

  /*
  ** Headers of the page
  */
  head: {
    title: pkg.name,
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: pkg.description }
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
  },

  /*
  ** Customize the progress-bar color
  */
  loading: { color: '#00f' },
  /*
  ** Global CSS
  */
  css: [
    // '~/assets/style/app.styl'
    //'@fortawesome/fontawesome-pro/css/all.min.css'
  ],

  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
    // { src: '~plugins/iview', ssr: true },
    // { src: '~/plugins/vuetify.js' },
    { src: '~plugins/echarts', ssr: false },
    { src: '~plugins/fa', ssr: false }
  ],
  /*
  ** Nuxt.js modules
  */
  modules: [
    // Doc: https://github.com/nuxt-community/axios-module#usage
    '@nuxtjs/axios',
    '@nuxtjs/auth',
    '@nuxtjs/vuetify',
    ['@nuxtjs/moment', { locales: ['en-gb', 'fr-ca'], plugin: true }][
      ('nuxt-i18n',
      {
        seo: true,
        detectBrowserLanguage: true,
        locales: [
          {
            code: 'en',
            iso: 'en-US'
          },
          {
            code: 'es',
            iso: 'es-ES'
          },
          {
            code: 'fr',
            iso: 'fr-FR'
          }
        ],
        defaultLocale: 'en',
        parsePages: false, // Disable acorn parsing
      })
    ]
  ],
  /*
  ** Axios module configuration
  */
  axios: {
    // See https://github.com/nuxt-community/axios-module#options
    // proxy: true,
    debug: false
  },

  vuetify: {
    materialIcons: false,
    theme: {
      primary: '#0277bd',
      secondary: '#546e7a',
      accent: '<a href="https://github.com/undefined/undefined/issues/000000" target="_blank">#000000</a>',
      info: '#0D47A1',
      warning: '#ffb300',
      error: '#ff1744',
      success: '#2E7D32'
    },
    treeShake: true
  },

  /*
  ** Build configuration
  */
  build: {
    analyze: true,
    babel: {
      presets: ['@babel/preset-env'],
      plugins: [
        '@babel/plugin-syntax-dynamic-import',
        '@babel/transform-runtime'
      ]
    },

    extractCSS: true,
    filenames: {
      app: ({ isDev }) => (isDev ? '[name].js' : '[chunkhash].js'),
      chunk: ({ isDev }) => (isDev ? '[name].js' : '[chunkhash].js'),
      css: ({ isDev }) => (isDev ? '[name].css' : '[contenthash].css'),
      img: ({ isDev }) => (isDev ? '[path][name].[ext]' : 'img/[hash:7].[ext]'),
      font: ({ isDev }) =>
        isDev ? '[path][name].[ext]' : 'fonts/[hash:7].[ext]',
      video: ({ isDev }) =>
        isDev ? '[path][name].[ext]' : 'videos/[hash:7].[ext]'
    },
    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {
      config.module.rules.push({
        test: /\.scss$/,
        use: ['vue-style-loader', 'css-loader', 'sass-loader']
      })

      // Run ESLint on save
      if (ctx.isDev && ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
      if (ctx.isServer) {
        config.externals = [
          nodeExternals({
            // default value for `whitelist` is
            // [/es6-promise|\.(?!(?:js|json)$).{1,5}$/i]
            whitelist: [
              /es6-promise|\.(?!(?:js|json)$).{1,5}$/i,
              /^vue-echarts/
            ]
          })
        ]
      }
    }
  }
}

I don't have any clue as why this sin't working.
Your help is appreciate.

EDIT

Removing options from vuetify module I get:

(node:19981) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'loadResources' of undefined
    at Server.loadResources (/media/test/node_modules/@nuxt/server/dist/server.js:653:26)
    at compiler.hooks.done.tap (/media/test/node_modules/@nuxt/webpack/dist/webpack.js:5089:21)
    at <anonymous>
    at process._tickDomainCallback (internal/process/next_tick.js:229:7)
(node:19981) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)