Activities

Drodevbar

Drodevbar posted a new question

modules •

[@nuxtjs/google-tag-manager] <noscript> tag appends to <head> instead of <body>

I am currently using @nuxt-js/google-tag-manager in version 2.3.1. The source code comments say that <noscript> fallback will be appended right after <body> tag, but actually it is appended somewhere inside <head></head> tags. Is this behaviour intended?

Demo: https://codesandbox.io/s/sad-water-ci9xt

monodyle

monodyle posted a new question

modules •

@nuxtjs/markdownit plugin markdown-it-anchor log error

markdownit version: 1.2.7

I've tried to add markdown-it-anchor plugin following markdown-it-attrs and markdown-it-div, but console throw back an error:

error TypeError: plugin.apply is not a function
    at MarkdownIt.push../node_modules/markdown-it/lib/index.js.MarkdownIt.use (vendors.app.js:71757)
    at app.js:2459
    at _callee2$ (app.js:2330)
    at tryCatch (commons.app.js:4525)
    at Generator.invoke [as _invoke] (commons.app.js:4751)
    at Generator.prototype.<computed> [as next] (commons.app.js:4577)
    at asyncGeneratorStep (commons.app.js:31)
    at _next (commons.app.js:53)

nuxt.config.js

  /*
   ** Nuxt.js modules
   */
  modules: [
    '@nuxtjs/markdownit'
  ],
  markdownit: {
    injected: true,
    preset: 'default',
    html: true,
    linkify: true,
    breaks: true,
    use: [
      'markdown-it-div',
      'markdown-it-attrs',
      'markdown-it-anchor',
    ],
    highlight: (str, lang) => {
      const hljs = require('highlight.js');
      if (lang && hljs.getLanguage(lang)) {
        try {
          return '<pre class="hljs"><code>' +
                  hljs.highlight(lang, str, true).value +
                  '</code></pre>';
        // eslint-disable-next-line no-empty
        } catch (__) {}
      }
      return '<pre class="hljs"><code>' +  hljs.highlight('plaintext', str, true).value + '</code></pre>';
    },
  },
memic84

memic84 posted a new question

modules •

[Google Tag Manager] possible to load the vars async

I am using runtime vars for my project, where the vars get loaded on nuxt start.
The Google Tag Manager module won't build the module, if there is no ID set.
The problem is that i don't have any .env files when the build is occurring, but only when the deployments starts.

Is it possible to load the vars async, of make the ID optional during the build?
I want to be able to use the module in universal mode (ssr), with runtime vars.

LuXDAmore

LuXDAmore posted a new bug report

modules •

bug @nuxt/browserconfig - Change the static dir

Version

v2.10.2

Reproduction link

https://github.com/nuxt-community/modules/blob/master/packages/browserconfig/index.js

Steps to reproduce

path.resolve(this.options.srcDir, 'static', browserconfigFileName) and content: '/' + browserconfigFileName, these paths should be taken from the Dir property.

What is expected ?

Put the file (and the path) in the right directory.

What is actually happening?

Always put the file in the /static folder.

nachogarcia

nachogarcia posted a new bug report

modules •

bug Google Tag Manager needs Jquery

Version

latest

Steps to reproduce

Install the module, add the ID and start the app.

What is expected ?

The module works properly

What is actually happening?

It breaks because it needs Jquery

VM9248:1 Uncaught ReferenceError: jQuery is not defined
    at sender (<anonymous>:1:37)
    at <anonymous>:1:316
    at gtm.js?id=GTM-******&l=dataLayer:4683
    at c (gtm.js?id=GTM-******&l=dataLayer:4685)
    at Ab (gtm.js?id=GTM-******&l=dataLayer:4487)
    at e (gtm.js?id=GTM-******&l=dataLayer:4531)
    at gtm.js?id=GTM-******&l=dataLayer:4476
    at Array.<anonymous> (gtm.js?id=GTM-******&l=dataLayer:4532)
    at Object.bg (gtm.js?id=GTM-******&l=dataLayer:4531)
    at Oe (gtm.js?id=GTM-******&l=dataLayer:4532)

Looks like GTM needs jQuery to work. Maybe we should put it as a peer dependency.

Additional comments?

I'm also using https://github.com/nuxt-community/analytics-module and it works flawlessly.

Panksi

Panksi posted a new question

modules •

Nuxtjs/toast: How to pass message to globally configured toast module

How to pass message to globally configured toast module?

