Unlock the Power of Pug.js and Vue.js
What is Pug.js?
Pug.js, formerly known as Jade, is a templating engine designed to render HTML in server-side technologies such as Node.js. This JavaScript templating engine supports writing reusable HTML code and rendering dynamic data.
The Benefits of Using Pug.js with Vue.js
Most backend developers choose to use Pug with Vue.js because it’s easier to implement and read, and doesn’t require a lot of configuration. Any valid HTML is also a valid Vue.js template. Using Pug.js as a preprocessor for your Vue.js templates makes it easier to migrate existing projects to take advantage of Vue’s reactivity features.
Getting Started with Node.js and Pug.js
To set up a Node.js project, we need to initialize a package.json file using the npm init -y command. Next, we’ll create an index.js file, which will be our root Node.js file. We’ll use Express.js for our server, so we need to install Express and import it into our root index.js file.
Installing Express.js and Setting Up Pug.js
To install Express.js, open up your terminal and type npm i express –save. To set up Pug as your templating engine, first install it by running npm install pug. After installing Pug, we need to set it as the default Express templating engine and point to a directory where all our templates will be defined.
Using Pug with Vue.js
To set up Vue.js in our Pug template, we need to install and set up webpack. Webpack is a module bundler that bundles JavaScript files for use in a browser. We’ll also need to install some other packages to help bootstrap Vue.js, including vue-loader, vue-loader-plugin, vue-template-compiler, and css-loader.
Configuring Webpack and Babel
Next, we have to install babel, a toolchain that converts ECMAScript 2015+ code into a backward-compatible version of JavaScript. We’ll start by installing babel-watch using npm and then installing babel-core and babel-loader as a development dependency.
Creating a Vue.js Component
Let’s create a client directory where we’ll write our Vue.js codes. Inside the directory, create a home.js file and add a simple Vue.js setup. Once the template is mounted, the logSomething method is called, which is defined in the methods object.
Including Vue.js in Our Pug File
To include this in our Pug file, we’ll have to add some webpack configs. Let’s create a webpack.config.js file, import webpack, and write some configs for Vue.js. We’ll start by importing webpack, path, and VueLoaderPlugin, and then define our entry file and output.
Bootstrapping Our Webpack Configuration
To bootstrap this webpack configuration, we need to add some scripts in our package.json file to bootstrap it. The client:build-dev command will start Bootstrap and watch our files for any changes.
Running Our Application
To start the application, run npm run dev on your terminal. Now we can modify our home.pug file to include our Vue.js component. If we run npm run dev on our terminal, it creates a home.bundle.js file inside our public directory, which is our transcompiled code.
Monitoring and Tracking Vue Mutations
Debugging Vue.js applications can be difficult, especially when there are dozens, if not hundreds of mutations during a user session. If you’re interested in monitoring and tracking Vue mutations for all of your users in production, try LogRocket. LogRocket is like a DVR for web and mobile apps, recording literally everything that happens in your Vue apps.