# Vue.js Published articles for Vue.js. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## TanStack Charts Introduced with a Framework Agnostic Grammar of Graphics for TypeScript DevFeed: [TanStack Charts Introduced with a Framework Agnostic Grammar of Graphics for TypeScript]() Original publisher: [Read original article]() Author: Daniel Curtis Published: 2026-09-17T05:53:00Z Content type: news Language: en Sources: [InfoQ]() Topics: [Library](), [TypeScript](), [Graphics](), [Frameworks](), [React]() Tags: [angular](), [data-visualization](), [development](), [framework](), [graphics](), [introduced](), [library](), [news](), [react](), [react-native](), [tanstack-charts-alpha-introduced](), [typescript](), [visualization](), [vue-js](), [web-development]() ### AI overview TanStack Charts is a new framework-agnostic TypeScript visualization library that uses a grammar-of-graphics approach instead of fixed chart types. It is in Alpha, has about 160,000 weekly downloads, and supports multiple frameworks and environments, though it is not yet stable for production use. ### Source excerpt TanStack Charts is a new, framework-agnostic visualization library for TypeScript. It allows developers to create visualizations by composing various elements instead of using fixed chart types. Currently in Alpha, it has about 160,000 weekly downloads. The library supports multiple frameworks and is designed for a variety of environments, though it is not yet stable for production use. By Daniel Curtis ## What's new in Astro - March 2026 DevFeed: [What's new in Astro - March 2026]() Original publisher: [Read original article]() Author: Sarah Rainsberger Published: 2026-03-31T00:00:00Z Content type: news Language: en Sources: [The Astro Blog]() Topics: [releases]() Tags: [astro](), [community](), [event](), [features](), [optimization](), [partnership](), [releases](), [rust](), [server](), [updates](), [vue](), [vue-js]() ### AI overview A monthly Astro ecosystem roundup covering Astro 6 and 6.1 releases, Starlight updates, a CloudCannon CMS partnership, community events, adopter showcases, and challenge winners. ### Source excerpt March 2026 - Astro 6, CloudCannon CMS Partnership, Astro Together London, and more! ## What's new in Astro - February 2026 DevFeed: [What's new in Astro - February 2026]() Original publisher: [Read original article]() Author: Sarah Rainsberger Published: 2026-02-28T00:00:00Z Content type: article Language: en Sources: [The Astro Blog]() Topics: [Astro](), [releases](), [Maintainers](), [Search engine optimization (SEO)](), [data](), [Vue.js](), [Windows]() Tags: [astro](), [blog](), [community](), [company](), [content](), [devices](), [enterprise](), [guide](), [guides](), [http](), [interest](), [maintainers](), [mobile](), [salesforce](), [seo](), [testing](), [updates](), [v5](), [vue](), [vue-js]() ### AI overview Astro's February 2026 ecosystem update highlights rising adoption, strong results in the 2025 State of JS, recent Astro 5.18 and Astro 6 beta releases, notable adopters, community activity, and selected content about data, documentation, and SEO. ### Source excerpt February 2026 - Astro shines in the 2025 State of JS, adoption climbs according to HTTP Archive results, and more! ## Building StockHouse: Real-time market analytics with ClickHouse DevFeed: [Building StockHouse: Real-time market analytics with ClickHouse]() Original publisher: [Read original article]() Author: Lionel Palacin Published: 2025-11-13T16:21:22Z Content type: tutorial Language: en Sources: [ClickHouse Blog]() Topics: [clickhouse](), [real-time](), [Streaming](), [Time Series](), [Go Language](), [WebSocket](), [Node.js](), [Vue.js](), [dashboards](), [Back end](), [Front end]() Tags: [architecture](), [backend](), [clickhouse](), [engineering](), [financial](), [go](), [js](), [low-latency](), [node](), [observability](), [real-time](), [series](), [trading](), [vue](), [vue-js](), [web]() ### AI overview This article presents StockHouse, a complete demo for building a real-time market analytics application. It uses Massive WebSocket APIs for live stock and crypto data, ClickHouse for efficient storage and low-latency analysis, and Perspective for interactive visualization. ### Source excerpt Learn more how we built StockHouse, a real-time financial analytics application with Massive, ClickHouse and Perspective that scales to thousands of events per second. ## From .NET to Laravel: The Artisan of the Day Is Bilal Haidar. DevFeed: [From .NET to Laravel: The Artisan of the Day Is Bilal Haidar.]() Original publisher: [Read original article]() Author: Ana Tavares Published: 2025-10-24T17:47:45Z Content type: article Language: en Sources: [Laravel Blog]() Topics: [Laravel](), [PHP](), [Vue.js](), [Back end](), [.NET]() Tags: [applications](), [backend](), [deployment](), [deployment-tools](), [ecosystem](), [features](), [framework](), [laravel](), [net](), [php](), [testing](), [vue](), [vue-js]() ### AI overview Bilal Haidar describes his transition from .NET development to Laravel after taking on a Laravel/Vue.js project in 2018. He discusses using Laravel and its ecosystem to build e-learning platforms, compliance and quality management systems, CRM solutions, and backend services, while also writing, mentoring, and publishing technical content. ### Source excerpt Bilal Haidar is a Laravel expert who builds full-stack platforms, leveraging the framework's productivity features and mentoring others in the ecosystem. ## From Freelancer to Laravel Architect. The Artisan of the Day Is Wendell Adriel. DevFeed: [From Freelancer to Laravel Architect. The Artisan of the Day Is Wendell Adriel.]() Original publisher: [Read original article]() Author: Ana Tavares Published: 2025-09-28T14:48:00Z Content type: article Language: en Sources: [Laravel Blog]() Topics: [PHP](), [Web Development](), [Go Language]() Tags: [architecture](), [engineering](), [enterprise](), [go](), [laravel](), [open-source](), [php](), [saas](), [vue](), [vue-js]() ### AI overview A profile of Wendell Adriel's path from PHP instructor and freelancer to a Laravel architect building enterprise SaaS systems and contributing to the Laravel ecosystem. ### Source excerpt Wendell Adriel shares his journey from freelancer to enterprise Laravel architect. ## Get the most out of Firebase Studio's default built-in model, Gemini 2.5 Pro DevFeed: [Get the most out of Firebase Studio's default built-in model, Gemini 2.5 Pro]() Original publisher: [Read original article]() Author: Ali Satter; James O'Reilly Published: 2025-09-12T00:00:00Z Content type: release Language: en Sources: [Firebase Blog]() Topics: [Firebase](), [Artificial Intelligence](), [AI-assisted coding](), [multimodal](), [Vue.js]() Tags: [ai](), [code-generation](), [firebase](), [firebase-studio](), [gemini](), [google](), [multimodal](), [project-idx](), [vue-js]() ### AI overview Firebase Studio now uses Gemini 2.5 Pro as its built-in model by default, giving users access without requiring a Gemini API key. The upgrade is intended to improve reasoning, code generation, multimodal prompting, and application development workflows. ### Source excerpt With Gemini 2.5 Pro now built-in by default, Firebase Studio gives you no-cost access to a powerful AI assistant to accelerate the entire development workflow, from prototyping with images to refactoring complex code. ## Laravel as a Trampoline: The Artisan of the Day Is Austin White. DevFeed: [Laravel as a Trampoline: The Artisan of the Day Is Austin White.]() Original publisher: [Read original article]() Author: Ana Tavares Published: 2025-08-31T12:49:14Z Content type: article Language: en Sources: [Laravel Blog]() Topics: [Laravel](), [Code](), [Python](), [Electron](), [Vue.js](), [Forms]() Tags: [developer](), [development](), [forms](), [laravel](), [python](), [tooling](), [vue-js](), [web]() ### AI overview Austin White describes how Laravel helped him build robust applications and modernize gymnastics competition systems. At Scorsync, he developed athlete profiles, scoring history, live scoring, rankings, and event displays, using Python for an initial scanner prototype before rebuilding it with Electron and Vue.js. ### Source excerpt Austin White, a former world champion in double mini trampoline, leverages Laravel to revolutionize scoring systems in gymnastics and develop robust applications at Scorsync. ## Taming JavaScript Complexity: The Artisan of the Day Is Evan You DevFeed: [Taming JavaScript Complexity: The Artisan of the Day Is Evan You]() Original publisher: [Read original article]() Author: Ana Tavares Published: 2025-08-12T14:59:40Z Content type: article Language: en Sources: [Laravel Blog]() Topics: [Web Development]() Tags: [career](), [complexity](), [ecosystem](), [javascript](), [open-source](), [react](), [reactive](), [rust](), [svelte](), [toolchain](), [typescript](), [vue-js]() ### AI overview A profile of Evan You and his work on Vue, Vite, and a unified JavaScript and TypeScript toolchain. It covers Vue's stability goals, Vapor Mode, reactive signals, and Vite's download growth. ### Source excerpt Meet Evan You, the creator of Vue.js and Vite, two essential pieces of the modern JavaScript ecosystem. ## Taylor's Morning Routine & Laravel's Open Source Pledge DevFeed: [Taylor's Morning Routine & Laravel's Open Source Pledge]() Original publisher: [Read original article]() Author: Hank Published: 2024-10-08T01:30:00Z Content type: article Language: en Sources: [Laravel Blog]() Topics: [Pull Request](), [modern web development]() Tags: [github](), [laravel](), [open-source](), [package-management](), [php](), [pull-requests](), [vue-js]() ### AI overview Laravel describes its Open Source Pledge, including $34,000 in contributions to foundational projects such as the PHP Foundation, Composer, and Vue.js. The article also outlines a daily pull-request review routine across Laravel's open-source ecosystem. ### Source excerpt I start every morning by opening up a GitHub search that shows me [all the open pull requests](https://github.com/search?q=org%3Alaravel+is%3Apr+is%3Aopen) across Laravel's open source ecosystem. It's... ## Update State Management with Pinia DevFeed: [Update State Management with Pinia]() Original publisher: [Read original article]() Author: Dusko Peric Published: 2024-03-21T14:43:21Z Content type: article Language: en Sources: [Homegate Engineering Blog - Medium]() Topics: [Vue.js](), [Development](), [web applications](), [Code]() Tags: [article](), [debugging](), [developer-experience](), [development](), [pinia](), [state-management](), [typescript](), [vue-js](), [vuejs](), [web-applications]() ### AI overview This article explains Pinia as a state-management option for Vue.js applications. It describes Pinia's component-like store structure, direct state updates within actions instead of mutations, modular stores, Option and Setup Stores, TypeScript support, Vue Devtools support, and its lightweight design. ### Source excerpt In the development and maintenance of web applications, one of the crucial factors is the proper choice of state management. When it comes to Vue.js, we have two players in the game, where in my opinion, we have a clear winner. In this article, I will go through the functionalities brought by Pinia, which represent a step forward in this field. Intuitive API One of the problems in working with state is that it can very easily become confusing and complex. With its component-like structure, Pinia allows for easier understanding of how the store functions and interacts with your application. Let's look at an example to compare a Vue component with a Pinia store. Syntax similarity between Vue component and Pinia store This familiar syntax makes it a user-friendly and efficient solution for managing state. Excluding Mutations One of the key differences between Pinia and Vuex lies in the absence of mutations. In Vuex, the distinction between actions and mutations can become less clear-cut, particularly for complex stores. This redundancy can lead to repetitive code, adding unnecessary complexity to state management. Pinia takes a more direct approach. You can simply modify the state directly within actions. Let's see a code example to illustrate this concept: Vuex Store import { createStore } from 'vuex'; export default createStore({ state: { count: 0, }, mutations: { increment(state) { state.count++; // Update state through mutation }, }, actions: { increment({ commit }) { commit('increment'); // Dispatch mutation to update state }, }, }); Pinia Store import { defineStore } from 'pinia'; export const useCounterStore = defineStore('counter', { state: () => ({ count: 0, }), actions: { increment() { this.count++; // Directly update state within action }, }, }); In essence, Pinia removes an unnecessary layer of complexity by allowing direct state updates within actions. Modular stores design Pinia allow you to create multiple stores for different parts of your application, ## Mobile app prototyping with Quasar and SQLite DevFeed: [Mobile app prototyping with Quasar and SQLite]() Original publisher: [Read original article]() Author: James Sinkala Published: 2024-01-05T00:00:00Z Content type: tutorial Language: en Sources: [Turso Blog]() Topics: [Mobile](), [Quasar](), [SQLite](), [Express](), [libSQL](), [Turso](), [Vue.js](), [migration](), [JavaScript](), [Vite]() Tags: [development](), [libsql](), [migration](), [mobile](), [offline](), [open-source](), [prototyping](), [quasar](), [sqlite](), [turso](), [vite](), [vue](), [vue-js]() ### AI overview A tutorial series demonstrates building a recipe-book mobile app prototype with Quasar, Vue.js, and SQLite. It uses a local SQLite file for offline development, an Express server and the libSQL JavaScript SDK for database access, and explains how to migrate the database to Turso for production and global distribution. ### Source excerpt Build quick mobile application prototypes using the Quasar framework and SQLite. ## Building a social app with Spin (2/4): Vue.js app and Token Verification DevFeed: [Building a social app with Spin (2/4): Vue.js app and Token Verification]() Original publisher: [Read original article]() Author: Justin Pflueger Published: 2023-02-13T17:00:00Z Content type: tutorial Language: en Sources: [Fermyon - Experience the next wave of cloud computing.]() Topics: [Vue.js](), [Authentication](), [Routing (disambiguation)](), [Website](), [App]() Tags: [2](), [app](), [authentication](), [building](), [routing](), [token](), [verification](), [vue-js]() ### AI overview A tutorial on building a social app with Spin. This installment covers adding a static website with authentication, using a static fileserver, routing, and token authentication for a Vue.js app. ### Source excerpt I'm Justin Pflueger - In this iteration, I'll be taking you through the process of adding a static website with authentication to our app. We'll explore the static fileserver, routing and token authentication. ## How to display responsive images from Laravel-medialibrary in Vue.js DevFeed: [How to display responsive images from Laravel-medialibrary in Vue.js]() Original publisher: [Read original article]() Published: 2022-05-29T00:00:00Z Content type: tutorial Language: en Sources: [Arkadiusz Chmura]() Topics: [Laravel](), [Vue.js](), [Web Development](), [HTML]() Tags: [component](), [how-to](), [html](), [laravel](), [responsive](), [vue](), [vue-js]() ### AI overview This tutorial explains how to display responsive images generated by a Laravel media library in a Vue.js component. It shows how a controller can return the library's generated HTML markup and how the Vue template can render it based on screen size. ### Source excerpt It's easy to do in a Blade file, but what about a Vue component? ## Beyond Mobile First DevFeed: [Beyond Mobile First]() Original publisher: [Read original article]() Author: Ryan O'Neill Published: 2021-11-04T09:00:00Z Content type: article Language: en Sources: [Square Corner Blog RSS Feed]() Topics: [Web](), [web applications](), [Design system](), [Meteor](), [Library](), [ui](), [Mobile](), [Responsive Design](), [Open Source]() Tags: [design-system](), [e-commerce](), [engineering](), [library](), [open-source](), [responsive-design](), [ui](), [vue-js](), [web](), [web-applications]() ### AI overview Square Online describes how it extends mobile-first web design with app-like experiences across mobile and desktop. The article focuses on touch-friendly interactions, larger tap targets, modal-based UI consistency, and the open source Maker component library for Vue.js. ### Source excerpt Bringing app-like experiences to the web ## Petite-Vue: A 5.8 KB JavaScript Library for Adding Small Interactions to Server-Rendered Pages DevFeed: [Petite-Vue: A 5.8 KB JavaScript Library for Adding Small Interactions to Server-Rendered Pages]() Original publisher: [Read original article]() Author: andrew@nystudio107.com (Andrew Welch) Published: 2021-08-20T06:41:00Z Content type: article Language: en Sources: [nystudio107 | Articles on modern web development.]() Topics: [Vue.js](), [JavaScript](), [Library](), [Web Development](), [Front end](), [interactive website]() Tags: [5-8kb](), [bits](), [gives](), [insights](), [interaction](), [javascript](), [library](), [optimized](), [pages](), [petite-vue](), [power](), [slimmed](), [small](), [sprinkling](), [tiny](), [vue](), [vue-js](), [web]() ### AI overview This article introduces Petite-Vue, a 5.8 KB JavaScript micro-framework for progressively enhancing server-rendered HTML with small interactive features. It compares Petite-Vue with Alpine.js and highlights its Vue-compatible API, migration path to Vue.js, existing Vue ecosystem, and TypeScript support. ### Source excerpt Petite-Vue is a tiny 5.8kb JavaScript library that gives you the power of Vue.js, but slimmed down & optimized for sprinkling small bits of interaction on your web pages ## Deploying Your Nuxt.js Site To Laravel Forge DevFeed: [Deploying Your Nuxt.js Site To Laravel Forge]() Original publisher: [Read original article]() Author: James Brooks Published: 2021-06-18T10:09:00Z Content type: tutorial Language: en Sources: [Laravel Blog]() Topics: [Nuxt.js](), [Deployment](), [Vue.js](), [nginx](), [npm]() Tags: [app](), [deployment](), [nginx](), [npm](), [nuxt](), [nuxt-js](), [vue](), [vue-js](), [web]() ### AI overview This tutorial explains how to deploy a Nuxt.js static website to Laravel Forge. It covers configuring an App or Web server with Nginx, creating a site as Static HTML, setting the web directory, installing the Git repository, disabling Composer dependencies, and using the deploy script to install NPM dependencies and generate the site. ### Source excerpt Nuxt.js is a framework for generating static websites using Vue.js. Today we're we're going to explore how to deploy your Nuxt.js application with [Laravel Forge](https://forge.laravel.com). If you'r... ## Announcing Vue 3.0 "One Piece" DevFeed: [Announcing Vue 3.0 "One Piece"]() Original publisher: [Read original article]() Published: 2020-09-18T00:00:00Z Content type: release Language: en Sources: [The Vue Point]() Topics: [Vue.js](), [TypeScript](), [API](), [Compiler](), [Document Object Model (DOM)]() Tags: [api](), [architecture](), [framework](), [performance](), [release](), [scale](), [typescript](), [vue-js]() ### AI overview Vue.js 3.0 "One Piece" is officially released after more than two years of development. The major framework update focuses on improved performance, smaller bundle sizes, stronger TypeScript integration, new APIs for large-scale use cases, and a modular architecture designed for future development. ### Source excerpt Today we are proud to announce the official release of Vue.js 3.0 "One Piece". This new major version of the framework provides improved performance, smaller bundle sizes, better TypeScript integration, new APIs for tackling large scale use cases, and a solid foundation for long-term future iterations of the framework. ## A taste of Vue.js 3: API Changes, Async Components, and Plugins DevFeed: [A taste of Vue.js 3: API Changes, Async Components, and Plugins]() Original publisher: [Read original article]() Author: andrew@nystudio107.com (Andrew Welch) Published: 2020-05-30T04:00:00Z Content type: tutorial Language: en Sources: [nystudio107 | Articles on modern web development.]() Topics: [Vue.js](), [async](), [JavaScript](), [Webpack](), [TypeScript]() Tags: [adapting](), [article](), [async](), [changes](), [components](), [covering](), [existing](), [insights](), [javascript](), [moving](), [plugin](), [plugins](), [takes](), [tutorial](), [typescript](), [vue-js](), [webpack]() ### AI overview A practical guide to migrating a project scaffold from Vue.js 2 to Vue.js 3. It covers API changes, the Composition API, async components, dynamic imports, webpack configuration, TypeScript support, and adapting plugins. The migration described was successful, and the project adopted Vue.js 3. ### Source excerpt This article takes you through changes that have to be made when moving to Vue.js 3, covering API changes, async components, and adapting existing plugins ## Vue.js Advanced Reactivity API and Caching Method-style Getters DevFeed: [Vue.js Advanced Reactivity API and Caching Method-style Getters]() Original publisher: [Read original article]() Author: Michael Gallagher Published: 2019-07-11T11:48:14Z Content type: tutorial Language: en Sources: [Teamwork]() Topics: [Caching](), [Vue.js](), [reactive](), [Code]() Tags: [advanced](), [caching](), [code](), [front-end-development](), [javascript](), [js](), [performance](), [vue](), [vue-js](), [vuejs](), [vuex]() ### AI overview This tutorial explains why Vuex method-style getter invocations do not cache their returned values, distinguishes that behavior from property-style getter caching, and discusses how to implement result caching when performance measurements justify it. It also relates the approach to Vue's Advanced Reactivity API and method-style computed properties. ### Source excerpt We're going to talk about a common request when working with relational data in Vuex. Why and how to cache method-style getter invocations, though the principles would also apply to method-style computed properties. If you have been following recent Vue v3 RFCs, you might have come across the Advanced Reactivity API, which comes as a very welcome direction for Vue to take. This article is written using Vue v2, but ultimately the code will be simplified if this RFC is implemented. Firstly, although both property-style and method-style getters offer caching as part of core Vuex functionality, method-style getter invocations do not cache results. If that doesn't make much sense, keep reading, it should become clear. What is a Method-style Getter? Below is the example from the Vuex documentation of a method-style getter, sometimes referred to as a parameterized getter. getTodoById: (state) => (id) => { return state.todos.find(todo => todo.id === id) } Normally a getter works by processing state into a given result. todoCount: (state) => state.todos.length, This will mean that store.getters.todoCount might provide the value 12, which will be cached in the event that the value is accessed again without any underlying reactive data changing. isTodoOpen: (state) => (id) => !!state.todos[id].assignee && state.todos[id].status !== 'complete', The above example can be accessed by store.getters.isTodoOpen(123) which will return a boolean. This value is not cached, calling it repeatedly will result in multiple executions. So what is cached here? Nothing from a reactive standpoint. When the getter property is accessed on the store, store.getters.isTodoOpen, just prior to invocation, this will run the outer function which will not access any reactive data, but create a function, an arrow which accepts id. This created function is now cached. Why aren't the results of these getters cached? There are lots of good reasons not to cache the results of these functions. How many times wo ## Vue.js Syntax Highlighting with highlight.js DevFeed: [Vue.js Syntax Highlighting with highlight.js]() Original publisher: [Read original article]() Author: Chris Hager Published: 2017-02-01T00:00:00Z Content type: tutorial Language: en Sources: [Chris Hager]() Topics: [Highlight.js](), [Syntax Highlighting](), [Vue.js](), [JavaScript]() Tags: [javascript](), [npm](), [syntax-highlighting](), [vue-js]() ### AI overview A tutorial showing how to use highlight.js for syntax highlighting in a Vue.js application, including a custom v-highlightjs directive that handles initial rendering and source-code updates. ### Source excerpt Everyone loves a good syntax highlighting. This post explains how to use highlight.js for syntax highlighting in a Vue.js application. The method shown here allows syntax highlighting both on original creation of an element as well as on updates to the source-code, using a simple v-highlightjs directive such as this:
You can see a live example here: jsfiddle.net/metachris/1vz9oobc. To achieve this, we just need to install the highlight.