[{"data":1,"prerenderedAt":220},["ShallowReactive",2],{"blog-tag-javascript":3,"blog-tag-posts-javascript":32},{"id":4,"count":5,"description":6,"link":7,"name":8,"slug":8,"taxonomy":9,"meta":10,"_links":11},25,3,"","https:\u002F\u002Flab.aiarnob.com\u002Ftag\u002Fjavascript\u002F","javascript","post_tag",[],{"self":12,"collection":18,"about":21,"wp:post_type":24,"curies":27},[13],{"href":14,"targetHints":15},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Ftags\u002F25",{"allow":16},[17],"GET",[19],{"href":20},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Ftags",[22],{"href":23},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Ftaxonomies\u002Fpost_tag",[25],{"href":26},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts?tags=25",[28],{"name":29,"href":30,"templated":31},"wp","https:\u002F\u002Fapi.w.org\u002F{rel}",true,[33,107,166],{"id":34,"date":35,"date_gmt":35,"guid":36,"modified":35,"modified_gmt":35,"slug":38,"status":39,"type":40,"link":37,"title":41,"content":43,"excerpt":46,"author":48,"featured_media":49,"comment_status":50,"ping_status":50,"sticky":45,"template":6,"format":51,"meta":52,"categories":53,"tags":54,"class_list":58,"post_image_original":69,"devto_meta":70,"_links":75},43,"2024-09-16T17:18:55",{"rendered":37},"https:\u002F\u002Flab.aiarnob.com\u002Fa-beginners-guide-to-global-state-management-in-wordpress-gutenberg\u002F","a-beginners-guide-to-global-state-management-in-wordpress-gutenberg","publish","post",{"rendered":42},"A Beginner’s Guide to Global State Management in WordPress Gutenberg",{"rendered":44,"protected":45},"\u003Cp>When building complex WordPress block editor (Gutenberg) applications, managing state efficiently becomes crucial. This is where \u003Ccode>@wordpress\u002Fdata\u003C\u002Fcode> comes into play. It allows you to manage and share global state across different blocks and components in your WordPress application.\u003C\u002Fp>\n\u003Cp>If you’re new to managing global state or using \u003Ccode>@wordpress\u002Fdata\u003C\u002Fcode>, don’t worry! This blog post will walk you through the basics of reducers, actions, and selectors, explaining how to use them to manage state in WordPress.\u003C\u002Fp>\n\u003Cp>\u003Ccode>@wordpress\u002Fdata\u003C\u002Fcode> provides a way to store, update, and access data globally, allowing different components or blocks to share and interact with the same data.\u003C\u002Fp>\n\u003Ch2>\n  \u003Ca name=\"key-concepts-in-raw-wordpressdata-endraw-\" href=\"#key-concepts-in-raw-wordpressdata-endraw-\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  Key Concepts in \u003Ccode>@wordpress\u002Fdata\u003C\u002Fcode>\u003Cbr \u002F>\n\u003C\u002Fh2>\n\u003Cp>To understand how to use \u003Ccode>@wordpress\u002Fdata\u003C\u002Fcode>, we need to understand three main concepts: reducers, actions, and selectors. These form the core of how state is managed and updated.\u003C\u002Fp>\n\u003Ch3>\n  \u003Ca name=\"actions\" href=\"#actions\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  Actions:\u003Cbr \u002F>\n\u003C\u002Fh3>\n\u003Cp>An action is like an instruction or command that tells the reducer what to do. It’s simply an object that has two parts:\u003C\u002Fp>\n\u003Col>\n\u003Cli>A type that indicates what kind of change is happening (e.g., add, remove, update).\u003C\u002Fli>\n\u003Cli>A payload that contains the data needed for that change (e.g., which item to add).\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>Here’s an example of how actions might look in our cart example:\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight javascript\">\u003Ccode>\u003Cspan class=\"kd\">const\u003C\u002Fspan> \u003Cspan class=\"nx\">actions\u003C\u002Fspan> \u003Cspan class=\"o\">=\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n    \u003Cspan class=\"nf\">addToCart\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"nx\">item\u003C\u002Fspan>\u003Cspan class=\"p\">)\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n        \u003Cspan class=\"k\">return\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n            \u003Cspan class=\"na\">type\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">ADD_TO_CART\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan> \u003Cspan class=\"c1\">\u002F\u002F Action type\u003C\u002Fspan>\n            \u003Cspan class=\"nx\">item\u003C\u002Fspan> \u003Cspan class=\"c1\">\u002F\u002F Payload: the item to add to the cart\u003C\u002Fspan>\n        \u003Cspan class=\"p\">};\u003C\u002Fspan>\n    \u003Cspan class=\"p\">},\u003C\u002Fspan>\n    \u003Cspan class=\"nf\">removeFromCart\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"nx\">itemId\u003C\u002Fspan>\u003Cspan class=\"p\">)\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n        \u003Cspan class=\"k\">return\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n            \u003Cspan class=\"na\">type\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">REMOVE_FROM_CART\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan> \u003Cspan class=\"c1\">\u002F\u002F Action type\u003C\u002Fspan>\n            \u003Cspan class=\"nx\">itemId\u003C\u002Fspan> \u003Cspan class=\"c1\">\u002F\u002F Payload: the ID of the item to remove\u003C\u002Fspan>\n        \u003Cspan class=\"p\">};\u003C\u002Fspan>\n    \u003Cspan class=\"p\">}\u003C\u002Fspan>\n\u003Cspan class=\"p\">};\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>\u003Cstrong>In short:\u003C\u002Fstrong> Actions tell the reducer what needs to change in the state.\u003C\u002Fp>\n\u003Ch3>\n  \u003Ca name=\"reducers\" href=\"#reducers\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  Reducers:\u003Cbr \u002F>\n\u003C\u002Fh3>\n\u003Cp>A reducer is like a manager of your state. Whenever something changes in your application (e.g., a user adds a block or disables a feature), the reducer listens for that change and updates the state accordingly.\u003C\u002Fp>\n\u003Cp>What does a reducer do? It takes the current state and an action, then returns a new state based on the action.\u003Cbr \u002F>\nHere’s an example of a simple reducer that manages a shopping cart:\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight javascript\">\u003Ccode>\u003Cspan class=\"kd\">const\u003C\u002Fspan> \u003Cspan class=\"nx\">reducer\u003C\u002Fspan> \u003Cspan class=\"o\">=\u003C\u002Fspan> \u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"nx\">state\u003C\u002Fspan> \u003Cspan class=\"o\">=\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan> \u003Cspan class=\"na\">cart\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"p\">[]\u003C\u002Fspan> \u003Cspan class=\"p\">},\u003C\u002Fspan> \u003Cspan class=\"nx\">action\u003C\u002Fspan>\u003Cspan class=\"p\">)\u003C\u002Fspan> \u003Cspan class=\"o\">=>\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n    \u003Cspan class=\"k\">switch \u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"nx\">action\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">type\u003C\u002Fspan>\u003Cspan class=\"p\">)\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n        \u003Cspan class=\"k\">case\u003C\u002Fspan> \u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">ADD_TO_CART\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan>\n            \u003Cspan class=\"k\">return\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n                \u003Cspan class=\"p\">...\u003C\u002Fspan>\u003Cspan class=\"nx\">state\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan> \u003Cspan class=\"c1\">\u002F\u002F Keep the existing state\u003C\u002Fspan>\n                \u003Cspan class=\"na\">cart\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"p\">[...\u003C\u002Fspan>\u003Cspan class=\"nx\">state\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">cart\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan> \u003Cspan class=\"nx\">action\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">item\u003C\u002Fspan>\u003Cspan class=\"p\">]\u003C\u002Fspan> \u003Cspan class=\"c1\">\u002F\u002F Add the new item to the cart\u003C\u002Fspan>\n            \u003Cspan class=\"p\">};\u003C\u002Fspan>\n        \u003Cspan class=\"k\">case\u003C\u002Fspan> \u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">REMOVE_FROM_CART\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan>\n            \u003Cspan class=\"k\">return\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n                \u003Cspan class=\"p\">...\u003C\u002Fspan>\u003Cspan class=\"nx\">state\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan>\n                \u003Cspan class=\"na\">cart\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"nx\">state\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">cart\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nf\">filter\u003C\u002Fspan>\u003Cspan class=\"p\">((\u003C\u002Fspan>\u003Cspan class=\"nx\">item\u003C\u002Fspan>\u003Cspan class=\"p\">)\u003C\u002Fspan> \u003Cspan class=\"o\">=>\u003C\u002Fspan> \u003Cspan class=\"nx\">item\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">id\u003C\u002Fspan> \u003Cspan class=\"o\">!==\u003C\u002Fspan> \u003Cspan class=\"nx\">action\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">itemId\u003C\u002Fspan>\u003Cspan class=\"p\">)\u003C\u002Fspan> \u003Cspan class=\"c1\">\u002F\u002F Remove the item from the cart\u003C\u002Fspan>\n            \u003Cspan class=\"p\">};\u003C\u002Fspan>\n        \u003Cspan class=\"nl\">default\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan>\n            \u003Cspan class=\"k\">return\u003C\u002Fspan> \u003Cspan class=\"nx\">state\u003C\u002Fspan>\u003Cspan class=\"p\">;\u003C\u002Fspan> \u003Cspan class=\"c1\">\u002F\u002F Return the unchanged state for unknown actions\u003C\u002Fspan>\n    \u003Cspan class=\"p\">}\u003C\u002Fspan>\n\u003Cspan class=\"p\">};\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>\u003Cstrong>In short:\u003C\u002Fstrong> The reducer defines how the state changes when specific actions are dispatched.\u003C\u002Fp>\n\u003Ch3>\n  \u003Ca name=\"selectors\" href=\"#selectors\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  Selectors:\u003Cbr \u002F>\n\u003C\u002Fh3>\n\u003Cp>A selector is a function that retrieves or selects specific data from the state. When your components need to access data (like displaying the items in the cart), they use a selector to fetch that data from the store.\u003C\u002Fp>\n\u003Cp>For example, a selector to get all the cart items might look like this:\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight javascript\">\u003Ccode>\u003Cspan class=\"kd\">const\u003C\u002Fspan> \u003Cspan class=\"nx\">selectors\u003C\u002Fspan> \u003Cspan class=\"o\">=\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n    \u003Cspan class=\"nf\">getCartItems\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"nx\">state\u003C\u002Fspan>\u003Cspan class=\"p\">)\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n        \u003Cspan class=\"k\">return\u003C\u002Fspan> \u003Cspan class=\"nx\">state\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">cart\u003C\u002Fspan>\u003Cspan class=\"p\">;\u003C\u002Fspan> \u003Cspan class=\"c1\">\u002F\u002F Return the cart items from the state\u003C\u002Fspan>\n    \u003Cspan class=\"p\">}\u003C\u002Fspan>\n\u003Cspan class=\"p\">};\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>In a component, you would use this selector to access the cart data like this:\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight javascript\">\u003Ccode>\u003Cspan class=\"kd\">const\u003C\u002Fspan> \u003Cspan class=\"nx\">cartItems\u003C\u002Fspan> \u003Cspan class=\"o\">=\u003C\u002Fspan> \u003Cspan class=\"nf\">useSelect\u003C\u002Fspan>\u003Cspan class=\"p\">((\u003C\u002Fspan>\u003Cspan class=\"nx\">select\u003C\u002Fspan>\u003Cspan class=\"p\">)\u003C\u002Fspan> \u003Cspan class=\"o\">=>\u003C\u002Fspan> \u003Cspan class=\"nf\">select\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">my-store\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">).\u003C\u002Fspan>\u003Cspan class=\"nf\">getCartItems\u003C\u002Fspan>\u003Cspan class=\"p\">());\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>\u003Cstrong>In short:\u003C\u002Fstrong> A selector is a helper function that lets you access specific data from the state.\u003C\u002Fp>\n\u003Ch2>\n  \u003Ca name=\"step-by-step-guide-to-implement-global-state-in-gutenberg-with-raw-wordpressdata-endraw-\" href=\"#step-by-step-guide-to-implement-global-state-in-gutenberg-with-raw-wordpressdata-endraw-\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  Step by Step Guide to Implement Global State in Gutenberg with \u003Ccode>@wordpress\u002Fdata\u003C\u002Fcode>\u003Cbr \u002F>\n\u003C\u002Fh2>\n\u003Cp>Now that we’ve covered the basics, let’s walk through how you can implement these concepts in a Gutenberg block or component. We’ll set up a simple store with \u003Ccode>@wordpress\u002Fdata\u003C\u002Fcode>, manage some state, and use actions and selectors to interact with that state.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>Step 1: Define Your Initial State\u003C\u002Fstrong>\u003Cbr \u002F>\nFirst, we need to define the initial state of our store. This is the default data that our application starts with:\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight javascript\">\u003Ccode>\u003Cspan class=\"kd\">const\u003C\u002Fspan> \u003Cspan class=\"nx\">DEFAULT_STATE\u003C\u002Fspan> \u003Cspan class=\"o\">=\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n    \u003Cspan class=\"na\">cart\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"p\">[]\u003C\u002Fspan>\n\u003Cspan class=\"p\">};\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>\u003Cstrong>Step 2: Create Actions\u003C\u002Fstrong>\u003Cbr \u002F>\nNext, we define the actions that we will use to update the state. In our case, we’ll define two actions: one to add an item to the cart and another to remove an item.\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight javascript\">\u003Ccode>\u003Cspan class=\"kd\">const\u003C\u002Fspan> \u003Cspan class=\"nx\">actions\u003C\u002Fspan> \u003Cspan class=\"o\">=\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n    \u003Cspan class=\"nf\">addToCart\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"nx\">item\u003C\u002Fspan>\u003Cspan class=\"p\">)\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n        \u003Cspan class=\"k\">return\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n            \u003Cspan class=\"na\">type\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">ADD_TO_CART\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan>\n            \u003Cspan class=\"nx\">item\u003C\u002Fspan>\n        \u003Cspan class=\"p\">};\u003C\u002Fspan>\n    \u003Cspan class=\"p\">},\u003C\u002Fspan>\n    \u003Cspan class=\"nf\">removeFromCart\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"nx\">itemId\u003C\u002Fspan>\u003Cspan class=\"p\">)\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n        \u003Cspan class=\"k\">return\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n            \u003Cspan class=\"na\">type\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">REMOVE_FROM_CART\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan>\n            \u003Cspan class=\"nx\">itemId\u003C\u002Fspan>\n        \u003Cspan class=\"p\">};\u003C\u002Fspan>\n    \u003Cspan class=\"p\">}\u003C\u002Fspan>\n\u003Cspan class=\"p\">};\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>\u003Cstrong>Step 3: Create the Reducer\u003C\u002Fstrong>\u003Cbr \u002F>\nThe reducer listens for dispatched actions and updates the state accordingly. Here’s our reducer, which updates the cart when actions are dispatched:\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight javascript\">\u003Ccode>\u003Cspan class=\"kd\">const\u003C\u002Fspan> \u003Cspan class=\"nx\">reducer\u003C\u002Fspan> \u003Cspan class=\"o\">=\u003C\u002Fspan> \u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"nx\">state\u003C\u002Fspan> \u003Cspan class=\"o\">=\u003C\u002Fspan> \u003Cspan class=\"nx\">DEFAULT_STATE\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan> \u003Cspan class=\"nx\">action\u003C\u002Fspan>\u003Cspan class=\"p\">)\u003C\u002Fspan> \u003Cspan class=\"o\">=>\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n    \u003Cspan class=\"k\">switch \u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"nx\">action\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">type\u003C\u002Fspan>\u003Cspan class=\"p\">)\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n        \u003Cspan class=\"k\">case\u003C\u002Fspan> \u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">ADD_TO_CART\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan>\n            \u003Cspan class=\"k\">return\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n                \u003Cspan class=\"p\">...\u003C\u002Fspan>\u003Cspan class=\"nx\">state\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan>\n                \u003Cspan class=\"na\">cart\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"p\">[...\u003C\u002Fspan>\u003Cspan class=\"nx\">state\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">cart\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan> \u003Cspan class=\"nx\">action\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">item\u003C\u002Fspan>\u003Cspan class=\"p\">]\u003C\u002Fspan>\n            \u003Cspan class=\"p\">};\u003C\u002Fspan>\n        \u003Cspan class=\"k\">case\u003C\u002Fspan> \u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">REMOVE_FROM_CART\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan>\n            \u003Cspan class=\"k\">return\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n                \u003Cspan class=\"p\">...\u003C\u002Fspan>\u003Cspan class=\"nx\">state\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan>\n                \u003Cspan class=\"na\">cart\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"nx\">state\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">cart\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nf\">filter\u003C\u002Fspan>\u003Cspan class=\"p\">((\u003C\u002Fspan>\u003Cspan class=\"nx\">item\u003C\u002Fspan>\u003Cspan class=\"p\">)\u003C\u002Fspan> \u003Cspan class=\"o\">=>\u003C\u002Fspan> \u003Cspan class=\"nx\">item\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">id\u003C\u002Fspan> \u003Cspan class=\"o\">!==\u003C\u002Fspan> \u003Cspan class=\"nx\">action\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">itemId\u003C\u002Fspan>\u003Cspan class=\"p\">)\u003C\u002Fspan>\n            \u003Cspan class=\"p\">};\u003C\u002Fspan>\n        \u003Cspan class=\"nl\">default\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan>\n            \u003Cspan class=\"k\">return\u003C\u002Fspan> \u003Cspan class=\"nx\">state\u003C\u002Fspan>\u003Cspan class=\"p\">;\u003C\u002Fspan>\n    \u003Cspan class=\"p\">}\u003C\u002Fspan>\n\u003Cspan class=\"p\">};\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>\u003Cstrong>Step 4: Create Selectors\u003C\u002Fstrong>\u003Cbr \u002F>\nSelectors help retrieve specific data from the state. For example, if we want to get all items in the cart, we would create a selector like this:\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight javascript\">\u003Ccode>\u003Cspan class=\"kd\">const\u003C\u002Fspan> \u003Cspan class=\"nx\">selectors\u003C\u002Fspan> \u003Cspan class=\"o\">=\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n    \u003Cspan class=\"nf\">getCartItems\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"nx\">state\u003C\u002Fspan>\u003Cspan class=\"p\">)\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n        \u003Cspan class=\"k\">return\u003C\u002Fspan> \u003Cspan class=\"nx\">state\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">cart\u003C\u002Fspan>\u003Cspan class=\"p\">;\u003C\u002Fspan>\n    \u003Cspan class=\"p\">}\u003C\u002Fspan>\n\u003Cspan class=\"p\">};\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>\u003Cstrong>Step 5: Create and Register the Store\u003C\u002Fstrong>\u003Cbr \u002F>\nFinally, we’ll create and register the store with the \u003Ccode>@wordpress\u002Fdata\u003C\u002Fcode> package. This will make the store globally accessible across your WordPress site.\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight javascript\">\u003Ccode>\u003Cspan class=\"k\">import\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan> \u003Cspan class=\"nx\">createReduxStore\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan> \u003Cspan class=\"nx\">register\u003C\u002Fspan> \u003Cspan class=\"p\">}\u003C\u002Fspan> \u003Cspan class=\"k\">from\u003C\u002Fspan> \u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">@wordpress\u002Fdata\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">;\u003C\u002Fspan>\n\n\u003Cspan class=\"kd\">const\u003C\u002Fspan> \u003Cspan class=\"nx\">store\u003C\u002Fspan> \u003Cspan class=\"o\">=\u003C\u002Fspan> \u003Cspan class=\"nf\">createReduxStore\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">my-cart-store\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n    \u003Cspan class=\"nx\">reducer\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan>\n    \u003Cspan class=\"nx\">actions\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan>\n    \u003Cspan class=\"nx\">selectors\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan>\n\u003Cspan class=\"p\">});\u003C\u002Fspan>\n\n\u003Cspan class=\"nf\">register\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"nx\">store\u003C\u002Fspan>\u003Cspan class=\"p\">);\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>\u003Cstrong>Step 6: Using the Store in Components\u003C\u002Fstrong>\u003Cbr \u002F>\nOnce the store is registered, you can use it in your Gutenberg blocks or components. For example, to add an item to the cart:\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight javascript\">\u003Ccode>\u003Cspan class=\"k\">import\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan> \u003Cspan class=\"nx\">useDispatch\u003C\u002Fspan> \u003Cspan class=\"p\">}\u003C\u002Fspan> \u003Cspan class=\"k\">from\u003C\u002Fspan> \u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">@wordpress\u002Fdata\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">;\u003C\u002Fspan>\n\n\u003Cspan class=\"kd\">const\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan> \u003Cspan class=\"nx\">addToCart\u003C\u002Fspan> \u003Cspan class=\"p\">}\u003C\u002Fspan> \u003Cspan class=\"o\">=\u003C\u002Fspan> \u003Cspan class=\"nf\">useDispatch\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">my-cart-store\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">);\u003C\u002Fspan>\n\u003Cspan class=\"nf\">addToCart\u003C\u002Fspan>\u003Cspan class=\"p\">({\u003C\u002Fspan> \u003Cspan class=\"na\">id\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"mi\">1\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan> \u003Cspan class=\"na\">name\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">Sample Item\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan> \u003Cspan class=\"p\">});\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>To fetch the items in the cart:\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight javascript\">\u003Ccode>\u003Cspan class=\"k\">import\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan> \u003Cspan class=\"nx\">useSelect\u003C\u002Fspan> \u003Cspan class=\"p\">}\u003C\u002Fspan> \u003Cspan class=\"k\">from\u003C\u002Fspan> \u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">@wordpress\u002Fdata\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">;\u003C\u002Fspan>\n\n\u003Cspan class=\"kd\">const\u003C\u002Fspan> \u003Cspan class=\"nx\">cartItems\u003C\u002Fspan> \u003Cspan class=\"o\">=\u003C\u002Fspan> \u003Cspan class=\"nf\">useSelect\u003C\u002Fspan>\u003Cspan class=\"p\">((\u003C\u002Fspan>\u003Cspan class=\"nx\">select\u003C\u002Fspan>\u003Cspan class=\"p\">)\u003C\u002Fspan> \u003Cspan class=\"o\">=>\u003C\u002Fspan> \u003Cspan class=\"nf\">select\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">my-cart-store\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">).\u003C\u002Fspan>\u003Cspan class=\"nf\">getCartItems\u003C\u002Fspan>\u003Cspan class=\"p\">());\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Ch2>\n  \u003Ca name=\"conclusion\" href=\"#conclusion\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  Conclusion\u003Cbr \u002F>\n\u003C\u002Fh2>\n\u003Cp>By understanding the roles of reducers, actions, and selectors, you can easily manage global state in your WordPress Gutenberg projects using \u003Ccode>@wordpress\u002Fdata\u003C\u002Fcode>. This structured approach allows you to manage data more efficiently, making your blocks and components more powerful and interactive.\u003C\u002Fp>\n\u003Cp>With \u003Ccode>@wordpress\u002Fdata\u003C\u002Fcode>, you have a reliable and scalable solution for handling state across your entire WordPress application. Give it a try in your next Gutenberg project!\u003C\u002Fp>\n",false,{"rendered":47,"protected":45},"\u003Cp>When building complex WordPress block editor (Gutenberg) applications, managing state efficiently…\u003C\u002Fp>\n",1,0,"open","standard",{"footnotes":6},[48],[55,4,56,57],24,26,18,[59,40,60,61,62,63,64,65,66,67,68],"post-43","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-gutenberg","tag-javascript","tag-redux","tag-wordpress",null,{"edited_at":71,"published_at":72,"reactions":5,"comments":49,"reading_time":73,"body_markdown":74},"2024-09-16T17:28:07Z","2024-09-16T17:18:55Z",4,"When building complex WordPress block editor (Gutenberg) applications, managing state efficiently becomes crucial. This is where `@wordpress\u002Fdata` comes into play. It allows you to manage and share global state across different blocks and components in your WordPress application.\n\nIf you’re new to managing global state or using `@wordpress\u002Fdata`, don’t worry! This blog post will walk you through the basics of reducers, actions, and selectors, explaining how to use them to manage state in WordPress.\n\n`@wordpress\u002Fdata` provides a way to store, update, and access data globally, allowing different components or blocks to share and interact with the same data.\n\n## Key Concepts in `@wordpress\u002Fdata`\nTo understand how to use `@wordpress\u002Fdata`, we need to understand three main concepts: reducers, actions, and selectors. These form the core of how state is managed and updated.\n\n### Actions:\nAn action is like an instruction or command that tells the reducer what to do. It’s simply an object that has two parts:\n\n1. A type that indicates what kind of change is happening (e.g., add, remove, update).\n2. A payload that contains the data needed for that change (e.g., which item to add).\n\nHere’s an example of how actions might look in our cart example:\n\n```js\nconst actions = {\n    addToCart(item) {\n        return {\n            type: 'ADD_TO_CART', \u002F\u002F Action type\n            item \u002F\u002F Payload: the item to add to the cart\n        };\n    },\n    removeFromCart(itemId) {\n        return {\n            type: 'REMOVE_FROM_CART', \u002F\u002F Action type\n            itemId \u002F\u002F Payload: the ID of the item to remove\n        };\n    }\n};\n```\n**In short:** Actions tell the reducer what needs to change in the state.\n\n### Reducers:\nA reducer is like a manager of your state. Whenever something changes in your application (e.g., a user adds a block or disables a feature), the reducer listens for that change and updates the state accordingly.\n\nWhat does a reducer do? It takes the current state and an action, then returns a new state based on the action.\nHere’s an example of a simple reducer that manages a shopping cart:\n\n```js\nconst reducer = (state = { cart: [] }, action) => {\n    switch (action.type) {\n        case 'ADD_TO_CART':\n            return {\n                ...state, \u002F\u002F Keep the existing state\n                cart: [...state.cart, action.item] \u002F\u002F Add the new item to the cart\n            };\n        case 'REMOVE_FROM_CART':\n            return {\n                ...state,\n                cart: state.cart.filter((item) => item.id !== action.itemId) \u002F\u002F Remove the item from the cart\n            };\n        default:\n            return state; \u002F\u002F Return the unchanged state for unknown actions\n    }\n};\n```\n**In short:** The reducer defines how the state changes when specific actions are dispatched.\n\n### Selectors:\nA selector is a function that retrieves or selects specific data from the state. When your components need to access data (like displaying the items in the cart), they use a selector to fetch that data from the store.\n\nFor example, a selector to get all the cart items might look like this:\n\n```js\nconst selectors = {\n    getCartItems(state) {\n        return state.cart; \u002F\u002F Return the cart items from the state\n    }\n};\n```\nIn a component, you would use this selector to access the cart data like this:\n\n```js\nconst cartItems = useSelect((select) => select('my-store').getCartItems());\n```\n**In short:** A selector is a helper function that lets you access specific data from the state.\n\n## Step by Step Guide to Implement Global State in Gutenberg with `@wordpress\u002Fdata`\n\nNow that we’ve covered the basics, let’s walk through how you can implement these concepts in a Gutenberg block or component. We'll set up a simple store with `@wordpress\u002Fdata`, manage some state, and use actions and selectors to interact with that state.\n\n**Step 1: Define Your Initial State**\nFirst, we need to define the initial state of our store. This is the default data that our application starts with:\n\n```js\nconst DEFAULT_STATE = {\n    cart: []\n};\n```\n\n**Step 2: Create Actions**\nNext, we define the actions that we will use to update the state. In our case, we’ll define two actions: one to add an item to the cart and another to remove an item.\n\n```js\nconst actions = {\n    addToCart(item) {\n        return {\n            type: 'ADD_TO_CART',\n            item\n        };\n    },\n    removeFromCart(itemId) {\n        return {\n            type: 'REMOVE_FROM_CART',\n            itemId\n        };\n    }\n};\n```\n\n**Step 3: Create the Reducer**\nThe reducer listens for dispatched actions and updates the state accordingly. Here's our reducer, which updates the cart when actions are dispatched:\n\n```js\nconst reducer = (state = DEFAULT_STATE, action) => {\n    switch (action.type) {\n        case 'ADD_TO_CART':\n            return {\n                ...state,\n                cart: [...state.cart, action.item]\n            };\n        case 'REMOVE_FROM_CART':\n            return {\n                ...state,\n                cart: state.cart.filter((item) => item.id !== action.itemId)\n            };\n        default:\n            return state;\n    }\n};\n```\n\n**Step 4: Create Selectors**\nSelectors help retrieve specific data from the state. For example, if we want to get all items in the cart, we would create a selector like this:\n\n```js\nconst selectors = {\n    getCartItems(state) {\n        return state.cart;\n    }\n};\n```\n\n**Step 5: Create and Register the Store**\nFinally, we’ll create and register the store with the `@wordpress\u002Fdata` package. This will make the store globally accessible across your WordPress site.\n\n```js\nimport { createReduxStore, register } from '@wordpress\u002Fdata';\n\nconst store = createReduxStore('my-cart-store', {\n    reducer,\n    actions,\n    selectors,\n});\n\nregister(store);\n```\n\n**Step 6: Using the Store in Components**\nOnce the store is registered, you can use it in your Gutenberg blocks or components. For example, to add an item to the cart:\n\n```js\nimport { useDispatch } from '@wordpress\u002Fdata';\n\nconst { addToCart } = useDispatch('my-cart-store');\naddToCart({ id: 1, name: 'Sample Item' });\n```\n\nTo fetch the items in the cart:\n\n```js\nimport { useSelect } from '@wordpress\u002Fdata';\n\nconst cartItems = useSelect((select) => select('my-cart-store').getCartItems());\n```\n\n## Conclusion\nBy understanding the roles of reducers, actions, and selectors, you can easily manage global state in your WordPress Gutenberg projects using `@wordpress\u002Fdata`. This structured approach allows you to manage data more efficiently, making your blocks and components more powerful and interactive.\n\nWith `@wordpress\u002Fdata`, you have a reliable and scalable solution for handling state across your entire WordPress application. Give it a try in your next Gutenberg project!\n",{"self":76,"collection":81,"about":84,"author":87,"replies":90,"version-history":93,"wp:attachment":96,"wp:term":99,"curies":105},[77],{"href":78,"targetHints":79},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts\u002F43",{"allow":80},[17],[82],{"href":83},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts",[85],{"href":86},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Ftypes\u002Fpost",[88],{"embeddable":31,"href":89},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fusers\u002F1",[91],{"embeddable":31,"href":92},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fcomments?post=43",[94],{"count":49,"href":95},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts\u002F43\u002Frevisions",[97],{"href":98},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fmedia?parent=43",[100,103],{"taxonomy":101,"embeddable":31,"href":102},"category","https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fcategories?post=43",{"taxonomy":9,"embeddable":31,"href":104},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Ftags?post=43",[106],{"name":29,"href":30,"templated":31},{"id":108,"date":109,"date_gmt":109,"guid":110,"modified":109,"modified_gmt":109,"slug":112,"status":39,"type":40,"link":111,"title":113,"content":115,"excerpt":117,"author":48,"featured_media":119,"comment_status":50,"ping_status":50,"sticky":45,"template":6,"format":51,"meta":120,"categories":121,"tags":122,"class_list":124,"post_image_original":128,"devto_meta":129,"_links":135},52,"2021-06-12T06:23:56",{"rendered":111},"https:\u002F\u002Flab.aiarnob.com\u002Fnuxt-js-data-fetching-hook-async-data\u002F","nuxt-js-data-fetching-hook-async-data",{"rendered":114},"Nuxt.js Data Fetching Hook: Async Data.",{"rendered":116,"protected":45},"\u003Cp>In this blog, I am discussing the Nuxt.js asyncData hook. For server-side rendering in Nuxt.js need to use specific hooks. This allows your page to render with all of its required data presents.\u003C\u002Fp>\n\u003Ch2>\n  \u003Ca name=\"nuxtjs-has-two-hooks-for-asynchronous-data-loading\" href=\"#nuxtjs-has-two-hooks-for-asynchronous-data-loading\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  Nuxt.js has two hooks for asynchronous data loading:\u003Cbr \u002F>\n\u003C\u002Fh2>\n\u003Col>\n\u003Cli>The fetch hook\u003C\u002Fli>\n\u003Cli>The asyncData hook\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>Also, Nuxt.js supports traditional Vue patterns for loading data in your client-side app, such as fetching data in a component’s \u003Cstrong>mounted()\u003C\u002Fstrong> hook.\u003C\u002Fp>\n\u003Ch2>\n  \u003Ca name=\"some-important-features-of-asyncdata-hook-in-nuxtjs\" href=\"#some-important-features-of-asyncdata-hook-in-nuxtjs\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  Some important features of asyncData hook in Nuxt.js:\u003Cbr \u002F>\n\u003C\u002Fh2>\n\u003Col>\n\u003Cli>asyncData works on both server-side & client-side rendering.\u003C\u002Fli>\n\u003Cli>asyncData is called every time before loading a component.\u003C\u002Fli>\n\u003Cli>You can use only on next pages, not in vue components.\u003C\u002Fli>\n\u003Cli>anyncData is called from the server-side before the component is mounted. That’s why you don’t have access to \u003Cstrong>’this’\u003C\u002Fstrong> keyword inside \u003Cstrong>asyncData()\u003C\u002Fstrong>.\u003C\u002Fli>\n\u003Cli>This method receives the \u003Ca href=\"https:\u002F\u002Fnuxtjs.org\u002Fdocs\u002F2.x\u002Fconcepts\u002Fcontext-helpers\" target=\"_blank\" rel=\"noopener noreferrer\">context\u003C\u002Fa> object as the first argument and you can use it to access core nuxt properties such as route, store, params, app, etc.\u003C\u002Fli>\n\u003Cli>The result from asyncData will be merged with data.\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>\u003Cstrong>Here is the example of nuxt asyncData using \u003Ca href=\"https:\u002F\u002Faxios.nuxtjs.org\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">@nuxt\u002Faxios\u003C\u002Fa> library:\u003C\u002Fstrong>\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight javascript\">\u003Ccode>\u003Cspan class=\"o\"><\u003C\u002Fspan>\u003Cspan class=\"nx\">template\u003C\u002Fspan>\u003Cspan class=\"o\">>\u003C\u002Fspan>\n  \u003Cspan class=\"o\"><\u003C\u002Fspan>\u003Cspan class=\"nx\">div\u003C\u002Fspan>\u003Cspan class=\"o\">>\u003C\u002Fspan>\n    \u003Cspan class=\"o\"><\u003C\u002Fspan>\u003Cspan class=\"nx\">h1\u003C\u002Fspan>\u003Cspan class=\"o\">>\u003C\u002Fspan>\u003Cspan class=\"p\">{{\u003C\u002Fspan> \u003Cspan class=\"nx\">post\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">title\u003C\u002Fspan> \u003Cspan class=\"p\">}}\u003C\u002Fspan>\u003Cspan class=\"o\"><\u003C\u002Fspan>\u003Cspan class=\"sr\">\u002Fh1\u003C\u002Fspan>\u003Cspan class=\"err\">>\n\u003C\u002Fspan>    \u003Cspan class=\"o\"><\u003C\u002Fspan>\u003Cspan class=\"nx\">p\u003C\u002Fspan>\u003Cspan class=\"o\">>\u003C\u002Fspan>\u003Cspan class=\"p\">{{\u003C\u002Fspan> \u003Cspan class=\"nx\">post\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">description\u003C\u002Fspan> \u003Cspan class=\"p\">}}\u003C\u002Fspan>\u003Cspan class=\"o\"><\u003C\u002Fspan>\u003Cspan class=\"sr\">\u002Fp\u003C\u002Fspan>\u003Cspan class=\"err\">>\n\u003C\u002Fspan>  \u003Cspan class=\"o\"><\u003C\u002Fspan>\u003Cspan class=\"sr\">\u002Fdiv\u003C\u002Fspan>\u003Cspan class=\"err\">>\n\u003C\u002Fspan>\u003Cspan class=\"o\"><\u003C\u002Fspan>\u003Cspan class=\"sr\">\u002Ftemplate\u003C\u002Fspan>\u003Cspan class=\"err\">>\n\u003C\u002Fspan>\n\u003Cspan class=\"o\"><\u003C\u002Fspan>\u003Cspan class=\"nx\">script\u003C\u002Fspan>\u003Cspan class=\"o\">>\u003C\u002Fspan>\n  \u003Cspan class=\"k\">export\u003C\u002Fspan> \u003Cspan class=\"k\">default\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n    \u003Cspan class=\"k\">async\u003C\u002Fspan> \u003Cspan class=\"nf\">asyncData\u003C\u002Fspan>\u003Cspan class=\"p\">({\u003C\u002Fspan>\u003Cspan class=\"nx\">params\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan> \u003Cspan class=\"nx\">$axios\u003C\u002Fspan> \u003Cspan class=\"p\">})\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n      \u003Cspan class=\"kd\">const\u003C\u002Fspan> \u003Cspan class=\"nx\">post\u003C\u002Fspan> \u003Cspan class=\"o\">=\u003C\u002Fspan> \u003Cspan class=\"k\">await\u003C\u002Fspan> \u003Cspan class=\"nx\">$http\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nf\">$get\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"s2\">`https:\u002F\u002Fapi.nuxtjs.dev\u002Fposts\u002F\u003C\u002Fspan>\u003Cspan class=\"p\">${\u003C\u002Fspan>\u003Cspan class=\"nx\">params\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">id\u003C\u002Fspan>\u003Cspan class=\"p\">}\u003C\u002Fspan>\u003Cspan class=\"s2\">`\u003C\u002Fspan>\u003Cspan class=\"p\">)\u003C\u002Fspan>\n      \u003Cspan class=\"k\">return\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan> \u003Cspan class=\"nx\">post\u003C\u002Fspan> \u003Cspan class=\"p\">}\u003C\u002Fspan>\n    \u003Cspan class=\"p\">}\u003C\u002Fspan>\n  \u003Cspan class=\"p\">}\u003C\u002Fspan>\n\u003Cspan class=\"o\"><\u003C\u002Fspan>\u003Cspan class=\"sr\">\u002Fscript\u003C\u002Fspan>\u003Cspan class=\"err\">>\n\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>asyncData hook returned the promise and resolved during the route transition. This means that no “loading placeholder” is visible during client-side transitions but you can use the \u003Ca href=\"https:\u002F\u002Fdev.to\u002Faiarnob\u002Fhow-to-use-nuxt-js-loading-progress-bar-39l3\">loading bar\u003C\u002Fa> can be used to indicate a loading state to the user.\u003C\u002Fp>\n\u003Ch2>\n  \u003Ca name=\"asyncdata-on-both-clientside-amp-serverside\" href=\"#asyncdata-on-both-clientside-amp-serverside\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  asyncData() on both client-side & server-side:\u003Cbr \u002F>\n\u003C\u002Fh2>\n\u003Cp>To test how asyncData() works on both client-side & server-side, please write the bellow code on your Nuxt.js page.\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight plaintext\">\u003Ccode><script>\nexport default{\n    asyncData(context){\n        console.log(context);\n}\n}\n<\u002Fscript>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>\u003Cstrong>Server Side Test\u003C\u002Fstrong>\u003Cbr \u002F>\nNow reload the page on the browser and look inside your terminal(also can check on browser console panel Nuxt SSR Response) on which your Nuxt.js application running. You can see the context object like the below screenshot. That means its works on the server-side.\u003Cbr \u002F>\n\u003Ca href=\"https:\u002F\u002Fmedia2.dev.to\u002Fdynamic\u002Fimage\u002Fwidth=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\u002Fhttps%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwzjzudyqv04q4wdcdck1.png\" class=\"article-body-image-wrapper\">\u003Cimg decoding=\"async\" src=\"https:\u002F\u002Fmedia2.dev.to\u002Fdynamic\u002Fimage\u002Fwidth=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\u002Fhttps%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwzjzudyqv04q4wdcdck1.png\" alt=\"Nuxt.js SSR\" loading=\"lazy\" width=\"800\" height=\"667\">\u003C\u002Fa>\u003C\u002Fp>\n\u003Cp>\u003Cstrong>Client Side Test\u003C\u002Fstrong>\u003Cbr \u002F>\nYou can also check client-side rendering when you come to this page from another Nuxt.js page (The link must be used NuxtLink for linking between pages). Now open your browser dev tools and check the console panel and you see the magic of asyncData().\u003Cbr \u002F>\n\u003Ca href=\"https:\u002F\u002Fmedia2.dev.to\u002Fdynamic\u002Fimage\u002Fwidth=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\u002Fhttps%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Foe6rcmn858p4sej707em.png\" class=\"article-body-image-wrapper\">\u003Cimg decoding=\"async\" src=\"https:\u002F\u002Fmedia2.dev.to\u002Fdynamic\u002Fimage\u002Fwidth=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\u002Fhttps%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Foe6rcmn858p4sej707em.png\" alt=\"Client Side Test Nuxt.js\" loading=\"lazy\" width=\"800\" height=\"247\">\u003C\u002Fa>\u003C\u002Fp>\n\u003Ch2>\n  \u003Ca name=\"how-you-can-use-async-data-in-components\" href=\"#how-you-can-use-async-data-in-components\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  How you can use Async data in components:\u003Cbr \u002F>\n\u003C\u002Fh2>\n\u003Cp>We already know that we can not use anyncData hook inside any component but we can use another way for component. \u003Cbr \u002F>\nMake the API call in the asyncData method of the page component and pass the data as props to the sub components. Both Client & Server side rendering will work fine.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>Referance:\u003C\u002Fstrong> Nuxt.js Official Data Fetch \u003Ca href=\"https:\u002F\u002Fnuxtjs.org\u002Fdocs\u002F2.x\u002Ffeatures\u002Fdata-fetching\" target=\"_blank\" rel=\"noopener noreferrer\">Hook\u003C\u002Fa>\u003C\u002Fp>\n",{"rendered":118,"protected":45},"\u003Cp>In this blog, I am discussing the Nuxt.js asyncData hook. For server-side rendering in Nuxt.js need…\u003C\u002Fp>\n",53,{"footnotes":6},[48],[4,123],32,[125,40,60,61,62,126,63,64,66,127],"post-52","has-post-thumbnail","tag-vue","https:\u002F\u002Flab.aiarnob.com\u002Fwp-content\u002Fuploads\u002F2021\u002F06\u002Fdevto-726068-cover.webp",{"edited_at":130,"published_at":131,"reactions":132,"comments":133,"reading_time":133,"body_markdown":134},"2021-06-12T09:06:19Z","2021-06-12T06:23:56Z",15,2,"In this blog, I am discussing the Nuxt.js asyncData hook. For server-side rendering in Nuxt.js need to use specific hooks. This allows your page to render with all of its required data presents.\n\n##Nuxt.js has two hooks for asynchronous data loading:\n1. The fetch hook\n2. The asyncData hook\n\nAlso, Nuxt.js supports traditional Vue patterns for loading data in your client-side app, such as fetching data in a component's **mounted()** hook.\n\n##Some important features of asyncData hook in Nuxt.js:\n1. asyncData works on both server-side & client-side rendering.\n2. asyncData is called every time before loading a component.\n3. You can use only on next pages, not in vue components.\n4. anyncData is called from the server-side before the component is mounted. That’s why you don’t have access to **’this’** keyword inside **asyncData()**.\n5. This method receives the [context](https:\u002F\u002Fnuxtjs.org\u002Fdocs\u002F2.x\u002Fconcepts\u002Fcontext-helpers) object as the first argument and you can use it to access core nuxt properties such as route, store, params, app, etc.\n6. The result from asyncData will be merged with data.\n\n**Here is the example of nuxt asyncData using [@nuxt\u002Faxios](https:\u002F\u002Faxios.nuxtjs.org\u002F) library:**\n``` javascript\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Ch1>{{ post.title }}\u003C\u002Fh1>\n    \u003Cp>{{ post.description }}\u003C\u002Fp>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\n  export default {\n    async asyncData({params, $axios }) {\n      const post = await $http.$get(`https:\u002F\u002Fapi.nuxtjs.dev\u002Fposts\u002F${params.id}`)\n      return { post }\n    }\n  }\n\u003C\u002Fscript>\n```\n\nasyncData hook returned the promise and resolved during the route transition. This means that no \"loading placeholder\" is visible during client-side transitions but you can use the [loading bar](https:\u002F\u002Fdev.to\u002Faiarnob\u002Fhow-to-use-nuxt-js-loading-progress-bar-39l3) can be used to indicate a loading state to the user.\n\n##asyncData() on both client-side & server-side:\nTo test how asyncData() works on both client-side & server-side, please write the bellow code on your Nuxt.js page.\n```\n\u003Cscript>\nexport default{\n\tasyncData(context){\n\t\tconsole.log(context);\n}\n}\n\u003C\u002Fscript>\n```\n\n**Server Side Test**\nNow reload the page on the browser and look inside your terminal(also can check on browser console panel Nuxt SSR Response) on which your Nuxt.js application running. You can see the context object like the below screenshot. That means its works on the server-side.\n![Nuxt.js SSR](https:\u002F\u002Fdev-to-uploads.s3.amazonaws.com\u002Fuploads\u002Farticles\u002Fwzjzudyqv04q4wdcdck1.png)\n\n**Client Side Test**\nYou can also check client-side rendering when you come to this page from another Nuxt.js page (The link must be used NuxtLink for linking between pages). Now open your browser dev tools and check the console panel and you see the magic of asyncData().\n![Client Side Test Nuxt.js](https:\u002F\u002Fdev-to-uploads.s3.amazonaws.com\u002Fuploads\u002Farticles\u002Foe6rcmn858p4sej707em.png)\n\n##How you can use Async data in components:\nWe already know that we can not use anyncData hook inside any component but we can use another way for component. \nMake the API call in the asyncData method of the page component and pass the data as props to the sub components. Both Client & Server side rendering will work fine.\n\n**Referance:** Nuxt.js Official Data Fetch [Hook](https:\u002F\u002Fnuxtjs.org\u002Fdocs\u002F2.x\u002Ffeatures\u002Fdata-fetching)",{"self":136,"collection":141,"about":143,"author":145,"replies":147,"version-history":150,"wp:featuredmedia":153,"wp:attachment":156,"wp:term":159,"curies":164},[137],{"href":138,"targetHints":139},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts\u002F52",{"allow":140},[17],[142],{"href":83},[144],{"href":86},[146],{"embeddable":31,"href":89},[148],{"embeddable":31,"href":149},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fcomments?post=52",[151],{"count":49,"href":152},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts\u002F52\u002Frevisions",[154],{"embeddable":31,"href":155},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fmedia\u002F53",[157],{"href":158},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fmedia?parent=52",[160,162],{"taxonomy":101,"embeddable":31,"href":161},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fcategories?post=52",{"taxonomy":9,"embeddable":31,"href":163},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Ftags?post=52",[165],{"name":29,"href":30,"templated":31},{"id":167,"date":168,"date_gmt":168,"guid":169,"modified":168,"modified_gmt":168,"slug":171,"status":39,"type":40,"link":170,"title":172,"content":174,"excerpt":176,"author":48,"featured_media":178,"comment_status":50,"ping_status":50,"sticky":45,"template":6,"format":51,"meta":179,"categories":180,"tags":181,"class_list":182,"post_image_original":184,"devto_meta":185,"_links":189},54,"2021-05-31T09:31:46",{"rendered":170},"https:\u002F\u002Flab.aiarnob.com\u002Fhow-to-use-nuxt-js-loading-progress-bar\u002F","how-to-use-nuxt-js-loading-progress-bar",{"rendered":173},"How to Use Nuxt.js Loading Progress Bar",{"rendered":175,"protected":45},"\u003Cp>Are you using Nuxt.js on your current project as front-end framework? then you have a great news, Nuxt.js Out of the box gives you its own loading progress bar component that’s shown between routes. You can do anything with the Nuxt.js loading progress bar, customize it, disable it, or can create your own \u003Cstrong>loading\u003C\u002Fstrong> progress bar.\u003C\u002Fp>\n\u003Ch2>\n  \u003Ca name=\"active-amp-customize-progress-bar\" href=\"#active-amp-customize-progress-bar\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  Active & Customize Progress Bar:\u003Cbr \u002F>\n\u003C\u002Fh2>\n\u003Cp>You can activate the progress bar on your Nuxt.js application by adding the \u003Cstrong>loading\u003C\u002Fstrong> property of the \u003Cstrong>nuxt.config.js\u003C\u002Fstrong> inside the \u003Ccode>export default { \u002F\u002Fcode here }\u003C\u002Fcode> with the corresponding properties.\u003C\u002Fp>\n\u003Cp>To set a green progress bar with a height of 5px, add the following code inside your project \u003Cstrong>nuxt.config.js\u003C\u002Fstrong> file.\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight javascript\">\u003Ccode>\u003Cspan class=\"k\">export\u003C\u002Fspan> \u003Cspan class=\"k\">default\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n  \u003Cspan class=\"na\">loading\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n    \u003Cspan class=\"na\">color\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">green\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan>\n    \u003Cspan class=\"na\">height\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">5px\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan>\n    \u003Cspan class=\"na\">throttle\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"mi\">0\u003C\u002Fspan>\n  \u003Cspan class=\"p\">}\u003C\u002Fspan>\n\u003Cspan class=\"p\">}\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>You can customize many things, you can change color(color name\u002Fcolor hex code), height, duration, direction for \u003Cstrong>rtl\u003C\u002Fstrong> sites, keep animating progress bar when loading takes longer than duration.\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight javascript\">\u003Ccode>\u003Cspan class=\"k\">export\u003C\u002Fspan> \u003Cspan class=\"k\">default\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n  \u003Cspan class=\"na\">loading\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n    \u003Cspan class=\"na\">color\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">green\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan>\n    \u003Cspan class=\"na\">height\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">5px\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan>\n    \u003Cspan class=\"na\">duration\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"mi\">1000\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan>\n    \u003Cspan class=\"na\">rtl\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"kc\">true\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan>\n    \u003Cspan class=\"na\">continuous\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"kc\">true\u003C\u002Fspan>\n  \u003Cspan class=\"p\">}\u003C\u002Fspan>\n\u003Cspan class=\"p\">}\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Ch2>\n  \u003Ca name=\"disable-the-progress-bar\" href=\"#disable-the-progress-bar\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  Disable the Progress Bar:\u003Cbr \u002F>\n\u003C\u002Fh2>\n\u003Cp>You can disable the progress bar globally or locally. If you want to disable the progress bar globally then add \u003Cstrong>loading: false\u003C\u002Fstrong> in your \u003Cstrong>nuxt.config.js\u003C\u002Fstrong> file:\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight javascript\">\u003Ccode>\u003Cspan class=\"k\">export\u003C\u002Fspan> \u003Cspan class=\"k\">default\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n  \u003Cspan class=\"na\">loading\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"kc\">false\u003C\u002Fspan>\n\u003Cspan class=\"p\">}\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>Your can also disable the progress bar for specific page.  Add \u003Cstrong>loading: false\u003C\u002Fstrong> in the specific page.\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight javascript\">\u003Ccode>\u003Cspan class=\"o\"><\u003C\u002Fspan>\u003Cspan class=\"nx\">template\u003C\u002Fspan>\u003Cspan class=\"o\">>\u003C\u002Fspan>\n  \u003Cspan class=\"o\"><\u003C\u002Fspan>\u003Cspan class=\"nx\">h1\u003C\u002Fspan>\u003Cspan class=\"o\">>\u003C\u002Fspan>\u003Cspan class=\"nx\">Contact\u003C\u002Fspan> \u003Cspan class=\"nx\">Us\u003C\u002Fspan> \u003Cspan class=\"nx\">Page\u003C\u002Fspan>\u003Cspan class=\"o\"><\u003C\u002Fspan>\u003Cspan class=\"sr\">\u002Fh1\u003C\u002Fspan>\u003Cspan class=\"err\">>\n\u003C\u002Fspan>\u003Cspan class=\"o\"><\u003C\u002Fspan>\u003Cspan class=\"sr\">\u002Ftemplate\u003C\u002Fspan>\u003Cspan class=\"err\">>\n\u003C\u002Fspan>\n\u003Cspan class=\"o\"><\u003C\u002Fspan>\u003Cspan class=\"nx\">script\u003C\u002Fspan>\u003Cspan class=\"o\">>\u003C\u002Fspan>\n  \u003Cspan class=\"k\">export\u003C\u002Fspan> \u003Cspan class=\"k\">default\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n    \u003Cspan class=\"na\">loading\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"kc\">false\u003C\u002Fspan>\n  \u003Cspan class=\"p\">}\u003C\u002Fspan>\n\u003Cspan class=\"o\"><\u003C\u002Fspan>\u003Cspan class=\"sr\">\u002Fscript\u003C\u002Fspan>\u003Cspan class=\"err\">>\n\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Ch2>\n  \u003Ca name=\"custom-loading-progress-bar\" href=\"#custom-loading-progress-bar\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  Custom Loading Progress Bar:\u003Cbr \u002F>\n\u003C\u002Fh2>\n\u003Cp>You can also create your own custom loading progress bar. Inside the component directory create your custom component in \u003Cstrong>LoadingBar.vue\u003C\u002Fstrong>:\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight javascript\">\u003Ccode>\u003Cspan class=\"o\"><\u003C\u002Fspan>\u003Cspan class=\"nx\">template\u003C\u002Fspan>\u003Cspan class=\"o\">>\u003C\u002Fspan>\n  \u003Cspan class=\"o\"><\u003C\u002Fspan>\u003Cspan class=\"nx\">div\u003C\u002Fspan> \u003Cspan class=\"nx\">v\u003C\u002Fspan>\u003Cspan class=\"o\">-\u003C\u002Fspan>\u003Cspan class=\"k\">if\u003C\u002Fspan>\u003Cspan class=\"o\">=\u003C\u002Fspan>\u003Cspan class=\"dl\">\"\u003C\u002Fspan>\u003Cspan class=\"s2\">loading\u003C\u002Fspan>\u003Cspan class=\"dl\">\"\u003C\u002Fspan> \u003Cspan class=\"kd\">class\u003C\u002Fspan>\u003Cspan class=\"o\">=\u003C\u002Fspan>\u003Cspan class=\"dl\">\"\u003C\u002Fspan>\u003Cspan class=\"s2\">loading-page\u003C\u002Fspan>\u003Cspan class=\"dl\">\"\u003C\u002Fspan>\u003Cspan class=\"o\">>\u003C\u002Fspan>\n    \u003Cspan class=\"o\"><\u003C\u002Fspan>\u003Cspan class=\"nx\">p\u003C\u002Fspan>\u003Cspan class=\"o\">>\u003C\u002Fspan>\u003Cspan class=\"nx\">Loading\u003C\u002Fspan>\u003Cspan class=\"p\">...\u003C\u002Fspan>\u003Cspan class=\"o\"><\u003C\u002Fspan>\u003Cspan class=\"sr\">\u002Fp\u003C\u002Fspan>\u003Cspan class=\"err\">>\n\u003C\u002Fspan>  \u003Cspan class=\"o\"><\u003C\u002Fspan>\u003Cspan class=\"sr\">\u002Fdiv\u003C\u002Fspan>\u003Cspan class=\"err\">>\n\u003C\u002Fspan>\u003Cspan class=\"o\"><\u003C\u002Fspan>\u003Cspan class=\"sr\">\u002Ftemplate\u003C\u002Fspan>\u003Cspan class=\"err\">>\n\u003C\u002Fspan>\n\u003Cspan class=\"o\"><\u003C\u002Fspan>\u003Cspan class=\"nx\">script\u003C\u002Fspan>\u003Cspan class=\"o\">>\u003C\u002Fspan>\n  \u003Cspan class=\"k\">export\u003C\u002Fspan> \u003Cspan class=\"k\">default\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n    \u003Cspan class=\"na\">data\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"p\">()\u003C\u002Fspan> \u003Cspan class=\"o\">=>\u003C\u002Fspan> \u003Cspan class=\"p\">({\u003C\u002Fspan>\n      \u003Cspan class=\"na\">loading\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"kc\">false\u003C\u002Fspan>\n    \u003Cspan class=\"p\">}),\u003C\u002Fspan>\n    \u003Cspan class=\"na\">methods\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n      \u003Cspan class=\"nf\">start\u003C\u002Fspan>\u003Cspan class=\"p\">()\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n        \u003Cspan class=\"k\">this\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">loading\u003C\u002Fspan> \u003Cspan class=\"o\">=\u003C\u002Fspan> \u003Cspan class=\"kc\">true\u003C\u002Fspan>\n      \u003Cspan class=\"p\">},\u003C\u002Fspan>\n      \u003Cspan class=\"nf\">finish\u003C\u002Fspan>\u003Cspan class=\"p\">()\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n        \u003Cspan class=\"k\">this\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">loading\u003C\u002Fspan> \u003Cspan class=\"o\">=\u003C\u002Fspan> \u003Cspan class=\"kc\">false\u003C\u002Fspan>\n      \u003Cspan class=\"p\">}\u003C\u002Fspan>\n    \u003Cspan class=\"p\">}\u003C\u002Fspan>\n  \u003Cspan class=\"p\">}\u003C\u002Fspan>\n\u003Cspan class=\"o\"><\u003C\u002Fspan>\u003Cspan class=\"sr\">\u002Fscript\u003C\u002Fspan>\u003Cspan class=\"err\">>\n\u003C\u002Fspan>\n\u003Cspan class=\"o\"><\u003C\u002Fspan>\u003Cspan class=\"nx\">style\u003C\u002Fspan> \u003Cspan class=\"nx\">scoped\u003C\u002Fspan>\u003Cspan class=\"o\">>\u003C\u002Fspan>\n  \u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">loading\u003C\u002Fspan>\u003Cspan class=\"o\">-\u003C\u002Fspan>\u003Cspan class=\"nx\">page\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n    \u003Cspan class=\"nl\">position\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"nx\">fixed\u003C\u002Fspan>\u003Cspan class=\"p\">;\u003C\u002Fspan>\n    \u003Cspan class=\"nl\">top\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"mi\">0\u003C\u002Fspan>\u003Cspan class=\"p\">;\u003C\u002Fspan>\n    \u003Cspan class=\"nl\">left\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"mi\">0\u003C\u002Fspan>\u003Cspan class=\"p\">;\u003C\u002Fspan>\n    \u003Cspan class=\"nl\">width\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"mi\">100\u003C\u002Fspan>\u003Cspan class=\"o\">%\u003C\u002Fspan>\u003Cspan class=\"p\">;\u003C\u002Fspan>\n    \u003Cspan class=\"nl\">height\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"mi\">100\u003C\u002Fspan>\u003Cspan class=\"o\">%\u003C\u002Fspan>\u003Cspan class=\"p\">;\u003C\u002Fspan>\n    \u003Cspan class=\"nl\">background\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"nf\">rgba\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"mi\">255\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan> \u003Cspan class=\"mi\">255\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan> \u003Cspan class=\"mi\">255\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan> \u003Cspan class=\"mf\">0.8\u003C\u002Fspan>\u003Cspan class=\"p\">);\u003C\u002Fspan>\n    \u003Cspan class=\"nx\">text\u003C\u002Fspan>\u003Cspan class=\"o\">-\u003C\u002Fspan>\u003Cspan class=\"nx\">align\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"nx\">center\u003C\u002Fspan>\u003Cspan class=\"p\">;\u003C\u002Fspan>\n    \u003Cspan class=\"nx\">padding\u003C\u002Fspan>\u003Cspan class=\"o\">-\u003C\u002Fspan>\u003Cspan class=\"nx\">top\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"mi\">200\u003C\u002Fspan>\u003Cspan class=\"nx\">px\u003C\u002Fspan>\u003Cspan class=\"p\">;\u003C\u002Fspan>\n    \u003Cspan class=\"nx\">font\u003C\u002Fspan>\u003Cspan class=\"o\">-\u003C\u002Fspan>\u003Cspan class=\"nx\">size\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"mi\">30\u003C\u002Fspan>\u003Cspan class=\"nx\">px\u003C\u002Fspan>\u003Cspan class=\"p\">;\u003C\u002Fspan>\n    \u003Cspan class=\"nx\">font\u003C\u002Fspan>\u003Cspan class=\"o\">-\u003C\u002Fspan>\u003Cspan class=\"nx\">family\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"nx\">sans\u003C\u002Fspan>\u003Cspan class=\"o\">-\u003C\u002Fspan>\u003Cspan class=\"nx\">serif\u003C\u002Fspan>\u003Cspan class=\"p\">;\u003C\u002Fspan>\n  \u003Cspan class=\"p\">}\u003C\u002Fspan>\n\u003Cspan class=\"o\"><\u003C\u002Fspan>\u003Cspan class=\"sr\">\u002Fstyle\u003C\u002Fspan>\u003Cspan class=\"err\">>\n\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>Then go to \u003Cstrong>nuxt.config.js\u003C\u002Fstrong> file and add your custom loading component to the \u003Cstrong>loading\u003C\u002Fstrong> property.\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight javascript\">\u003Ccode>\u003Cspan class=\"k\">export\u003C\u002Fspan> \u003Cspan class=\"k\">default\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n  \u003Cspan class=\"na\">loading\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">~\u002Fcomponents\u002FLoadingBar.vue\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\n\u003Cspan class=\"p\">}\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>It’s very simple, right? Now you can see your own custom loading bar between routes changing.\u003C\u002Fp>\n\u003Ch2>\n  \u003Ca name=\"useful-links\" href=\"#useful-links\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  Useful Links:\u003Cbr \u002F>\n\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>Nuxt \u003Ca href=\"https:\u002F\u002Fnuxtjs.org\u002Fdocs\u002F2.x\u002Ffeatures\u002Floading\" target=\"_blank\" rel=\"noopener noreferrer\">Loading Docs.\u003C\u002Fa>\n\u003C\u002Fli>\n\u003Cli>Custom loading component \u003Ca href=\"https:\u002F\u002Fnuxtjs.org\u002Fexamples\u002Fcustom-loading-component\" target=\"_blank\" rel=\"noopener noreferrer\">example.\u003C\u002Fa>\n\u003C\u002Fli>\n\u003C\u002Ful>\n",{"rendered":177,"protected":45},"\u003Cp>Are you using Nuxt.js on your current project as front-end framework? then you have a great news, Nux…\u003C\u002Fp>\n",55,{"footnotes":6},[48],[4,123],[183,40,60,61,62,126,63,64,66,127],"post-54","https:\u002F\u002Flab.aiarnob.com\u002Fwp-content\u002Fuploads\u002F2021\u002F05\u002Fdevto-713175-cover.webp",{"edited_at":69,"published_at":186,"reactions":187,"comments":48,"reading_time":133,"body_markdown":188},"2021-05-31T09:31:46Z",8,"Are you using Nuxt.js on your current project as front-end framework? then you have a great news, Nuxt.js Out of the box gives you its own loading progress bar component that's shown between routes. You can do anything with the Nuxt.js loading progress bar, customize it, disable it, or can create your own **loading** progress bar.\n\n## Active & Customize Progress Bar:\nYou can activate the progress bar on your Nuxt.js application by adding the **loading** property of the **nuxt.config.js** inside the `export default { \u002F\u002Fcode here }` with the corresponding properties.\n\nTo set a green progress bar with a height of 5px, add the following code inside your project **nuxt.config.js** file.\n\n```javascript\nexport default {\n  loading: {\n    color: 'green',\n    height: '5px',\n    throttle: 0\n  }\n}\n```\nYou can customize many things, you can change color(color name\u002Fcolor hex code), height, duration, direction for **rtl** sites, keep animating progress bar when loading takes longer than duration.\n\n```javascript\nexport default {\n  loading: {\n    color: 'green',\n    height: '5px',\n    duration: 1000,\n    rtl: true,\n    continuous: true\n  }\n}\n```\n\n## Disable the Progress Bar:\nYou can disable the progress bar globally or locally. If you want to disable the progress bar globally then add **loading: false** in your **nuxt.config.js** file:\n```javascript\nexport default {\n  loading: false\n}\n```\n\nYour can also disable the progress bar for specific page.  Add **loading: false** in the specific page.\n```javascript\n\u003Ctemplate>\n  \u003Ch1>Contact Us Page\u003C\u002Fh1>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\n  export default {\n    loading: false\n  }\n\u003C\u002Fscript>\n```\n\n##Custom Loading Progress Bar:\nYou can also create your own custom loading progress bar. Inside the component directory create your custom component in **LoadingBar.vue**:\n```javascript\n\u003Ctemplate>\n  \u003Cdiv v-if=\"loading\" class=\"loading-page\">\n    \u003Cp>Loading...\u003C\u002Fp>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\n  export default {\n    data: () => ({\n      loading: false\n    }),\n    methods: {\n      start() {\n        this.loading = true\n      },\n      finish() {\n        this.loading = false\n      }\n    }\n  }\n\u003C\u002Fscript>\n\n\u003Cstyle scoped>\n  .loading-page {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background: rgba(255, 255, 255, 0.8);\n    text-align: center;\n    padding-top: 200px;\n    font-size: 30px;\n    font-family: sans-serif;\n  }\n\u003C\u002Fstyle>\n```\n\nThen go to **nuxt.config.js** file and add your custom loading component to the **loading** property.\n```javascript\nexport default {\n  loading: '~\u002Fcomponents\u002FLoadingBar.vue'\n}\n```\nIt’s very simple, right? Now you can see your own custom loading bar between routes changing.\n\n##Useful Links:\n* Nuxt [Loading Docs.](https:\u002F\u002Fnuxtjs.org\u002Fdocs\u002F2.x\u002Ffeatures\u002Floading)\n* Custom loading component [example.](https:\u002F\u002Fnuxtjs.org\u002Fexamples\u002Fcustom-loading-component)",{"self":190,"collection":195,"about":197,"author":199,"replies":201,"version-history":204,"wp:featuredmedia":207,"wp:attachment":210,"wp:term":213,"curies":218},[191],{"href":192,"targetHints":193},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts\u002F54",{"allow":194},[17],[196],{"href":83},[198],{"href":86},[200],{"embeddable":31,"href":89},[202],{"embeddable":31,"href":203},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fcomments?post=54",[205],{"count":49,"href":206},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts\u002F54\u002Frevisions",[208],{"embeddable":31,"href":209},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fmedia\u002F55",[211],{"href":212},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fmedia?parent=54",[214,216],{"taxonomy":101,"embeddable":31,"href":215},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fcategories?post=54",{"taxonomy":9,"embeddable":31,"href":217},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Ftags?post=54",[219],{"name":29,"href":30,"templated":31},1781010867690]