Best of Vue.js โ€” September 2024

  1. 1
    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.

  2. 2
    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.

  3. 3
    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.

  4. 4
    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.

  5. 5
    Article
    Avatar of communityCommunity Picksยท2y

    Creating a SaaS app with Vue and Nuxt

    Learn how to create a SaaS platform similar to LinkedIn using Vue, Nuxt, and Prisma. This guide walks you through setting up the project, scaffolding it with Nuxt, connecting to a PostgreSQL database via Vercel, and preparing the user schema.

  6. 6
    Article
    Avatar of itnextITNEXTยท2y

    You are using Pinia wrong!

    Switching from Vuex to Pinia, the author encountered issues using the setup stores syntax, particularly with unit testing. While the logger worked, the spy function failed, uncovering the complexity and different internal structure of setup stores. Workarounds are necessary to align tests, and using `store.$onAction` for side effects adds further complications.

  7. 7
    Article
    Avatar of weeklyvuenewsWeekly Vue Newsยท2y

    Weekly Vue News #163 - Typing Template Refs With TypeScript

    Learn how to type template refs in Vue using TypeScript for better type checking and code quality. Enhance your Vue components with TypeScript by understanding the integration between the two technologies.

  8. 8
    Article
    Avatar of collectionsCollectionsยท2y

    What's New in Vue 3.5?

    Vue 3.5 introduces several major updates that enhance performance and add long-requested features. Key improvements include reactive props destructuring, a restructured reactivity system, lazy hydration for Server-Side Rendering (SSR), a new `useID()` API, and an enhanced `defineCustomElement` API. Additionally, the update provides insights on configuring TypeScript settings for optimal performance, tips for using Chrome DevTools, and guidance on CSS-in-JS performance. Privacy and security tools such as privacy settings scripts and methods to password-protect static HTML files are also featured.

  9. 9
    Article
    Avatar of netguruNetguruยท2y

    Web Development Frameworks, Tools and Techniques for 2024

    In 2024, mastering React, Angular, and Visual Studio Code is essential for web development. Understanding HTML, CSS, and JavaScript is fundamental for building interactive websites. Key distinctions exist between front-end and back-end development, with JavaScript playing a pivotal role in both. Front-end frameworks like React, Angular, and Vue.js offer various benefits for creating dynamic web applications, while back-end frameworks such as Django, Ruby on Rails, and Laravel provide robust server-side capabilities. Web development tools like Visual Studio Code, Git, npm, and Yarn enhance the workflow, ensuring efficient development and team collaboration.

  10. 10
    Article
    Avatar of webdevbeehiivWeb Developerยท2y

    CSS Transitions & Animations ๐ŸŽจ, Common Vue.js Pitfalls โš ๏ธ, Open Source UI Templates ๐Ÿ“ฆ, MacOS Selected Tools ๐Ÿ

    This update covers new insights into modern CSS, common pitfalls in Vue.js, and tools for web developers. Highlights include various CSS properties and techniques, tips to avoid mistakes with Vue's reactivity system, and recommendations on useful tools such as online themes and templates, a local terminal web interface, and an open-source React video editing component.