CODEWITHSUNDEEP
javascriptwebpackvue.jspug
user7489400
user7489400

Reputation:

Vue + Pug: How to insert locals?

How to localize component using vue-loader for single-file components and .pug template?

Look:

<template lang="pug">

div.container {{ test }}
    div.content
        h1 Proof of concept app
        b Vue.js + TypeScript + Webpack

        div.logos
            img(src="assets/logo-vue.png")
            img(src="assets/logo-ts.png")
            img(src="assets/logo-webpack.png")

        div.description Application is loading, please wait
        div.progress {{ percent }}%


</template>

How can I replace strings with localization, or pass the variable "test"?

I cannot find anything on the Internet and in documentations of these loaders (pug-loader, pug-html-loader, vue-loader, etc.), except "It must work, but it doesn't).

I know about the connection of templates with Vue instance, but it's not a solution, right? An instance shouldn't know about localization, isn't it?

I'm using webpack 3.8.1, vue-loader and .vue files

Upvotes: 1

Views: 1684

Answers (1)

nachocab
nachocab

Reputation: 14394

I struggled with this for a long time, and found that the solution was as simple as adding this in your webpack config. If you're using vue-cli, so put this in your vue.config.js:

module.exports = {
  // ...
  chainWebpack: config => {
    config.module
      .rule('pug')
      .use('pug-plain-loader')
      .loader('pug-plain-loader')
      .options({ data: { require } }); // pass require as a local variable!
  },
  // ...
}

Now you can do:

- const _ = require('lodash')
div
  p=_.whatever('whatever')

Upvotes: 1

Related Questions