Workplaces for digital nomads: the frontend

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
  • WorkOS - The modern identity platform for B2B SaaS
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • frontend

    Frontend part of Workplaces in Cyprus website (by workplacescy)

  • The entry component src/components/Home.vue:

  • vue-google-maps

    Reactive Vue 3 components for Google maps

  • The fawmi/vue-google-maps library, version 0.9.72, is used to display the map. The author broke the map in later versions and did not publish the source code on GitHub (however, these versions are available via npm).

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

    SurveyJS logo
  • vite-plugin-pwa

    Zero-config PWA for Vite

  • PWA is created with vite-pwa/vite-plugin-pwa, and its parameters are set in vite.config.js. In summary, the implementation of PWA was not a project aim, but it did provide good caching of all project components and resulted in a very quick reopening of the site.

  • vite

    Next generation frontend tooling. It's fast!

  • Builds the project with Vite and some magic in vite.config.js to optimise the final code, including CSS and HTML minification and the creation of a lighter version of Sentry.

  • vue-router

    🚦 The official router for Vue 2

  • A simple src/router/index.js router based on vue-router allows you to avoid utilising the store for now (with the current project capabilities) and helps with 404 error handling.

  • Sentry

    Developer-first error tracking and performance monitoring

  • The same Sentry and Honeybadger.

  • Quasar Framework

    Quasar Framework - Build high-performance VueJS user interfaces in record time

  • Overall, I preferred Vuetify over Quazar and other UI frameworks. However, it has its own drawbacks:

  • WorkOS

    The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.

    WorkOS logo
  • purgecss

    Remove unused CSS

  • Unable to get rid of unused styles. Importing components individually and setting styles in SASS can greatly simplify builds, but several common unused styles can't be deleted using PurgeCSS and analogues due to dynamic class names.

  • MaterialDesign

    ✒7000+ Material Design Icons from the Community

  • Instead of using Vuetify's default font icons, the project imports SVG icons from the mdi/js package at https://materialdesignicons.com. This saves approximately 1 MB in the final package.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts