# vuejs Published articles for vuejs. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## 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, ## 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 ## Using VueJS + GraphQL to make Practical Magic DevFeed: [Using VueJS + GraphQL to make Practical Magic]() Original publisher: [Read original article]() Author: andrew@nystudio107.com (Andrew Welch) Published: 2018-08-27T22:29:00Z Content type: tutorial Language: en Sources: [nystudio107 | Articles on modern web development.]() Topics: [GraphQL](), [vuejs](), [Content Management System](), [Front end](), [JavaScript](), [axios](), [Bootstrap](), [Jamstack]() Tags: [auto-complete](), [axios](), [bootstrap](), [craft](), [everyday](), [form](), [graphql](), [headless](), [insights](), [jamstack](), [javascript](), [like](), [magic](), [practical](), [problems](), [saving](), [searching](), [solve](), [submission](), [using](), [vuejs]() ### AI overview A practical tutorial showing how to use VueJS and GraphQL with a headless Craft CMS backend to implement auto-complete search and save contact-form submissions. It introduces the frontend and backend tooling used in the examples, including Axios, Bootstrap 4, Craft CMS, and CraftQL. ### Source excerpt Make some practical magic with VueJS + GraphQL to solve everyday problems like auto-complete searching and form submission saving with a headless Craft CMS server ## Post-Mortem: LinkedIn Talent Intelligence Experience DevFeed: [Post-Mortem: LinkedIn Talent Intelligence Experience]() Original publisher: [Read original article]() Author: andrew@nystudio107.com (Andrew Welch) Published: 2018-06-20T13:37:00Z Content type: article Language: en Sources: [nystudio107 | Articles on modern web development.]() Topics: [Post Mortem](), [Content Management System](), [GraphQL](), [vuejs](), [Front end](), [App](), [DevOps]() Tags: [app](), [cms](), [covers](), [craft](), [create](), [devops](), [experience](), [frontend](), [graphql](), [intelligence](), [interactive](), [linkedin-s](), [post-mortem](), [post-mortems](), [project](), [talent](), [unique](), [vuejs](), [web]() ### AI overview This post-mortem explains how Craft CMS 3, GraphQL, and VueJS were used to build an interactive tablet-and-projection-wall experience for LinkedIn's Talent Intelligence events. It focuses on the project's planning, architecture, DevOps, and core application design. ### Source excerpt This project post-mortem covers a unique use of Craft CMS 3, GraphQL, and VueJS to create an interactive experience for LinkedIn's Talent Intelligence Experience ## Embedding Teamwork Chat DevFeed: [Embedding Teamwork Chat]() Original publisher: [Read original article]() Author: Dawid Myslak Published: 2017-10-23T15:52:56Z Content type: article Language: en Sources: [Teamwork]() Topics: [Vue.js](), [Front end](), [JavaScript](), [Web Development](), [Webpack](), [Development](), [Framework](), [Library](), [flux](), [ESLint](), [Node.js]() Tags: [chat](), [development](), [eslint](), [flux](), [implementation](), [javascript](), [vuejs](), [vuex](), [webpack]() ### AI overview The article describes how Teamwork.com embedded Teamwork Chat Project Rooms directly in Teamwork Projects. The team chose a new component-based implementation and used Vue.js, Vuex, Webpack, modern JavaScript, ESLint, and reusable Node.js modules while considering performance. ### Source excerpt A couple of weeks ago we introduced a new feature in Teamwork Chat called Project Rooms. Project Rooms are a great way to create dedicated real-time communication channels for specific projects. Our next priority was to take this feature even further. Project Rooms in Teamwork Chat.Embedded Teamwork Chat Currently Project Rooms can be used inside Teamwork Chat, but our goal was to make them accessible directly in Teamwork Projects. To achieve this, we considered the following two options: Decouple only the important bits and pieces from the existing codebase of Teamwork Chat and deliver them as a standalone module. Create a brand new solution that follows component based architecture which could potentially be the future core codebase for the next generation of Teamwork Chat. After looking into this for a while, we decided that the second option will let us deliver a better quality solution. Our main concern with decoupling the existing codebase was the fact that we didn't use a component based architecture in the existing client. Unfortunately at the time of the initial implementation of the app, Knockout.js components weren't a common choice. New tech stack Earlier this year at Teamwork.com we made the decision that all our development teams will start using Vue.js as the main front-end framework. We also started working on creating a new internal build system based on Webpack, which allows us to use the latest front-end tools and makes the development process significantly more productive. Together with Vue.js we started using Vuex, which is a state management library inspired by Flux architecture. Another big change for us was dropping CoffeeScript and replacing it with the next generation of JavaScript. JavaScript ES2015+ comes with great new features and syntax, but also offers incredible editor support and great ESLint that makes our code more consistent across the team. New technology stack for embedded Teamwork Chat. Luckily, during the development of an ex ## Autocomplete Search with the Element API & VueJS DevFeed: [Autocomplete Search with the Element API & VueJS]() Original publisher: [Read original article]() Author: andrew@nystudio107.com (Andrew Welch) Published: 2017-02-22T06:19:00Z Content type: tutorial Language: en Sources: [nystudio107 | Articles on modern web development.]() Topics: [Vue.js](), [Content Management System](), [API](), [Ajax](), [JSON](), [npm](), [Front end](), [GitHub]() Tags: [api](), [autocomplete](), [cms](), [cmss](), [craft](), [create](), [element](), [fast](), [feature](), [functional](), [github](), [heres](), [insights](), [json](), [npm](), [search](), [vuejs]() ### AI overview A tutorial on using Craft CMS's Element API and VueJS to build an autocomplete search feature for blog entries. The Vue component sends AJAX requests to the Element API, receives JSON results, and renders them in a navigable dropdown. ### Source excerpt Here's how to use Craft CMS's Element API and VueJS to create a fast, functional autocomplete search feature ## Lazy Loading with the Element API & VueJS DevFeed: [Lazy Loading with the Element API & VueJS]() Original publisher: [Read original article]() Author: andrew@nystudio107.com (Andrew Welch) Published: 2016-12-17T17:45:00Z Content type: tutorial Language: en Sources: [nystudio107 | Articles on modern web development.]() Topics: [lazy loading](), [Content Management System](), [vuejs](), [API](), [Front end]() Tags: [api](), [cms](), [cms-s](), [content](), [craft](), [display](), [element](), [frontend](), [here-s](), [insights](), [lazy](), [lazy-loading](), [load](), [vuejs]() ### AI overview A tutorial on using Craft CMS's Element API with VueJS to lazy-load additional blog entries and display them on a frontend. It explains how to create an API endpoint that returns paginated blog content, including titles, URLs, summaries, images, categories, and tags. ### Source excerpt Here's how to use Craft CMS's Element API to lazy load content and display it via VueJS on the frontend ## Using VueJS 2.0 with Craft CMS DevFeed: [Using VueJS 2.0 with Craft CMS]() Original publisher: [Read original article]() Author: andrew@nystudio107.com (Andrew Welch) Published: 2016-12-09T20:12:00Z Content type: tutorial Language: en Sources: [nystudio107 | Articles on modern web development.]() Topics: [Vue.js](), [Content Management System](), [JavaScript](), [Front end](), [jQuery](), [Document Object Model (DOM)]() Tags: [angular](), [building](), [cms](), [craft](), [frontend](), [great](), [insights](), [interfaces](), [javascript](), [library](), [manipulation](), [modern](), [powerful](), [simple](), [vuejs](), [works]() ### AI overview This tutorial explains VueJS 2.0 and demonstrates replacing jQuery with VueJS on a Craft CMS website. It contrasts Vue's architecture for building interactive, data-driven frontend interfaces with jQuery's DOM-manipulation toolkit. ### Source excerpt VueJS is a simple yet powerful library for building modern web interfaces, and it works great with Craft CMS