WebDevPro #15: Why Choose Vue.js for Frontend Development, Integrating Jest Testing into an Existing Vue 3 Project, Unstyled PrimeVue Meets Bulma CSS
Hi,
Welcome to the _webdevpro! User experience is a core source of revenue generation, and also it plays an essential role in making an app successful. Ensuring strong user interfaces is a must for successful web development. Vue.js is an open-source model–view–viewmodel front end JavaScript framework for building user interfaces and single-page applications.
Today's edition focuses on Vue.js. Architecting Vue.js 3 Enterprise-Ready Web Applications, our recently published book is a guide on how to configure and set up Vue.js 3 and Composition API, and how to build real-world applications with it. We start with community discussions on Why Choose Vue.js for Frontend Development, Integrating Jest Testing into an Existing Vue 3 Project, Unstyled PrimeVue Meets Bulma CSS and answer Why is there Vite.js in Laravel?
We discuss a Architecting Vue.js 3 Enterprise-Ready Web Applications tutorial on Structuring Vue navigation with Vue Router to get you up to speed. Don't miss our repository of curated Vue.js resources to jumpstart your web development journey. We also bring you the latest in Web Dev, with releases from Laravel, Node.js, and Spring to help you keep up to date!
Curious? Read Architecting Vue.js 3 Enterprise-Ready Web Applications now!
We have listened to the _webdevpro readership and we think this is something you have been searching for. If you liked this installment in our new series, fill in our survey below and win a free Packt credit. We're committed to bringing our readers exactly what they want, so help us make the right choices.
Take the Feedback Survey and Get Free Packt Credit!
Thanks,
Apurva Kadam
Editor-in-Chief, Packt
Five Free Days of Packt Books and Videos!
Access thousands of titles covering the latest in tech, programming languages, machine learning, LLMs, and more. Our constantly expanding library provides endless opportunities for professional growth and curious exploration.
Visit our platform, browse, and watch out this space for next announcement to get access to our full catalogue for free.
Vue.js Community Insights
Why Choose Vue.js for Frontend Development - Frontend development is an ever-evolving field with numerous options available to developers. Among the most popular JavaScript frameworks, Vue.js has quickly emerged as a preferred choice for many developers. In this article, we will explore why choosing Vue.js for frontend development is advantageous and the benefits it offers.
Tanstack/ Vue Query - Pagination and Infinite Scroll In Vue JS - Tanstack Query / Vue Query offer a powerful combination for data management in Vue.js applications. This blog post is about an example application that shows how to use Tanstack Query / vue-query in an application to implement paging and infinite query/scrolling.
Integrating Jest Testing into an Existing Vue 3 Project with ViteJs – Have you faced the challenge of integrating the Jest testing framework into an existing Vue3 js project that was built with Vite? This blog post, I aim to provide a step-by-step installation guide that can assist others who may encounter the same challenge.
Your Guide to Implementing Vue Placeholder Loading - Placeholder loading is a technique where a simplified version of the web page is shown while the full content is being loaded. This approach gives users immediate feedback that content is on the way, resulting in a smoother, more engaging experience. But how do we effectively implement placeholder loading in Vue.js applications? Learn more.
Unstyled PrimeVue Meets Bulma CSS - The new unstyled mode of PrimeVue allows integration with various CSS libraries. In this post, we'll try to use Bulma utilities to style the PrimeVue components.
Why is there Vite.js in Laravel? - Web development has witnessed a surge in the popularity of frontend frameworks and build tools. Laravel, one of the most popular PHP frameworks, has also embraced this trend by integrating Vite.js into its ecosystem. This fusion has created a powerful synergy, enabling developers to build modern and efficient web applications. So, let's dive into why Vite.js has found its place in Laravel and why it's an exciting addition to the framework.
Web Development Motivation
"Vue.js is a powerful framework that brings simplicity and flexibility to web development, allowing developers to create delightful user experiences effortlessly."
- Sarah Drasner, Senior Developer Advocate at Microsoft
Food for Thought...
In this quote, Sarah Drasner, a Senior Developer Advocate at Microsoft, praises Vue.js as a robust and user-friendly framework that empowers developers to craft delightful user experiences. She highlights its simplicity and flexibility, which enable developers to create sophisticated web applications without unnecessary complexity.
Vue.js GitHub Resources
Trying to polish your Vue.js skills? Here are some open source Vue.js projects for you to work on!
PageKit - Modular and lightweight CMS built with Symfony components and Vue.js.
npmcharts.com - Compare npm packages and spot download trends.
Koel - A personal music streaming server that works.
Raven Reader - Simple RSS Reader made using atom electron and vue.js.
Gokotta - A simple music player built by electron and vue.
CoPilot - An admin portal based on AdminLTE with vue.js integration.
Retrospectify - A simple tool for doing collaborative retrospectives in agile teams.
jade-press - Cms based on mongodb, nodejs, koa, vue and more.
astralapp - Organize Your GitHub Stars With Ease.
EME - An Elegant Markdown Editor.
Github-explorer - A spa which can help you check your github in a better way.
Hotel - Start your dev servers from your browser and get local domains in seconds.
Surfbird - A Twitter client written with modern web technologies.
Approach0 - A math-aware search engine.
Flox - Self Hosted Movie, Series and Anime Watch List.
JavaScript Guessing Game - A game for identifying JavaScript tools and libraries.
vue-ghpages-blog - A blog based on GitHub pages by Vue.js 2 + Webpack 2.
Vuedo - Blog platform, built with Laravel and Vue.js.
vue-music163 - A Vue.js project for music.
Tell us what you think!
We're always looking for ways to improve, and your feedback is invaluable to us. Would you take a few minutes to share your thoughts about the newsletter? Your responses will help us make the newsletter even better.
Schedule a time that works for you with just two clicks below, chat with us for 15 minutes and receive a free credit in your Packt account!
Fancy a Chat? Schedule an Interview!
Vue.js Tutorial
Structuring Vue navigation with Vue Router
When building an enterprise-ready application, it’s evident that the navigation system will be massive since there will be many navigations, routes, and pages.
This section will show you how to structure Vue Router in your enterprise project properly. To achieve this, we will use the split-by-feature approach to organizing Vue Router so that it’s easy to navigate, as we achieved with Vuex earlier in the chapter.
This approach will create a structure where public and private routes will be separated, and more routes can also be separated individually.
The folder structure
The folder will comprise an index file, a public file, and a private file containing all the routes belonging to each category.
In the root of your src folder, create a router folder and create the following files inside the folder by typing in the following commands one after the other in your terminal:
cd src && mkdir router
touch index.js
mkdir routes && cd routes
touch public.js private.js combine.jsThe current folder structure is pretty straightforward, and we will customize it more as we progress with the book. Here’s what each file will contain:
index.js: This file will contain thebeforeEachlogic and assembling of all the other routespublic.js: This file will contain all the public-facing routes that do not need restrictions, such as the login page, registration page, and so onprivate.js: This file will contain all the private routes used for authenticated users and many restrictions and metadatacombine.js: This file will combine private and public files and make it easy to concatenate it with the main router file
Next, let’s create an index file to contain the setup of our newly created project...read more.
What's Happening in Web Dev?
Laravel
Pest's "Spicy Summer" release – This release promises to bring an array of exciting features that will make it feel like major version without actually being one – it’s Pest v2.9.0 - so it’s just a composer update away from you.
Node.js
Node v18.17.0 (LTS) - Node.js v18.17.0 comes with the latest version of the URL parser, Ada. This update brings significant performance improvements to URL parsing, including enhancements to the url.domainToASCII and url.domainToUnicode functions in node:url.
Spring
Spring Boot 3.1.2 available now - Spring Boot 3.1.2 has been released and is now available from Maven Central. This release includes 60 bug fixes, documentation improvements, and dependency upgrades. Thanks to all those who have contributed with issue reports and pull requests.
See you next week!