Pug template button how to#

Learn how to animate your React app with AnimXYZ.

Switch between multiple versions of Node.

Use React's useEffect to optimize your application's performance.

Don't miss a moment with The Replay, a curated newsletter from LogRocket.

Next, create a home.pug file inside the views directory and add this: We’ll use the path module to target the views directory and set it as the root directory for all our templates. Let’s create a views directory where we’ll define all our Pug templates. Notice we required the Node.js path module, which provides utilities for working with file and directory paths. We can modify our index.js file to this: let express = require('express') Īpp.get('/', (req, res) => res.render('home'))

Pug template button install#

To set up Pug as your templating engine, first install it by running npm install pug.Īfter installing Pug, we need to set it as the default Express templating engine and also point to a directory where all our templates will be defined. Now we can access our application on in our browser: This command will display Test running on the terminal, which means the server is running. To run the application, open your terminal and type node index.js. To install Express.js, open up your terminal and type npm i express -``save.Īpp.get('/', (req, res) => res.json())Īpp.listen(3000, () => console.log('Test running')) We’ll use the instance to listen to a port running on 3000. We’ll use Express.js for our server, so we need to install Express, import it into our root index.js file, and create an instance of it. Next, we’ll create an index.js file, which will be our root Node.js file. When setting up a nodejs project, we need to initialize a package.json file to keep track of our application dependencies using the npm init -y command. To follow along with this tutorial, you should have an understanding of JavaScript and Vue.js and experience using a text editor, such as VS Code. Unlike backend developers, most frontend developers find Pug frustrating to write in and maintain because it’s white space-sensitive, which means it uses indentation to determine which tags are nested inside each other. js for templating since it compiles down to HTML. Pug.js is frequently used with backend technologies such as Express. Using Pug.js as a preprocessor for your Vue.js templates makes it much easier to migrate existing projects to take advantage of Vue’s reactivity features. Any valid HTML is also a valid Vue.js template.

Most backend developers choose to use Pug with Vue.js because it’s much easier to implement and read and doesn’t require a whole lot of configuration. Not just for web interfaces, Vue.js is also used both for desktop and mobile app development with the Electron framework. Vue.js is a progressive framework for JavaScript that is used to build web interfaces and single-page applications.

Pug template button code#

Like any JavaScript templating engine, Pug.js supports writing reusable HTML code and rendering dynamic data. Pug.js, formerly known as Jade, is a templating engine designed to render HTML in server-side technologies such as Node.js.

In this Pug.js tutorial, we’ll show you how to integrate Vue.js into a backend application using Pug as a templating engine.įor an introduction to Pug.js, check out “ Getting started with Pug.” What is Pug.js? Pug.js tutorial: A beginner’s guide with examples Wisdom Ekpot Follow A student of Ibom Metropolitan Polytechnic studying computer engineering, Wisdom has been writing JavaScript for two years, focusing on Vue.js, Angular, and Express.js.