A Deep Dive into SvelteKit's Rendering Techniques
SvelteKit is a meta-framework for Svelte that allows you to develop pages based on their content. At its core, SvelteKit introduces three fundamental strategies out of the box, each designed to streamline the development process and...
May 1, 2024
7 mins
Understanding Vue.js's <Suspense> and Async Components
In this blog post, we will delve into how and async components work, their benefits, and practical implementation strategies to make your Vue.js applications more efficient and user-friendly...
Apr 24, 2024
6 mins
Exploring the Hidden Gems of the Next Image Component: What You Might Be Overlooking
A blog post that explores hidden features that are easy to overlook...
Feb 9, 2024
5 mins
How Vim Transformed My Workflow for the Better
Discover how diving into Vim transformed my coding workflow...
Dec 20, 2023
5 mins
Nuxt DevTools v1.0: Redefining the Developer Experience Beyond Conventional Tools
Nuxt DevTools v1.0 is a game-changer for web developers, featuring integrated VS Code, real-time views, and a customizable UI. This new toolset enhances efficiency, revolutionizing web development....
Dec 1, 2023
8 mins
Understanding Vue's Reactive Data
A blog post that unravel how Reactivity works in Vue 3...
Nov 22, 2023
7 mins
Announcing Our New Starter.dev Kit: Nuxt 3 with Pinia and Vuetify
We're thrilled to unveil our brand new starter.dev kit: a Nuxt 3 kit using Pinia as the state manager and Vuetify for styles. While Nuxt 2 is still reliable and powerful, Nuxt 3, being the latest iteration of this versatile framework, brings an array of innovative features and enhanced flexibility that make it an ideal choice for your next development project. Now, let's explore what this kit offers, and how it can help you in your upcoming application development. Nuxt 3 vs Nuxt 2 First, why Nuxt 3? Let's delve into what Nuxt 3 is and why we've opted for this technology for our kit. Nuxt 3 is a modern web development framework based on Vue 3 for building server-side rendered applications, single-page applications, or statically rendered websites. It's an evolution of Nuxt 2 and provides an improved developer experience and better performance. Let’s see what features it has to offer in comparison to Nuxt 2! - Built on Vue 3: Nuxt 3 is built from the ground up using Vue 3, which brings a host of new features including conditional suspending of component rendering via the Suspense API, more flexibility for global mounting, and a Virtual DOM rewrite for better performance and improved TypeScript support. - Nitro Engine: Nitro, the new rendering server for Nuxt 3, is built for serverless architectures and offers extremely fast cold-start times. Nuxt 3 is planned to support Incremental Static Regeneration (ISR) using the Nitro renderer. - Native Composition API Support: Nuxt 3 has native support for the Vue Composition API, a feature that Nuxt 2 had to rely on an external library to use. The Composition API changes how code is written in Vue and is now built-in with Nuxt 3 since it is built on top of Vue 3. - Faster Hot Reloads with Vite: Nuxt 3 uses Vite for Hot Module Replacement (HMR), which is used when the server re-renders the updated components of your application in both development and production. This leads to faster hot reloads. - Additional Features: There are several other salient features of Nuxt 3, including a new Nuxt CLI (nuxi), NuxtJS Dev tools, and global auto imports of common functions such as `. Nuxt 3 brings remarkable performance enhancements, significantly reducing the size of server deployments and client bundles. These improvements are made possible by implementing a new renderer, faster hot reloads, and built-in support for native TypeScript and Composition API, as mentioned earlier. With such impressive features at our disposal, the decision to choose this framework was undoubtedly the right one. Pinia Let's talk about the state management library we've chosen. As the successor to Vuex, Pinia is now the default state management library for Vue 3. Pinia shines when sharing global state within your application; it ensures security and ease of use, especially when using SSR, which is often the case with Nuxt. Pinia's integration with Nuxt 3 is seamless, benefiting from Vue 3's inbuilt Composition API. The use of Pinia greatly simplifies the state management in Vue-based applications. Vuetify Vuetify is an exceptional Material Design framework for Vue.js that assists in building elegant, responsive, and interactive web applications. In Nuxt 3, the integration of Vuetify can be done smoothly, thanks to Nuxt's flexibility. This makes the process of building modern, visually appealing applications more efficient and enjoyable. What's inside the Nuxt 3 Kit? Our aim in developing the starter.dev kit is to equip you with essentials while maintaining flexibility. The kit incorporates a counter component that manages state using a Pinia store, and a Fetch component showcasing data fetch in Nuxt 3. We decided to omit Storybook and testing from this starter.dev kit. Storybook is currently incompatible with Nuxt 3, but rest assured, we will incorporate it as soon as compatibility support is introduced. Regarding testing, tools like Vitest and others have been excluded for now. The current Nuxt 3 testing landscape is still under development and not deemed production-ready. As the testing environment matures, we will update our starter.dev kit to include the most efficient and reliable testing solutions. Furthermore, the kit includes configurations for ESLint, Prettier, and is written entirely in TypeScript. This saves you significant time by taking the hassle out of setting up these tools in a new project. How do I use the kit? Use our starter.dev CLI! This is by far the easiest method. Simply run the command ` This will display a list of available starter.dev kits. Select the one that fits your needs - in this case, the ` one! You'll be asked to provide a name for your new project, and once that's inputted, the CLI will begin preparing the kit for you! Once installed, you can cd into your new project directory with the name you provided earlier, and start coding. But don’t forget to install the required dependencies with your package manager of choice (I recommend pnpm 🫣). For a deeper insight into the kit, visit https://starter.dev/kits/nuxt3-pinia-vuetify/ where you can read the README.md file for more detailed documentation, as well as take a look at the source code. Don't forget to read the package.json file to see the scripts available for the kit. Conclusion In a nutshell, our new starter.dev kit integrates Nuxt 3, Pinia, and Vuetify.. This article not only introduces you to the kit but also delves into the features and advantages that make it stand out - the improved performance of Nuxt 3, the ease of state management with Pinia, and the sophisticated stylings of Vuetify. As the digital landscape evolves, we will keep this kit updated with tools like Storybook and comprehensive testing capabilities as soon as they become Nuxt 3-compatible. That's it, folks! We're eager for you to take this kit for a spin in your next project. We've built it with much care and attention to detail, ensuring it brings significant value to your development process. We hope you find it as enjoyable to use as we did creating it. Happy coding!...
Jul 24, 2023
5 mins
Introducing the New Nuxt 2 - Pinia - Tailwind Kit in Starter.dev
*Starter.dev is an open source community resource developed by This Dot Labs that provides code starter kits in a variety of web technologies, including React, Angular, Vue, etc. with the hope of enabling developers to bootstrap their projects quickly without having to spend time configuring tooling. We ship starter kits with showcases to demonstrate how to best utilize these kits, and structure more complex projects.* --- We are excited to announce our new starter.dev kit: a Nuxt 2 kit with Pinia as the state manager, and Tailwind for the styling. Ok, you might be thinking: "Why should I use a Nuxt 2 kit if Nuxt 3 is just around the corner?" Well, although Nuxt 2 is indeed in just maintenance mode by now, it is the most stable Nuxt version out there, and it is still really powerful, and a great framework for you next app. If you want to build a scalable and stable project, you might want to build it in this version! Ok, without any further ado, let’s see what this kit is all about, and how you can use it in your next application! Lets first talk about our technological options. Nuxt So why Nuxt.js? Lets kick off explaining what Nuxt.js actually is, and why we decided to create a kit with this technology. Nuxt is a framework built on top of Vue. It helps you handle complex configuration with an easy command-line setup, such as asynchronous routing with middlewares, great SEO using SSR, automatic code-splitting, auto imports and many more. It also brings its own features, such as build-in components, different ways for getting data from an API, 2 rendering methods (Server-side or Static sites), and even its own loader, transitions, and animations. At first, you might find Nuxt a bit challenging. For example, if you have never used SSR before, it takes time to get used to it, and you will have to change your mindset from Vue as they handle logic quite differently. But we think all that effort will be worth it, because we think Nuxt is a great framework for your next application. It can make your development experience more gratifying and faster, and your site more SEO friendly. Pinia Lets now dive in into the state management library that we choose. As stated from the previous official library Vuex, Pinia is now the default state management library for Vue. When sharing global state within your application, you want it to be secure and easy to use, especially if you are using SSR as we are more likely doing with Nuxt. Pinia is pretty good at helping us with those matters. Using Pinia with Nuxt 2 is a bit tricky but nothing crazy. You just need to install an extra package in order to use Composition-API inside Nuxt 2, make some config adjustments, and then you are good to go! Tailwind Tailwind is a great utility-first CSS framework that helps you build websites more quickly. Nuxt helps us set up Tailwind from scratch pretty easily when creating our project from the command-line. It does the config setups, and also installs the packages we need in order to start using it. What’s inside the Nuxt 2 Kit? Our main goal when creating a starter.dev kit is to provide the essential things for your project without adding too much configuration to make them as flexible as possible. The kit includes two main components. The first one is a counter component, managing the state with a Pinia store and a Fetch component showing how data can be fetched inside Nuxt 2. Both of these components have their own Storybook component, and a test component written with testing library and MSW. These are basic examples to demonstrate how you can utilize these technologies together. The kit also includes ESlint, Prettier and Husky basic configurations. Also, the whole kit is written in TypeScript, which includes configuration within the kit as well. Our goal here is to save you all that time that it would take to get all these tools configured properly when starting a new project. How do I use the kit? With our starter.dev CLI! Of course there are other methods, but this one is for sure the easiest one. Just run the command npx @this-dot/create-starter. After running this command, a list of available starter.dev kits will show up. Of course you can select the best one that fits your needs. In this case, it will be the nuxt2-pinia-tailwind one! It will ask for the name of your new project, and once that is written down, the CLI will start to prepare the kit for you! Now that the kit is installed, you can cd into your new project directory with the name you provided before, and then start coding! Oh, but don’t forget to install the dependencies needed with your package manager of choice (I recommend pnpm 🫣). Take a look at https://starter.dev/kits/nuxt2-pinia-tailwind/ so you can have a deeper view of the kit! Where you can read the README.md file for more detailed documentation, as well as looking at the source code, don't forget to read the package.json file to see the scripts available for the kit. Happy coding!...
Dec 14, 2022
4 mins
Introducing Vue and Angular Versions of Framework.dev + New Landing Page
Our team created Framework.dev to help developers feel less overwhelmed when researching technical resources. We appreciate how important it can be to have a starting point when it comes to learning a new technology, or keeping up to date with the latest developments in the OSS community surrounding a stack. Previously, we started with just React, but our solution is deliberately extensible, and designed to be themed and filled in with different content for different frameworks. That's why we are happy to announce our new Vue and Angular versions for Framework.dev, a series of websites dedicated to cataloging resources to learn and develop in a given frontend framework. Our newest versions have the same features as the React version, which allows developers to search, compare, and discover libraries and resources! By adding tags and filters with a number of different attributes to all resources, and also making all the titles and descriptions searchable, we make the task of finding what you are looking for way easier. And who knows? Maybe in that search for finding out which library is the best for your needs, you ended up encountering one which you have never heard about before. Or perhaps you are just not sure which one to choose because all the options are solid. Well, we got you! With Framework.dev, you can compare libraries to look at metrics like the number of downloads, test coverage, and Github stars so you can get an idea of how popular and well-supported it is. To help you in these decisions, we've made it so you can take any set of libraries, and arrange them into a sortable table with a number of useful statistics sourced from npms. Our New Landing Page Since our plan is not to stop here, but to keep updating and making the site much bigger with more resources, frameworks and more, we decided that it was time to launch our landing page! This is where you can easily access the framework you are most interested in. Take a look at it! Help Build and Curate the Content! We are just getting started, and we know there's still a lot of content to add and cover! Framework.dev is hosted and maintained by This Dot Labs, but is a fully open-source project. No single person can keep up with how the frontend framework ecosystem constantly evolves and changes, but we might just stand a chance if we work together. Framework.dev is made for the community, and we hope community members will be inspired to enrich it. Do you have a favorite book that you think others should know about? Do you know about a cool feature that we could add? Did you encounter a bug? Then go look at our contribution guidelines and contribute to Framework.dev today!...
Jul 13, 2022
3 mins