In my nuxt file I have:
modules: [ // Doc: https://axios.nuxtjs.org/usage '@nuxtjs/axios', '@nuxtjs/toast', '@nuxtjs/eslint-module' ], toast: { position: 'top-right', register: [ // Register custom toasts { name: 'my_error', options: { type: 'error', theme: 'bubble', duration: '7000' } } ] },

and I tried passing the message with:

updateApplication(fields) { ApplicationService.updateApplication(this.application.app_id, fields) .catch((e) => this.$toast.global.my_error(e)) },

what am I missing here?

memic84

memic84 posted a new question

modules •

Google Tag Manager vars on runtime

We are using the universal mode, import the env vars on runtime. Therefore we don't use any baked in vars during the build.
It seems that when the GTM module gets baked in, during the build and that's not possible to use runtime vars.

Is there a way, of using runtime vars with the module? I did see in the code, that if GTM_ID is not set, the module won't be inserted.

9137

9137 posted a new question

modules •

How do I override GTM event object for page tracking?

Any idea how do I supply the to.gtm value passed in the line linked below? I tried modifying the to object by hooking onto beforeRouteEnter in a component but the value doesn't seem to get through.

https://github.com/nuxt-community/modules/blob/24427eb4dce4e516a68e6523297d3375a024df0b/packages/google-tag-manager/plugin.js#L24

shuyanzi

shuyanzi posted a new question

modules •

query参数有什么用?

what's the following params means?

pageTracking: false,
pageViewEventName: 'nuxtRoute',
respectDoNotTrack: false,
query: {
// query params…
gtmauth: '…', gtmpreview: '…',
gtmcookieswin: '…'
},

Jones-S

Jones-S resolved the question #c170

modules •

Google Tag Manager – Track only with Opt-In

Indeed it was because I had to use actual cookies.
Then it should work.
Also it was necessary to push an event manually which the module normally does on each routechange. (I just trigger it as soon as the user opts-in)

Jones-S

Jones-S posted a new question

modules •

Google Tag Manager – Track only with Opt-In

I want to only track page views when the user opts-in.
I have an opt-in button that sets a localStorage cookie cookie:accepted to true.

Now I want to use my trigger nuxtRoute only to be triggered if that cookie is set to true.

So my trigger has this rule:
Screenshot 2019-10-09 at 14 55 29

Where the referenced variable looks like this:
Screenshot 2019-10-09 at 14 58 43

But still my nuxtRoute trigger appears in the debug bar all the time.
Screenshot 2019-10-09 at 15 00 36

Is this because I use localStorage instead of a cookie?
Or is this the wrong approach to handle this?

I would be really glad if somebody could elaborate a bit how this module is actually used…

Thank you in advance.

AlexZd

AlexZd posted a new question

modules •

Brackets rendering does not work

When I'm trying to render MD as following:

<div class="md" v-html="$md.render('Hello World! ~~olo~~ **test**')">
</div>

It is working fine, but my eslint is complaining about XSS attack, I know I can add command to ignore but not sure that it is proper way. So i tried to do like:

<div class="md">
   {{ $md.render("Hello World! ~~olo~~ **test**") }}
</div>

But in this case it is showing just html string:

<p>Hello World! <s>olo</s> <strong>test</strong></p>

My config:

markdownit: {
    linkify: true,
    breaks: true,
    injected: true
}

Is there way to avoid using v-html and use brackets instead?

Zsavajji

Zsavajji posted a new question

modules •

Tag Manager module - release

Hi!
Are there any plans to update the npm release of the tag-manager module to include the latest pull request?
I'm gonna need that for a project soon :)

Thanks!

sabutai

sabutai posted a new question

modules •

[toast] how use toast in Vuex?

I want to fire up toast after I get an Axios response in vuex actions.
action for example:
deletePage: async (context, payload) => {
await axios
.delete(blah-blah-blah/Page/${payload})
.then((response) => {
if (response.status === 200) {
this.$toast.global.deletePage();
context.commit('deletePage', payload);
}
})
.catch(err => {
console.log(err);
})
.finally();
}
in this case I'm get TypeError: "_this is undefined"

What should I do?

inweid

inweid posted a new question

modules •

webvisor does not work in yandex.metrika

hi!

Subject: https://github.com/nuxt/nuxt.js/issues/6413

Steps to reproduce
include to the project https://github.com/nuxt-community/modules/tree/master/packages/yandex-metrika

What is actually happening?
webvisor is not vorked

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)