Adding data to Vue with Pug: A comprehensive guide

Question

Adding data to Vue with Pug: A comprehensive guide

Is there a way to localize a component using vue-loader with single-file components and a .pug template?

Here's an example:

<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 do I implement string localization or pass the "test" variable?

I've searched online and through the documentation of loaders like pug-loader, pug-html-loader, and vue-loader, but haven't found a clear solution (besides "It should work, but it doesn't).

I'm aware of connecting templates with Vue instances, but is that the ideal way to handle localization?

My setup includes webpack 3.8.1, vue-loader, and .vue files.

javascript webpack vue.js pug

Answer 1

Answer №1

After much struggle, I finally discovered the simple solution to this issue. The key is to include the following code snippet in your webpack configuration file. If you are working with vue-cli, make sure to add this to your vue.config.js:

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

Once you have made this adjustment, you can now execute the following:

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

Answer 2

After much struggle, I finally discovered the simple solution to this issue. The key is to include the following code snippet in your webpack configuration file. If you are working with vue-cli, make sure to add this to your vue.config.js:

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

Once you have made this adjustment, you can now execute the following:

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

Adding data to Vue with Pug: A comprehensive guide

Answer №1

Similar questions

Mobile page sliding mechanism

Changing images in vuejs

React.js - Add a new row div when reaching a limit of X items to keep the layout

In Node.js, the mongodb+srv URI does not support including a port number

Calculate the overall cost from an array of information using Vue.js and Laravel

How can I ensure my AngularJS Controller variable is accessible across all page contexts?

Is it possible for the filter with the new date() function to accept formats other than yyyy-mm-dd?

Tips on showcasing array elements within a table's tbody section and including several values within the same array

What is the best way to create a table by selecting a number at random from a shuffled array of 16 numbers and then incorporating it into the HTML code

Is there a way to load all movies in advance when none of the tags are selected?

A single variable yields two distinct arrays

Acquire a JSON response from a web address by utilizing JavaScript

What could be causing the error "insertOne is not a valid function" in my MongoDB database?

Add a new key-value pair to each object in an array, with the value generated by making a request using axios.get

Are there any ways to bring visual attention to a GoDaddy template's SEND button using HTML or JS when the original code is unavailable?

What is the solution for the error message "TypeError: app.use() is seeking a middleware function"?

There is a lack of communication between the tomcat application and the database

The Element Datepicker incorrectly displays "yesterday" as an active option instead of disabled when the timezone is set to +14

How can I transfer request headers from Express to index.js in React?

"The text() or json() methods in Javascript's fetch function never seem to resolve, leaving the operation in a perpetual