Best of Vue.js — 2024

  1. 1
    Article
    Avatar of communityCommunity Picks·2y

    Patterns For JavaScript Frontend Applications

    Patterns are crucial in managing the complexity of JavaScript frontend applications, much like they were in desktop and enterprise applications. By drawing on architectural patterns like MVVM, CQRS, and Flux, developers can better manage the state and interactions within their applications. Frameworks like Angular, React, and Vue help streamline these processes through structured state-management techniques. Understanding these patterns allows for sustainable and maintainable application development.

  2. 2
    Article
    Avatar of game_developersGame Developers·1y

    my new portfolio as a full stack developer

    After gaining experience in web and backend development, the author expanded their skills to include ElectronJS, CapacitorJS, and Docker to create and deploy cross-platform applications. Using inspiration from designer Yanka Darelova, the author built an application with Vue 3 Composition APIs, TypeScript, and Sass/SCSS, adding an ExpressJs backend and Mongo database. The app is secure, utilizing Nginx for load balancing and SSL encryption, and is available for exploration at baderidris.com.

  3. 3
    Article
    Avatar of communityCommunity Picks·2y

    How to reduce unused JavaScript in your code?

    Reducing unused JavaScript is crucial for optimizing modern websites. This guide covers techniques like code splitting, tree shaking, minifying JavaScript, loading scripts asynchronously, dynamic imports, and lazy loading to help improve web performance by cutting down on unnecessary code.

  4. 4
    Article
    Avatar of devtoDEV·2y

    What is the ideal Tech stack to build a website in 2024? 👨‍💻

    The post discusses the author's preferred tech stack for building a website in 2024, including the use of Typescript, Reactjs or Vuejs, Postgres, and Redis. It mentions the pros and cons of these technologies and acknowledges that not all organizations are using frameworks.

  5. 5
    Article
    Avatar of devsquadDev Squad·2y

    Check out my new portfolio website. Powered by Vue and Nuxt 💚

    Check out my newly launched portfolio website, created in collaboration with a professional designer for enhanced UX/UI and branding. It uses Nuxt for the front end, integrates Storyblok as the CMS, and is deployed on Netlify. The project has also received honorable mentions on Awwwards and CSS Design Award.

  6. 6
    Article
    Avatar of devtoDEV·2y

    Hidden cost of frontend frameworks

    Modern frontend frameworks like React, Svelte, and Vue offer impressive engineering feats, but they come with hidden costs. Developers often end up managing numerous dependencies, which can make projects complex and difficult to maintain over time. Additionally, the rapid evolution of these frameworks can lead to frequent updates and increased technical debt. It's important to choose the right tool for the job, avoid unnecessary complexity, and focus on long-term developer experience.

  7. 7
    Article
    Avatar of logrocketLogRocket·2y

    Building UIs with Franken UI, a Shadcn alternative

    Franken UI is an open-source library offering pre-built UI components with an HTML-first approach. It is framework-agnostic, ensuring seamless integration with JavaScript frameworks like Vue, React, or Svelte. Compatible with UIkit 3 and Tailwind CSS, it allows for extensive customization through CSS variables and utility classes. Key features include dark mode, theming, hooks, and over 70 reusable components. Despite being relatively new, Franken UI is gaining traction among developers for its flexibility and ease of use.

  8. 8
    Article
    Avatar of devtoDEV·2y

    Things that I like better in Vue than in React

    Vue has several features that stand out against React, including a more interactive installation process, an intuitive reactivity system, single-file components for better organization, and a more readable approach to conditional rendering. Vue also offers computed properties for handling complex logic and a streamlined state management solution with Pinia.

  9. 9
    Article
    Avatar of communityCommunity Picks·2y

    Write components once, run everywhere.

    Code examples demonstrate how to write components that can run natively in multiple frameworks.

  10. 10
    Article
    Avatar of logrocketLogRocket·2y

    How to build scalable micro-frontends with Vike and Vite

    Micro-frontends allow large web applications to be split into manageable, independently scalable parts using different frameworks and tools. Vite's fast build times make it ideal for this architecture, especially with the addition of Vike for server-side rendering (SSR) and static site generation (SSG). This tutorial covers how to use Vike and vite-plugin-federation to build scalable micro-frontends, using Vike as the host and a Vite+Vue project for shared components.

  11. 11
    Article
    Avatar of devtoDEV·2y

    Headless UI - a great components library for Vue & React

    Headless UI is an unstyled and fully accessible UI component library that integrates beautifully with Tailwind CSS. It allows developers to accelerate development speed and avoid the need for workarounds when styling components. Headless UI can be used with both Vue and React.

  12. 12
    Article
    Avatar of logrocketLogRocket·2y

    Optimizing rendering in Vue

    Learn how to optimize rendering in Vue.js by understanding rendering basics, using directives like v-once and v-memo, optimizing lists and conditional content with v-for, v-if, and v-show, and implementing component-level strategies like lazy loading and effective component structuring.

  13. 13
    Article
    Avatar of communityCommunity Picks·2y

    Tailwind Toolbox

    Explore a collection of open-source starter templates, components, and tools designed to kickstart your Tailwind CSS projects. Discover beautifully designed landing pages, dashboards, and dark mode layouts built with Tailwind CSS, React, and Vue.js. Enhance your development process with hundreds of customizable UI components, a comprehensive design system boilerplate, and visual builders like Windframe and Polypane.

  14. 14
    Article
    Avatar of traversymediaTraversy Media·2y

    Vue.js Crash Course 2024

    This 3-hour crash course provides a comprehensive introduction to Vue 3, covering fundamentals like the options and composition API, directives, ref and reactive variables, state management, props, and more. The course includes a hands-on project building a job listing site from scratch.

  15. 15
    Article
    Avatar of devtoDEV·2y

    How to Write Clean Vue Components

    This post introduces the Functional Core, Imperative Shell pattern in Vue components, which separates the business logic from the framework-specific code. This pattern enhances testability and maintainability, simplifies testing complex components, and allows for framework agnosticism.

  16. 16
    Article
    Avatar of logrocketLogRocket·2y

    Building a customizable dashboard with Dashy

    Learn how to create a customizable dashboard with Dashy, a free and open source self-hosted dashboard app developed with Vue and Node.js. Dashy allows users to aggregate web service links and widgets into one web page, offering features such as multi-language support, authentication, theme customization, and more. Use cases for Dashy include creating dashboards for home lab servers, managing bookmarks, and storing app and admin page URLs. The article also provides a practical guide on installing and using Dashy via Docker.

  17. 17
    Article
    Avatar of devsquadDev Squad·2y

    Top 5 JavaScript Frameworks for 2024

    Stay ahead in web development with the top 5 JavaScript frameworks of 2024: React, Angular, Vue.js, Svelte, and Next js. Discover why these frameworks are leading the industry by optimizing for speed, scalability, and user experience. Transform your development game with these powerful tools.

  18. 18
    Article
    Avatar of communityCommunity Picks·2y

    RacingBars

    RacingBars is an open-source, lightweight JavaScript library (~45kb gzipped) for creating bar chart races. It is built on D3.js and supports JavaScript, TypeScript, React, Vue, and Svelte. Users can try a basic chart with default options or experiment with different configurations and a code playground for more customization.

  19. 19
    Article
    Avatar of webtoolsweeklyWeb Tools Weekly·2y

    CSS Tools, JSON, Databases, Vue

    This post highlights various tools spanning CSS, HTML, JSON, databases, and Vue. It includes advanced CSS and HTML browser extensions, useful JavaScript libraries, and tools to simplify database and JSON management. Additionally, it features a collection of Vue tools for creating maps, handling props dynamically, and scaffolding new projects with ease.

  20. 20
    Article
    Avatar of communityCommunity Picks·2y

    An online course that teaches the fundamentals of CSS for React/Vue devs

    Many front-end developers find CSS frustrating due to its implicit nature and lack of immediate feedback for errors. However, understanding the underlying systems and layout algorithms can make CSS more consistent and enjoyable. A new online course aims to expedite this learning process by providing comprehensive, structured lessons on mastering CSS, making it a fun and rewarding experience for developers.

  21. 21
    Article
    Avatar of communityCommunity Picks·2y

    vuejs/awesome-vue: 🎉 A curated list of awesome things related to Vue.js

    A curated list of awesome things related to Vue.js. Resources, projects, UI components, frameworks, utilities, integrations, dev tools, tutorials, articles, jobs, interview questions, resume builder, forums, podcasts, videos, courses, and examples.

  22. 22
    Article
    Avatar of asayerasayer·2y

    Benefits of Modular Design in Front-end Development

    Modular design in front-end development involves dividing a program's functions into small, independent modules, leading to maintainable code, improved collaboration, increased development speed, consistent user interfaces, and enhanced scalability. It focuses on principles like reusability, loose coupling, encapsulation, and single responsibility. Popular frameworks like Angular, React, and Vue support modular designs, and tools like NPM, Rollup, and Webpack facilitate module bundling. Best practices include creating reusable components, structuring an organized codebase, using consistent naming conventions, and maintaining thorough documentation.

  23. 23
    Article
    Avatar of trendyoltechTrendyol Tech·1y

    Web Performance Optimization Techniques

    Fast-loading websites are essential for user experience, search engine ranking, and revenue. Techniques for optimizing web performance include reducing dependencies, dynamic imports, tree shaking, image optimization, async components, and server-side compression. Tools like Google Lighthouse, PageSpeed Insights, and WebPageTest can help assess performance and identify areas for improvement. Effective strategies such as using CDNs, caching, and minimizing bundle sizes contribute to faster load times and enhanced user satisfaction.

  24. 24
    Article
    Avatar of logrocketLogRocket·1y

    Building a real-time chat app using Laravel Reverb and Vue

    The guide covers building a real-time chat application using Laravel Reverb and Vue. It starts by setting up the development environment, including Laravel for the backend and Vue for the frontend. Key components like models, migrations, controllers, and frontend integration are implemented step-by-step. It also explains setting up WebSocket connections using Laravel Reverb for real-time message broadcasting and handling asynchronous tasks with Laravel's queue jobs.

  25. 25
    Article
    Avatar of PrismicPrismic·2y

    Top 10 Vue Component Libraries in 2024

    Vue component libraries can significantly speed up development and improve project quality by offering pre-built, reusable components for building blocks like buttons, forms, and sliders. Among the top 10 Vue component libraries in 2024 are Vuetify, Quasar, PrimeVue, and others, each offering unique features such as Material Design principles, cross-platform development, and rich UI components. Selecting the right library involves considering project needs, compatibility, customization options, documentation, community support, and library performance.

See all Vue.js archives