Activities

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)
ravisingh96

ravisingh96 posted a new question

modules •

Spelling mistake in readme

Incorrect: See component-level caching for mor information.
Correct: See component-level caching for more information.

msacchetti

msacchetti posted a new question

modules •

How to use Markdown-it extensions

How can we use extensions for markdown? ie. https://www.npmjs.com/package/markdown-it-attrs

yariksav

yariksav posted a new question

modules •

Use modules with typescript and eslint

Hello guys!
Example, if I installed and use nuxtjs/vuetify. Vuetify has own index.d.ts file

Then in project typescript modules eslint will emphasizes with "error not found" all vuetify params, such as this.$vuetify.colors etc

This because all nuxt modules generate from string templates

Question: Is it possible to use some module in this package with typescript and eslint|tslint?

bookyo

bookyo posted a new question

modules •

markdownit how to use highlight

i write markdown content.
after $md.render() :

<pre><code class="language-javascript">var a=123
console.log(2323)
println(2323)
</code></pre>

highlight is not work,.
my nuxt.config.js:

markdownit: {
    breaks: true,
    linkify: true,
    injected: true,
    langPrefix: "language-"
  },
teleyinex

teleyinex posted a new bug report

modules •

bug Vuetify toolbar changes its size when reloading

Version

last

Reproduction link

https://www.npmjs.com/package/@nuxtjs/vuetify

Steps to reproduce

Basically create a project choosing vuetify as the framework. Then, run yarn run dev and wait for the server to start. When it has started reload the page several times, you will see that the toolbar changes its size, bumping.

What is expected ?

The toolbar should not change its size.

What is actually happening?

The toolbar changes its size.

clstudio

clstudio posted a new question

modules •

@nuxt/vuetify with nuxt-i18n: Vuetify translations not showing

Hi, how is it possible to use the built-in vuetify translations (like for datatables) https://vuetifyjs.com/en/framework/internationalization#vue-i18n with nuxt? I'm using @nuxtjs/vuetify and nuxt-i18n, all latest. Vuetify and i18n by itself work perfectly fine.

For instance, I tried the following in nuxt.config:

vueI18n: {
          fallbackLocale: 'en',
          messages: {
            fr: {
              welcome: 'Bienvenue',
              $vuetify: {
                dataIterator: {
                    rowsPerPageText: 'Élements par page:',
                    rowsPerPageAll: 'Tous',
                    pageText: '{0}-{1} de {2}',
                    noResultsText: 'Aucun enregistrement correspondant trouvé',
                    nextPage: 'Page suivante',
                    prevPage: 'Page précédente'
                },
                dataTable: {
                    rowsPerPageText: 'Lignes par page:'
                },
                noDataText: 'Aucune donnée disponible'
              },
brandonpittman

brandonpittman posted a new question

modules •

Expected behavior with .md files as routes doesn't work with markdownit module

<template lang="md> works as expected. The README claims you can use .md files as well, however, pages/hello.md doesn't seem to get converted to a route. Am I oversimplying its usage?</p>

manniL

manniL posted a new feature request

modules •

idea Deprecate optimize-module

What problem does this feature solve?

https://www.npmjs.com/package/@nuxtjs/optimize is obsolete but still normally listed on NPM.

acan13

acan13 posted a new question

modules •

@babel/polyfill and intersection-observer installation errors

I'm trying to simply install the @babel/polyfill and intersection-observer polyfills on my nuxt app and keep running into different bugs. I've looked all over for instructions and answers but can't find anything that's solved.

Steps I followed:

I used npm install to install @babel/polyfill and intersection-observer.

I added module.exports.build.transpile = [ /.(js|vue)$/ ]

I ran npm run dev

Error logs:

Multiple variations of "export 'default' (imported as '_typeof') was not found in '@babel/runtime/helpers/typeof'

Any suggestions on what I've done wrong or what I need to do to implement the @babel/polyfill and intersection-observer polyfills?

bskimball

bskimball fixed the bug report #c128

modules •

bug markdownit not working with nuxt-edge
lvaroqui

lvaroqui posted a new question

modules •

Cannot resolve "@nuxtjs/toast'

Hello,

I'm using Nuxt to create my frontend application in which I would like to add Toast.
However after installing following the documentation :

yarn add vue-toasted
add '@nuxtjs/toast' to modules into the nuxt.config.js file

The server cannot build due to this error :

ERROR  Nuxt error
Error: Cannot resolve "@nuxtjs/toast" from "/front/nuxtjs/toast"

I am running nuxt on a docker container but I already installed depencies succesfully such as bootstrap-vue…

Thanks in advance for your help !

aldarund

aldarund posted a new bug report

modules •

bug Google Tag Manager module break clicking on elements when id not set

Version

2.0.0

Reproduction link

-

Steps to reproduce

When id for GTM undefined/not it break whole app. Specifically click events not working for vuetify buttons.
And there a error in console

[nuxt] Error while initializing app Error: [vue-analytics] Missing the "id" parameter. Add at least one tracking domain ID
    at U (vendors.app.js:22408)
    at R (vendors.app.js:22408)
    at Function.Vue.use (commons.app.js:13930)
    at _callee$ (app.js:3663)
    at tryCatch (commons.app.js:4344)
    at Generator.invoke [as _invoke] (commons.app.js:4582)
    at Generator.prototype.(anonymous function) [as next] (http://localhost:3000/_nuxt/commons.app.js:4396:21)
    at asyncGeneratorStep (commons.app.js:46)
    at _next (commons.app.js:68)
    at commons.app.js:75

I dont really need GTM during E2E tests, and neither want to launch them in dev mode.

What is expected ?

warning in console at most

What is actually happening?

error in console and click

janzheng

janzheng posted a new bug report

modules •

bug Markdownit injected=true option prevents plugins from running

Version

latest

Reproduction link

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

Steps to reproduce

Create a new vue template page with:

<template lang="md">

This is a title{.bold}

</template>

Nuxt config:

markdownit: {
injected: true, // commented out to allow attrs in lang="md" blocks
use: [
'markdown-it-attrs',
],
},

What is expected ?

Expected output:

This is a title

What is actually happening?

Current output when injected is set to true is this:

This is a title{.bold}

But plugins still work when using $md.render, so $md.render("# This is a title{.bold}") still outputs expected output.

If injected is set to false, everything works as expected, and the plugins work.

Additional comments?

I dug through the code and found the culprit. In @nuxtjs/markdownit/index.js:

  if (_options.injected === true) {
    delete _options.injected
    // Register plugin
    this.addPlugin({
      src: path.resolve(__dirname, 'plugin.js'),
      fileName: 'markdown-it.js',
      options: _options // <--- this needs an object assignment: Object.assign({}, options, this.options.markdownit)
    })
  }

options: _options needs an object assignment because in plugin.js, you perform a .shift() on options in the for of loop that gets rid of the plugins and prevents them from being rendered properly.