grabarzundpartnergrabarzundpartner
128

Gp Vue Boilerplate

screenshot of Gp Vue Boilerplate
nuxt
vue

Grabarz & Partner Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites with vuejs.

GithubDemo

Overview

The Grabarz & Partner Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites with Vue.js.

Features

  • Browserslist support
    • Supports browsers listed as [x] > 1% in DE, [x] Firefox ESR, and [x] IE 11.
  • Image optimization
    • Optimizes jpg, png, and webp images.
  • SVG sprite generator
    • Generates SVG sprite and optimizes it.
  • Breakpoint
    • Global definition of breakpoints that can be accessed in JavaScript and PostCSS.
  • i18n (Internationalization)
    • Global language files and page files by language. Supports Vue block and a exclusive language reference loader ".lang".
  • PWA (Progressive Web App)
    • Embedded module that is configurable by nuxt.config.js.
  • SEO
    • Sitemap generator and robots.txt generator.
  • Babel
    • Embedded browserslist support.
  • PostCSS
    • Embedded browserslist support and various plugins like postcss-preset-env, postcss-normalize, postcss-url, postcss-object-fit-images, etc.
  • Licenses
    • Extracts license information from the build.
  • Linter
    • Includes eslint, stylelint, and branchlint.
  • Versioning
    • Supports semantic release, git release version, npm release version, and changelog generator.
  • Continous integration
    • Supports vulnerability scanner using snyk and greenkeeper.
  • IDE (VSCode)
    • Includes recommended project extensions, custom project settings, and disabled prettier config.
  • Testing
    • Includes components and lazy loading of components using vue-lazy-hydration.

VSCode Editor

It is recommended to use the VSCode Editor. You can download it from here.

OSX

To install on OSX, follow these steps:

  • Install nvm by following the instructions here.
  • Open the workspace by config.code-workspace and install the recommended extensions.

Linux

To install on Linux, follow these steps:

  • Install nvm using the script from here.
  • Open the workspace by config.code-workspace and install the recommended extensions.

Windows

To install on Windows, follow these steps:

  • Install nvm from here.
  • Install the Git client from here.
  • Install Visual C++ 2015 Build Tools from here.
  • Install Rust from here.
  • Restart Windows.
  • Run command prompt as administrator.
  • Run boilerplate in dev-mode or production-build.

Summary

The Grabarz & Partner Boilerplate is a versatile front-end template for building web apps or sites with Vue.js. It offers a wide range of features including support for different browsers, image optimization, SVG sprite generation, internationalization, PWA support, SEO tools, code quality tools like linters, versioning and release management, continuous integration, and IDE integration. It also provides a quickstart guide for installation on different platforms.

nuxt
Nuxt

nuxt.js is a lightweight and flexible JavaScript framework that allows developers to easily build dynamic and reactive user interfaces. Its intuitive syntax, modular architecture, and focus on performance make it a popular choice for modern web development.

vue
Vue

Vue.js is a lightweight and flexible JavaScript framework that allows developers to easily build dynamic and reactive user interfaces. Its intuitive syntax, modular architecture, and focus on performance make it a popular choice for modern web development.

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.

pinia
Pinia

Pinia is the official state management library for Vue.js. It provides a simple and intuitive API with full TypeScript support, devtools integration, and modular design. Pinia replaces Vuex as the recommended state management solution for Vue 3.

postcss
Postcss

PostCSS is a popular open-source tool that enables web developers to transform CSS styles with JavaScript plugins. It allows for efficient processing of CSS styles, from applying vendor prefixes to improving browser compatibility, ultimately resulting in cleaner, faster, and more maintainable code.

Pwa

A Progressive Web App (PWA) is a type of web application that uses modern web technologies to provide a native app-like experience to users, including offline functionality, push notifications, and device hardware access. PWAs can be installed on a user's home screen and launched like a traditional app, but do not require a separate app store listing or download.

Storybook

Storybook is a tool for developing and testing UI components in isolation. It provides a sandbox environment where you can experiment with different props and states to see how your component responds.

Stylelint

Stylelint is a modern linter for CSS that helps you avoid errors and enforce consistent styling conventions. It provides rules for detecting errors and warnings, and can be configured to match your specific project's requirements.