Vue Templates Logo Vue Templates
Play Vue Webpack screenshot

Play Vue Webpack

Author Avatar Theme by Gbogard
Updated: 28 Aug 2017
47 Stars

Play Framework (Scala) + Vue.js + Webpack boilerplate

Github

Overview

The Play Framework + Vue.js starter boilerplate is an excellent tool for developers looking to create modern web applications. This combination of the Play Framework with Vue.js (v2) provides a solid foundation for building robust front-end interfaces while ensuring a smooth development experience with hot reloading capabilities. By utilizing Webpack for module loading and serving, this starter project streamlines the process and optimizes performance for production environments.

With built-in support for SASS and the latest Bootstrap framework, this boilerplate offers flexibility right out of the box. Whether you want to customize the styling or replace Bootstrap entirely, the structure allows for easy integration of different front-end libraries as your project evolves.

Features

  • Hot Reloading: Utilizes Webpack-dev-server for an efficient development experience, allowing changes to be reflected in real time without requiring a full page refresh.
  • Production-Ready: In production mode, it enables long-term caching with unique hashes for CSS and JS files, minimizing issues with old builds lingering in browsers.
  • Optimized Bundles: Produces minified and gzip-compressed CSS and JS bundles, ensuring fast load times and efficient delivery of resources.
  • SASS Support: Comes with SASS built-in, letting you easily manage stylesheets and take advantage of its features for better organization.
  • Bootstrap 4 Integration: Includes Bootstrap 4 by default to help kickstart UI development, with the option to remove or replace it as needed.
  • Seamless Setup: Quick and straightforward installation process, allowing developers to hit the ground running by just downloading the project and launching it.
  • Customizable Webpack Configuration: Provides the ability to change the Webpack-dev-server port and other configurations through a dedicated config file, ensuring flexibility in development environments.
  • Well-Structured File Organization: Clear structure with dedicated folders for front-end code, SASS styles, and Vue components, promoting maintainability and ease of navigation.