Passing pug options is not working

[michaelalhilly]

Hi, I am unable to pass global_data to pug using options in Vue CLI latest.

Additionally, adding the following config.module settings removes the same global_data from the definePlugin which I'm setting setting first.

Also commenting out the entire config.module section will also remove the definePlugin variable. I have to completely remove that section to at least get the variable into JS files.

Am I doing something wrong here?

 chainWebpack: (config) => {
    // Creates global variable for JS files.

    config.plugin("define").tap((args) => {
      args[0] = {
        ...args[0],
        pop: JSON.stringify(global_data),
      }
      return args
    })

    config.module
      .rule("pug")
      .test(/\.pug$/)

      // Vue components <template lang="pug">

      .oneOf("vue-loader")
      .resourceQuery(/^\?vue/)
      .use("pug-plain")
      .loader("pug-plain-loader")
      .tap((_) => Object.assign({}, { pop: global_data }))
      .end()
      .end()

      // Pug files

      .oneOf("raw-pug-files")
      .use("pug-raw")
      .loader("raw-loader")
      .end()
      .use("pug-plain")
      .loader("pug-plain-loader")
      .tap((_) => Object.assign({}, { pop: global_data }))
      .end()
      .end()
  },

[michaelalhilly]

Just a little more context here. The team working on the stylus-loader module, which is also used by Vue CLI have identified the same issue with theirs. They're planning on releasing a fix this week, 229.

These globals are important as they provide a simple way to share data across all files including JS, Pug, and Stylus.

Your help on this would be appreciated.

[michaelalhilly]

This is not an issue. This module exposes a data option which is used to pass in a variable. If anyone else encounters this you may find this useful:

    config.module
      .rule("pug")

      // Adds global to vue files.

      .oneOf("pug-vue")
      .use("pug-plain-loader")
      .loader("pug-plain-loader")
      .tap((args) => {
        return {
          data: global_data,
        }
      })
      .end()
      .end()

      // Adds global to Pug templates.

      .oneOf("pug-template")
      .use("pug-plain-loader")
      .loader("pug-plain-loader")
      .tap((args) => {
        return {
          data: global_data,
        }
      })
      .end()
      .end()