Modal templates with Pug, SCSS, and Vue.js

Vuejs Modal List

Explore the code of this pen, which displays various modal templates created with Pug, SCSS, & Vue.js. You can choose 7 different devices, each with its own display size, and pick from Question, Touch ID/Fingerprint, Success, Error, & Misc modals.

Pug.js otherwise known as Jade is a high performance template engine heavily influenced by Haml and implemented with JavaScript for Node.js and browsers.

The list of devices available for preview:

The templates for modals split into 5 categories, pick one to see it on the display of your selected device.

Question Modals

  • Sign Out
  • Cancel Writing Review
  • Cancel Autoship
  • Delete Address
  • Delete Payment Method

Touch ID/Fingerprint

  • Use Touch ID
  • Enable Touch ID
  • Use Fingerprint
  • Enable Fingerprint
  • Scan Fingerprint
  • Scanning Fingerprint Error

Success Modals

  • Autoship - Ship Now
  • Frequency Updated
  • Review Submitted
  • NPS Submitted

Error Modals

  • Incomplete Image Upload
  • No Photo Access

Misc

  • Call Chewy
  • Reset Password
  • Autoship Order Processing

Vuejs Modal List

A pen by Oscar Waczynski.