[{"data":1,"prerenderedAt":14184},["Reactive",2],{"content-query-TItaz9imCb":3,"keep-reading:/blog/design-systems-are-agentic-infrastructure-now":485},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"created_at":10,"author":11,"categories":12,"draft":6,"head":16,"body":26,"_type":480,"_id":481,"_source":482,"_file":483,"_extension":484},"/blog/design-systems-are-agentic-infrastructure-now","blog",false,"","Design systems are agentic infrastructure now","In the AI era, your design system's most demanding user is an agent that can't read between the lines. Tokens, components, and written rules are its API now.","2026-09-23","Dulan Katukurundage",[13,14,15],"Design Systems","AI","Frontend",{"meta":17},[18,21,23],{"name":19,"content":20},"keywords","design systems, AI era, agentic design systems, design tokens, AGENTS.md, CLAUDE.md, MCP, coding agents",{"name":22,"content":11},"author",{"name":24,"content":25},"copyright","©2026 Dulan Katukurundage",{"type":27,"children":28,"toc":472},"root",[29,62,78,91,96,103,108,122,127,139,145,150,155,191,225,271,299,304,310,322,335,340,346,351,368,431,441,447,452,457,462,467],{"type":30,"tag":31,"props":32,"children":33},"element","p",{},[34,37,44,46,52,54,60],{"type":35,"value":36},"text","I've been building UI with AI tools since the early Cursor days, and a lot more seriously over the last two years: Copilot, Claude Code, Cursor, opencode, etc., and no matter which tool I'm using, UI work fails in basically the same way. Ask an agent for a settings page, and you get something that looks fine for about ten seconds. Then you notice the hex codes it pulled out of its ass, the third ",{"type":30,"tag":38,"props":39,"children":41},"code",{"className":40},[],[42],{"type":35,"value":43},"Card",{"type":35,"value":45}," component it wrote when two already existed, the ",{"type":30,"tag":38,"props":47,"children":49},{"className":48},[],[50],{"type":35,"value":51},"div",{"type":35,"value":53}," with ",{"type":30,"tag":38,"props":55,"children":57},{"className":56},[],[58],{"type":35,"value":59},"role=\"button\"",{"type":35,"value":61}," slapped on it, and (if you didn't give it much direction) Inter on a purple gradient.",{"type":30,"tag":31,"props":63,"children":64},{},[65,67,76],{"type":35,"value":66},"Anthropic actually has a name for that last one: ",{"type":30,"tag":68,"props":69,"children":73},"a",{"href":70,"rel":71},"https://claude.com/resources/articles/improving-frontend-design-through-skills",[72],"nofollow",[74],{"type":35,"value":75},"distributional convergence",{"type":35,"value":77},". \"Safe design choices\" dominate web training data, so without direction the model samples from the middle, and a landing page \"will almost always conform to Inter fonts, purple gradients on white backgrounds, and minimal animations.\" It's nice to have that in writing, honestly.",{"type":30,"tag":31,"props":79,"children":80},{},[81,83,89],{"type":35,"value":82},"So the model isn't dumb. It's uninformed. It knows what a button is; it just has no idea what ",{"type":30,"tag":84,"props":85,"children":86},"em",{},[87],{"type":35,"value":88},"your",{"type":35,"value":90}," button is, because nothing told it.",{"type":30,"tag":31,"props":92,"children":93},{},[94],{"type":35,"value":95},"That's the thing I've been chewing on after reading a pile of recent writing on design systems, and I think it comes down to this: in the agentic era, a design system isn't a library for humans anymore. It's infrastructure for agents. (And no, AI didn't make design systems obsolete. If anything, it's the opposite.)",{"type":30,"tag":97,"props":98,"children":100},"h2",{"id":99},"ai-is-a-new-user-and-it-cant-read-between-the-lines",[101],{"type":35,"value":102},"AI is a new user, and it can't read between the lines",{"type":30,"tag":31,"props":104,"children":105},{},[106],{"type":35,"value":107},"Design systems were always written for people. A developer who's been on the team for six months knows the destructive button goes in the confirmation dialog, knows you don't put two primary buttons side by side, and knows the spacing scale skips a value for a reason somebody explained in a Slack thread years ago. None of that is written down. It never needed to be, because humans infer.",{"type":30,"tag":31,"props":109,"children":110},{},[111,113,120],{"type":35,"value":112},"A component library used to communicate a lot just by existing. You look at the button, you look at where it's used, and you get it. An agent doesn't get it. Figma's Zoe Adelman says AI ",{"type":30,"tag":68,"props":114,"children":117},{"href":115,"rel":116},"https://www.figma.com/blog/5-shifts-redefining-design-systems-in-the-ai-era/",[72],[118],{"type":35,"value":119},"\"doesn't inherently know\"",{"type":35,"value":121}," what designers pick up from understanding the brand and the business, and that systems now need to document \"anything you might expect designers to infer without having it explicitly written in the system.\"",{"type":30,"tag":31,"props":123,"children":124},{},[125],{"type":35,"value":126},"An agent will happily generate a delete button in seconds. What it won't know is that in your product, a delete button inside an alert uses the danger token and always sits next to a cancel. That's the whole problem in one example.",{"type":30,"tag":31,"props":128,"children":129},{},[130,132,137],{"type":35,"value":131},"So AI is effectively a ",{"type":30,"tag":84,"props":133,"children":134},{},[135],{"type":35,"value":136},"new user",{"type":35,"value":138}," of your design system, one that needs everything spelled out in a format it can actually parse. And it's a weird user. It's incredibly fast, it never gets tired, and it has zero institutional memory. Every session starts from nothing, so whatever isn't in the context gets filled in with the statistical average of the internet. Which is exactly how you end up with the purple gradient.",{"type":30,"tag":97,"props":140,"children":142},{"id":141},"your-design-system-is-an-api-now",[143],{"type":35,"value":144},"Your design system is an API now",{"type":30,"tag":31,"props":146,"children":147},{},[148],{"type":35,"value":149},"I've started thinking of a design system as the API agents use to build your product. I know that sounds like conference-talk hyperbole. But the more I've worked with agents on UI, the more I think it's just accurate. An API is a contract: here's what exists, here's what you can pass in, here's what you get back. That's exactly what an agent needs from your system.",{"type":30,"tag":31,"props":151,"children":152},{},[153],{"type":35,"value":154},"An agent-ready system breaks down into roughly four layers.",{"type":30,"tag":31,"props":156,"children":157},{},[158,164,166,172,174,180,182,189],{"type":30,"tag":159,"props":160,"children":161},"strong",{},[162],{"type":35,"value":163},"Tokens, with names that mean something.",{"type":35,"value":165}," ",{"type":30,"tag":38,"props":167,"children":169},{"className":168},[],[170],{"type":35,"value":171},"red-500",{"type":35,"value":173}," tells an agent what a color is. ",{"type":30,"tag":38,"props":175,"children":177},{"className":176},[],[178],{"type":35,"value":179},"color.bg.danger",{"type":35,"value":181}," tells it when to use it. Semantic names are the cheapest context you can give a model, and for an agent they matter a lot more than the values do. There's also finally a standard format: the Design Tokens Community Group shipped its ",{"type":30,"tag":68,"props":183,"children":186},{"href":184,"rel":185},"https://www.w3.org/community/design-tokens/2025/10/28/design-tokens-specification-reaches-first-stable-version/",[72],[187],{"type":35,"value":188},"first stable spec (2025.10)",{"type":35,"value":190}," last October. It's a Community Group spec rather than an official W3C standard, but it's stable and vendor-neutral, which is what you want from a file every tool (and every agent) is going to read.",{"type":30,"tag":31,"props":192,"children":193},{},[194,199,201,207,209,215,217,223],{"type":30,"tag":159,"props":195,"children":196},{},[197],{"type":35,"value":198},"Components that constrain.",{"type":35,"value":200}," If your ",{"type":30,"tag":38,"props":202,"children":204},{"className":203},[],[205],{"type":35,"value":206},"Button",{"type":35,"value":208}," only accepts ",{"type":30,"tag":38,"props":210,"children":212},{"className":211},[],[213],{"type":35,"value":214},"variant=\"primary\" | \"secondary\"",{"type":35,"value":216},", the agent can't invent ",{"type":30,"tag":38,"props":218,"children":220},{"className":219},[],[221],{"type":35,"value":222},"variant=\"kinda-red\"",{"type":35,"value":224},". Typed props are guardrails. One component per job matters too, because every near-duplicate is one more option for the agent to pick wrong.",{"type":30,"tag":31,"props":226,"children":227},{},[228,233,235,246,248,254,256,261,262,269],{"type":30,"tag":159,"props":229,"children":230},{},[231],{"type":35,"value":232},"Rules, written down.",{"type":35,"value":234}," Tokens and components say what exists; rules say when to use what. ",{"type":30,"tag":68,"props":236,"children":239},{"href":237,"rel":238},"https://agents.md/",[72],[240],{"type":30,"tag":38,"props":241,"children":243},{"className":242},[],[244],{"type":35,"value":245},"AGENTS.md",{"type":35,"value":247}," (used by over 60k open-source projects and now stewarded by the Agentic AI Foundation under the Linux Foundation) and ",{"type":30,"tag":38,"props":249,"children":251},{"className":250},[],[252],{"type":35,"value":253},"CLAUDE.md",{"type":35,"value":255}," are where these go. Keep them short and testable: use semantic tokens only, check for an existing component before making a new one, extend instead of duplicating, etc. Anthropic's docs suggest keeping a ",{"type":30,"tag":38,"props":257,"children":259},{"className":258},[],[260],{"type":35,"value":253},{"type":35,"value":165},{"type":30,"tag":68,"props":263,"children":266},{"href":264,"rel":265},"https://code.claude.com/docs/en/memory",[72],[267],{"type":35,"value":268},"under 200 lines",{"type":35,"value":270},", which is a good forcing function.",{"type":30,"tag":31,"props":272,"children":273},{},[274,279,281,288,290,297],{"type":30,"tag":159,"props":275,"children":276},{},[277],{"type":35,"value":278},"A way in.",{"type":35,"value":280}," Agents reach the system through files in the repo and through MCP servers (the protocol agents use to pull context out of other tools). Figma has an ",{"type":30,"tag":68,"props":282,"children":285},{"href":283,"rel":284},"https://help.figma.com/hc/en-us/articles/32132100833559",[72],[286],{"type":35,"value":287},"MCP server",{"type":35,"value":289}," (still in beta), and Storybook 10.3 added ",{"type":30,"tag":68,"props":291,"children":294},{"href":292,"rel":293},"https://storybook.js.org/docs/ai",[72],[295],{"type":35,"value":296},"one for React",{"type":35,"value":298}," (labeled a preview), so an agent can query the components and stories you already have before it invents new ones.",{"type":30,"tag":31,"props":300,"children":301},{},[302],{"type":35,"value":303},"One caveat on that last layer: don't just point an MCP server at your existing Markdown docs and call it done. Long prose docs burn tokens, and they leave the agent digging the actual contract (props, variants, states) out of paragraphs written for humans. I think a structured description per component, in something like JSON, is the better fit. Prose is for humans. Contracts are for machines.",{"type":30,"tag":97,"props":305,"children":307},{"id":306},"the-repo-is-the-source-of-truth",[308],{"type":35,"value":309},"The repo is the source of truth",{"type":30,"tag":31,"props":311,"children":312},{},[313,315,320],{"type":35,"value":314},"The other shift is ",{"type":30,"tag":84,"props":316,"children":317},{},[318],{"type":35,"value":319},"where",{"type":35,"value":321}," the system lives. I think the codebase should be the source of truth for what actually ships, with Figma as the place for exploring ideas and for working with people who don't live in the code. Mostly because agents read repos. Tokens sitting in a Figma library are invisible to Claude Code unless something bridges them over. Tokens in a file next to the components are just there.",{"type":30,"tag":31,"props":323,"children":324},{},[325,327,333],{"type":35,"value":326},"That also changes what the real risk is. It's not that designers lose Figma. It's that now everyone can build. When several people can each ask an agent for a card, a modal, or a nav pattern, you end up with five slightly different modals, each fine on its own, pulling the product apart a few pixels at a time. Figma's Tara Nadella ",{"type":30,"tag":68,"props":328,"children":330},{"href":115,"rel":329},[72],[331],{"type":35,"value":332},"said it in six words",{"type":35,"value":334}," at Schema 2025: \"Speed without direction leads to divergence.\"",{"type":30,"tag":31,"props":336,"children":337},{},[338],{"type":35,"value":339},"The design system is the direction.",{"type":30,"tag":97,"props":341,"children":343},{"id":342},"where-id-pump-the-brakes",[344],{"type":35,"value":345},"Where I'd pump the brakes",{"type":30,"tag":31,"props":347,"children":348},{},[349],{"type":35,"value":350},"I'm bought in on the framing. But a lot of the talk about agentic design systems runs ahead of what I'd actually trust.",{"type":30,"tag":31,"props":352,"children":353},{},[354,359,361,366],{"type":30,"tag":159,"props":355,"children":356},{},[357],{"type":35,"value":358},"Your rules file is a suggestion, not a guardrail.",{"type":35,"value":360}," Anthropic's own docs say Claude treats ",{"type":30,"tag":38,"props":362,"children":364},{"className":363},[],[365],{"type":35,"value":253},{"type":35,"value":367}," as context, not enforced configuration. In my experience, agents follow rules files most of the time, which is not the same as all of the time. So anything that actually matters needs a check that fails loudly: a lint rule that rejects raw hex values, contrast checks on every PR, visual diffs against a reference page, etc.",{"type":30,"tag":31,"props":369,"children":370},{},[371,376,378,383,385,390,392,398,400,407,409,416,418,423,424,429],{"type":30,"tag":159,"props":372,"children":373},{},[374],{"type":35,"value":375},"Don't trust AI with accessibility.",{"type":35,"value":377}," This is the one that bites hardest. Agents love putting ",{"type":30,"tag":38,"props":379,"children":381},{"className":380},[],[382],{"type":35,"value":59},{"type":35,"value":384}," on a ",{"type":30,"tag":38,"props":386,"children":388},{"className":387},[],[389],{"type":35,"value":51},{"type":35,"value":391}," and calling it a day, without the keyboard handling and focus behavior a real ",{"type":30,"tag":38,"props":393,"children":395},{"className":394},[],[396],{"type":35,"value":397},"\u003Cbutton>",{"type":35,"value":399}," gives you for free. The ",{"type":30,"tag":68,"props":401,"children":404},{"href":402,"rel":403},"https://www.w3.org/TR/using-aria/#rule1",[72],[405],{"type":35,"value":406},"first rule of ARIA",{"type":35,"value":408}," is basically \"use the native element if one exists\", and agents ignore it constantly. The fix, I think, is to make accessibility the component library's job: focus traps, keyboard listeners, and ARIA live in tested components, and the agent only composes them. And run ",{"type":30,"tag":68,"props":410,"children":413},{"href":411,"rel":412},"https://playwright.dev/docs/accessibility-testing",[72],[414],{"type":35,"value":415},"axe in your Playwright tests",{"type":35,"value":417}," so the obvious stuff (missing labels, bad contrast, duplicate IDs) fails CI instead of shipping. Just don't treat a green run as proof: Playwright's own docs say \"Automated testing cannot detect all types of WCAG violations,\" and a ",{"type":30,"tag":38,"props":419,"children":421},{"className":420},[],[422],{"type":35,"value":51},{"type":35,"value":53},{"type":30,"tag":38,"props":425,"children":427},{"className":426},[],[428],{"type":35,"value":59},{"type":35,"value":430}," that ignores the keyboard is exactly the kind of thing that can slip through. If your system relies on the agent getting a11y right every time, it's going to get it wrong eventually.",{"type":30,"tag":31,"props":432,"children":433},{},[434,439],{"type":30,"tag":159,"props":435,"children":436},{},[437],{"type":35,"value":438},"Humans keep the strategic calls.",{"type":35,"value":440}," AI is genuinely good at the mechanical parts. Theming tools will now generate a full set of global, alias, and component tokens from a single prompt, and that's actually useful. But brand fit, readability, and accessibility compliance stay with people. Agents can execute a design system. Deciding what it's for is still our job.",{"type":30,"tag":97,"props":442,"children":444},{"id":443},"conclusion",[445],{"type":35,"value":446},"Conclusion",{"type":30,"tag":31,"props":448,"children":449},{},[450],{"type":35,"value":451},"If you're wondering where to start: plant seeds, don't buy trees. It's tempting to watch the conference demos and want a fully autonomous agent that fixes everything on day one, but that only works on top of boring foundations: consistent naming, semantic tokens, components with typed props, and a short rules file. Skip those and the agent just reproduces your mess, faster.",{"type":30,"tag":31,"props":453,"children":454},{},[455],{"type":35,"value":456},"Don't over-formalize either. Start lean, with what your product already repeats (colors, type, spacing, buttons, forms, navigation) and let the rest firm up as the product does. A forty-page token taxonomy for a brand that's still changing is just more stuff for the agent to get wrong.",{"type":30,"tag":31,"props":458,"children":459},{},[460],{"type":35,"value":461},"I'll also admit a lot of this is moving fast. Figma's MCP server is still in beta, Storybook's is a React-only preview, and plenty of the \"agentic design system\" writing I've read is closer to a pitch than a practice. Some of this post will probably look dated within a year.",{"type":30,"tag":31,"props":463,"children":464},{},[465],{"type":35,"value":466},"But I'm fairly confident about the core of it. The agent is going to read your design system whether you wrote it for one or not.",{"type":30,"tag":31,"props":468,"children":469},{},[470],{"type":35,"value":471},"Write it for the agent. The humans will be fine.",{"title":7,"searchDepth":473,"depth":473,"links":474},2,[475,476,477,478,479],{"id":99,"depth":473,"text":102},{"id":141,"depth":473,"text":144},{"id":306,"depth":473,"text":309},{"id":342,"depth":473,"text":345},{"id":443,"depth":473,"text":446},"markdown","content:blog:design-systems-are-agentic-infrastructure-now.md","content","blog/design-systems-are-agentic-infrastructure-now.md","md",[486,8442],{"_path":487,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":488,"description":489,"created_at":490,"author":11,"categories":491,"banner":496,"banner_alt":497,"draft":6,"head":498,"body":504,"_type":480,"_id":8440,"_source":482,"_file":8441,"_extension":484},"/blog/msal-authentication-in-vue-3","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",[492,493,494,495],"Vue","Authentication","Azure","TypeScript","/images/project-banners/vue3-msal-plugin-banner.webp","vue3-msal-plugin banner",{"meta":499},[500,502,503],{"name":19,"content":501},"Vue 3, MSAL, Microsoft Entra ID, Azure AD, Authentication, TypeScript, Nuxt, msal-browser",{"name":22,"content":11},{"name":24,"content":25},{"type":27,"children":505,"toc":8416},[506,527,532,557,562,568,598,642,648,653,673,678,734,752,757,769,788,808,821,890,918,927,933,963,968,2165,2170,2187,2199,2218,2269,2284,2290,2300,2379,2425,3043,3048,3053,3058,3064,3145,3165,3170,3562,3583,3589,3602,4022,4057,4079,4115,4134,4195,4210,4216,4234,4968,5010,5016,5021,5187,5192,5756,5767,5772,6050,6075,6081,6112,6133,6138,6837,6849,6868,7638,7650,7939,7944,7950,7976,7982,7987,7989,8211,8237,8265,8271,8286,8320,8326,8331,8344,8363,8376,8388,8394,8399,8405,8410],{"type":30,"tag":31,"props":507,"children":508},{},[509,511,517,519,525],{"type":35,"value":510},"Wiring Microsoft Entra ID into a Vue 3 app takes more code than you'd expect. ",{"type":30,"tag":38,"props":512,"children":514},{"className":513},[],[515],{"type":35,"value":516},"@azure/msal-browser",{"type":35,"value":518}," hands you a ",{"type":30,"tag":38,"props":520,"children":522},{"className":521},[],[523],{"type":35,"value":524},"PublicClientApplication",{"type":35,"value":526}," and a set of promises. What it doesn't hand you is anything reactive.",{"type":30,"tag":31,"props":528,"children":529},{},[530],{"type":35,"value":531},"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":30,"tag":31,"props":533,"children":534},{},[535,537,548,550,555],{"type":35,"value":536},"I wrote ",{"type":30,"tag":68,"props":538,"children":541},{"href":539,"rel":540},"https://www.npmjs.com/package/vue3-msal-plugin",[72],[542],{"type":30,"tag":38,"props":543,"children":545},{"className":544},[],[546],{"type":35,"value":547},"vue3-msal-plugin",{"type":35,"value":549}," because I was rewriting that layer every time. It wraps ",{"type":30,"tag":38,"props":551,"children":553},{"className":552},[],[554],{"type":35,"value":516},{"type":35,"value":556}," in Vue composables and leaves the MSAL API alone underneath.",{"type":30,"tag":31,"props":558,"children":559},{},[560],{"type":35,"value":561},"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":30,"tag":97,"props":563,"children":565},{"id":564},"what-you-need-first",[566],{"type":35,"value":567},"What you need first",{"type":30,"tag":569,"props":570,"children":571},"ul",{},[572,578,583,593],{"type":30,"tag":573,"props":574,"children":575},"li",{},[576],{"type":35,"value":577},"Node.js 20 or newer",{"type":30,"tag":573,"props":579,"children":580},{},[581],{"type":35,"value":582},"Vue 3.5 or newer",{"type":30,"tag":573,"props":584,"children":585},{},[586,591],{"type":30,"tag":38,"props":587,"children":589},{"className":588},[],[590],{"type":35,"value":516},{"type":35,"value":592}," 4 or newer",{"type":30,"tag":573,"props":594,"children":595},{},[596],{"type":35,"value":597},"A Microsoft Entra ID tenant you can register an application in",{"type":30,"tag":31,"props":599,"children":600},{},[601,603,608,610,616,618,624,626,632,634,640],{"type":35,"value":602},"Those are hard requirements. ",{"type":30,"tag":38,"props":604,"children":606},{"className":605},[],[607],{"type":35,"value":547},{"type":35,"value":609}," declares ",{"type":30,"tag":38,"props":611,"children":613},{"className":612},[],[614],{"type":35,"value":615},"vue@^3.5.0",{"type":35,"value":617}," and ",{"type":30,"tag":38,"props":619,"children":621},{"className":620},[],[622],{"type":35,"value":623},"@azure/msal-browser@^4.0.0",{"type":35,"value":625}," as peer dependencies, and sets ",{"type":30,"tag":38,"props":627,"children":629},{"className":628},[],[630],{"type":35,"value":631},"engines.node",{"type":35,"value":633}," to ",{"type":30,"tag":38,"props":635,"children":637},{"className":636},[],[638],{"type":35,"value":639},">=20",{"type":35,"value":641},".",{"type":30,"tag":97,"props":643,"children":645},{"id":644},"registering-the-app-in-microsoft-entra-id",[646],{"type":35,"value":647},"Registering the app in Microsoft Entra ID",{"type":30,"tag":31,"props":649,"children":650},{},[651],{"type":35,"value":652},"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":30,"tag":31,"props":654,"children":655},{},[656,658,665,667,672],{"type":35,"value":657},"Open the ",{"type":30,"tag":68,"props":659,"children":662},{"href":660,"rel":661},"https://entra.microsoft.com",[72],[663],{"type":35,"value":664},"Microsoft Entra admin center",{"type":35,"value":666},", then go to ",{"type":30,"tag":159,"props":668,"children":669},{},[670],{"type":35,"value":671},"Identity → Applications → App registrations → New registration",{"type":35,"value":641},{"type":30,"tag":31,"props":674,"children":675},{},[676],{"type":35,"value":677},"Three fields matter:",{"type":30,"tag":679,"props":680,"children":681},"ol",{},[682,692,709],{"type":30,"tag":573,"props":683,"children":684},{},[685,690],{"type":30,"tag":159,"props":686,"children":687},{},[688],{"type":35,"value":689},"Name.",{"type":35,"value":691}," Internal label only. Users never see it.",{"type":30,"tag":573,"props":693,"children":694},{},[695,700,702,707],{"type":30,"tag":159,"props":696,"children":697},{},[698],{"type":35,"value":699},"Supported account types.",{"type":35,"value":701}," Pick ",{"type":30,"tag":84,"props":703,"children":704},{},[705],{"type":35,"value":706},"Accounts in this organizational directory only",{"type":35,"value":708}," for a single-tenant app. Multi-tenant and personal-account options change your authority URL later.",{"type":30,"tag":573,"props":710,"children":711},{},[712,717,719,724,726,732],{"type":30,"tag":159,"props":713,"children":714},{},[715],{"type":35,"value":716},"Redirect URI.",{"type":35,"value":718}," Choose the ",{"type":30,"tag":159,"props":720,"children":721},{},[722],{"type":35,"value":723},"Single-page application",{"type":35,"value":725}," platform, and enter ",{"type":30,"tag":38,"props":727,"children":729},{"className":728},[],[730],{"type":35,"value":731},"http://localhost:5173",{"type":35,"value":733}," for a default Vite dev server.",{"type":30,"tag":31,"props":735,"children":736},{},[737,739,744,746,750],{"type":35,"value":738},"The platform choice is the one that silently breaks things. Selecting ",{"type":30,"tag":159,"props":740,"children":741},{},[742],{"type":35,"value":743},"Web",{"type":35,"value":745}," instead of ",{"type":30,"tag":159,"props":747,"children":748},{},[749],{"type":35,"value":723},{"type":35,"value":751}," 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":30,"tag":31,"props":753,"children":754},{},[755],{"type":35,"value":756},"Leave the implicit grant checkboxes alone. Implicit flow is a legacy option that MSAL v2 and later don't need.",{"type":30,"tag":31,"props":758,"children":759},{},[760,762,767],{"type":35,"value":761},"From the ",{"type":30,"tag":159,"props":763,"children":764},{},[765],{"type":35,"value":766},"Overview",{"type":35,"value":768}," page, copy two values:",{"type":30,"tag":569,"props":770,"children":771},{},[772,780],{"type":30,"tag":573,"props":773,"children":774},{},[775],{"type":30,"tag":159,"props":776,"children":777},{},[778],{"type":35,"value":779},"Application (client) ID",{"type":30,"tag":573,"props":781,"children":782},{},[783],{"type":30,"tag":159,"props":784,"children":785},{},[786],{"type":35,"value":787},"Directory (tenant) ID",{"type":30,"tag":31,"props":789,"children":790},{},[791,793,798,800,806],{"type":35,"value":792},"Then go to ",{"type":30,"tag":159,"props":794,"children":795},{},[796],{"type":35,"value":797},"API permissions",{"type":35,"value":799},". ",{"type":30,"tag":38,"props":801,"children":803},{"className":802},[],[804],{"type":35,"value":805},"User.Read",{"type":35,"value":807}," under Microsoft Graph delegated permissions is usually granted by default. You need it for the Graph section below.",{"type":30,"tag":31,"props":809,"children":810},{},[811,813,819],{"type":35,"value":812},"Put both IDs in a ",{"type":30,"tag":38,"props":814,"children":816},{"className":815},[],[817],{"type":35,"value":818},".env",{"type":35,"value":820}," file:",{"type":30,"tag":822,"props":823,"children":827},"pre",{"className":824,"code":825,"language":826,"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",[828],{"type":30,"tag":38,"props":829,"children":830},{"__ignoreMap":7},[831,865],{"type":30,"tag":832,"props":833,"children":836},"span",{"class":834,"line":835},"line",1,[837,843,849,854,860],{"type":30,"tag":832,"props":838,"children":840},{"style":839},"--shiki-default:#C0CAF5",[841],{"type":35,"value":842},"VITE_CLIENT_ID",{"type":30,"tag":832,"props":844,"children":846},{"style":845},"--shiki-default:#89DDFF",[847],{"type":35,"value":848},"=",{"type":30,"tag":832,"props":850,"children":851},{"style":845},[852],{"type":35,"value":853},"\"",{"type":30,"tag":832,"props":855,"children":857},{"style":856},"--shiki-default:#9ECE6A",[858],{"type":35,"value":859},"00000000-0000-0000-0000-000000000000",{"type":30,"tag":832,"props":861,"children":862},{"style":845},[863],{"type":35,"value":864},"\"\n",{"type":30,"tag":832,"props":866,"children":867},{"class":834,"line":473},[868,873,877,881,886],{"type":30,"tag":832,"props":869,"children":870},{"style":839},[871],{"type":35,"value":872},"VITE_AUTHORITY",{"type":30,"tag":832,"props":874,"children":875},{"style":845},[876],{"type":35,"value":848},{"type":30,"tag":832,"props":878,"children":879},{"style":845},[880],{"type":35,"value":853},{"type":30,"tag":832,"props":882,"children":883},{"style":856},[884],{"type":35,"value":885},"https://login.microsoftonline.com/11111111-1111-1111-1111-111111111111",{"type":30,"tag":832,"props":887,"children":888},{"style":845},[889],{"type":35,"value":864},{"type":30,"tag":31,"props":891,"children":892},{},[893,895,901,903,909,911,917],{"type":35,"value":894},"The authority is ",{"type":30,"tag":38,"props":896,"children":898},{"className":897},[],[899],{"type":35,"value":900},"https://login.microsoftonline.com/",{"type":35,"value":902}," plus your tenant ID for a single-tenant app. Multi-tenant apps use ",{"type":30,"tag":38,"props":904,"children":906},{"className":905},[],[907],{"type":35,"value":908},"/organizations",{"type":35,"value":910},", and apps accepting personal Microsoft accounts use ",{"type":30,"tag":38,"props":912,"children":914},{"className":913},[],[915],{"type":35,"value":916},"/common",{"type":35,"value":641},{"type":30,"tag":919,"props":920,"children":921},"info",{},[922],{"type":30,"tag":31,"props":923,"children":924},{},[925],{"type":35,"value":926},"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":30,"tag":97,"props":928,"children":930},{"id":929},"installing-and-registering-the-plugin",[931],{"type":35,"value":932},"Installing and registering the plugin",{"type":30,"tag":822,"props":934,"children":936},{"className":824,"code":935,"language":826,"meta":7,"style":7},"npm i vue3-msal-plugin @azure/msal-browser\n",[937],{"type":30,"tag":38,"props":938,"children":939},{"__ignoreMap":7},[940],{"type":30,"tag":832,"props":941,"children":942},{"class":834,"line":835},[943,948,953,958],{"type":30,"tag":832,"props":944,"children":945},{"style":839},[946],{"type":35,"value":947},"npm",{"type":30,"tag":832,"props":949,"children":950},{"style":856},[951],{"type":35,"value":952}," i",{"type":30,"tag":832,"props":954,"children":955},{"style":856},[956],{"type":35,"value":957}," vue3-msal-plugin",{"type":30,"tag":832,"props":959,"children":960},{"style":856},[961],{"type":35,"value":962}," @azure/msal-browser\n",{"type":30,"tag":31,"props":964,"children":965},{},[966],{"type":35,"value":967},"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":30,"tag":822,"props":969,"children":973},{"className":970,"code":971,"language":972,"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",[974],{"type":30,"tag":38,"props":975,"children":976},{"__ignoreMap":7},[977,986,1036,1087,1143,1184,1194,1228,1262,1270,1305,1323,1373,1418,1447,1476,1489,1506,1536,1548,1561,1569,1610,1618,1627,1666,1712,1757,1766,1774,1783,1825,1894,1937,1979,1988,2001,2009,2048,2083,2123],{"type":30,"tag":832,"props":978,"children":979},{"class":834,"line":835},[980],{"type":30,"tag":832,"props":981,"children":983},{"style":982},"--shiki-default:#51597D;--shiki-default-font-style:italic",[984],{"type":35,"value":985},"// src/main.ts\n",{"type":30,"tag":832,"props":987,"children":988},{"class":834,"line":473},[989,995,1001,1007,1012,1017,1022,1027,1031],{"type":30,"tag":832,"props":990,"children":992},{"style":991},"--shiki-default:#7DCFFF",[993],{"type":35,"value":994},"import",{"type":30,"tag":832,"props":996,"children":998},{"style":997},"--shiki-default:#9ABDF5",[999],{"type":35,"value":1000}," { ",{"type":30,"tag":832,"props":1002,"children":1004},{"style":1003},"--shiki-default:#0DB9D7",[1005],{"type":35,"value":1006},"createApp",{"type":30,"tag":832,"props":1008,"children":1009},{"style":997},[1010],{"type":35,"value":1011}," }",{"type":30,"tag":832,"props":1013,"children":1014},{"style":991},[1015],{"type":35,"value":1016}," from",{"type":30,"tag":832,"props":1018,"children":1019},{"style":845},[1020],{"type":35,"value":1021}," \"",{"type":30,"tag":832,"props":1023,"children":1024},{"style":856},[1025],{"type":35,"value":1026},"vue",{"type":30,"tag":832,"props":1028,"children":1029},{"style":845},[1030],{"type":35,"value":853},{"type":30,"tag":832,"props":1032,"children":1033},{"style":845},[1034],{"type":35,"value":1035},";\n",{"type":30,"tag":832,"props":1037,"children":1039},{"class":834,"line":1038},3,[1040,1044,1048,1053,1058,1063,1067,1071,1075,1079,1083],{"type":30,"tag":832,"props":1041,"children":1042},{"style":991},[1043],{"type":35,"value":994},{"type":30,"tag":832,"props":1045,"children":1046},{"style":997},[1047],{"type":35,"value":1000},{"type":30,"tag":832,"props":1049,"children":1050},{"style":1003},[1051],{"type":35,"value":1052},"msalPlugin",{"type":30,"tag":832,"props":1054,"children":1055},{"style":845},[1056],{"type":35,"value":1057},",",{"type":30,"tag":832,"props":1059,"children":1060},{"style":1003},[1061],{"type":35,"value":1062}," msalInstance",{"type":30,"tag":832,"props":1064,"children":1065},{"style":997},[1066],{"type":35,"value":1011},{"type":30,"tag":832,"props":1068,"children":1069},{"style":991},[1070],{"type":35,"value":1016},{"type":30,"tag":832,"props":1072,"children":1073},{"style":845},[1074],{"type":35,"value":1021},{"type":30,"tag":832,"props":1076,"children":1077},{"style":856},[1078],{"type":35,"value":547},{"type":30,"tag":832,"props":1080,"children":1081},{"style":845},[1082],{"type":35,"value":853},{"type":30,"tag":832,"props":1084,"children":1085},{"style":845},[1086],{"type":35,"value":1035},{"type":30,"tag":832,"props":1088,"children":1090},{"class":834,"line":1089},4,[1091,1095,1101,1105,1110,1114,1119,1123,1127,1131,1135,1139],{"type":30,"tag":832,"props":1092,"children":1093},{"style":991},[1094],{"type":35,"value":994},{"type":30,"tag":832,"props":1096,"children":1098},{"style":1097},"--shiki-default:#BB9AF7",[1099],{"type":35,"value":1100}," type",{"type":30,"tag":832,"props":1102,"children":1103},{"style":997},[1104],{"type":35,"value":1000},{"type":30,"tag":832,"props":1106,"children":1107},{"style":1003},[1108],{"type":35,"value":1109},"Configuration",{"type":30,"tag":832,"props":1111,"children":1112},{"style":845},[1113],{"type":35,"value":1057},{"type":30,"tag":832,"props":1115,"children":1116},{"style":1003},[1117],{"type":35,"value":1118}," AuthenticationResult",{"type":30,"tag":832,"props":1120,"children":1121},{"style":997},[1122],{"type":35,"value":1011},{"type":30,"tag":832,"props":1124,"children":1125},{"style":991},[1126],{"type":35,"value":1016},{"type":30,"tag":832,"props":1128,"children":1129},{"style":845},[1130],{"type":35,"value":1021},{"type":30,"tag":832,"props":1132,"children":1133},{"style":856},[1134],{"type":35,"value":516},{"type":30,"tag":832,"props":1136,"children":1137},{"style":845},[1138],{"type":35,"value":853},{"type":30,"tag":832,"props":1140,"children":1141},{"style":845},[1142],{"type":35,"value":1035},{"type":30,"tag":832,"props":1144,"children":1146},{"class":834,"line":1145},5,[1147,1151,1155,1160,1164,1168,1172,1176,1180],{"type":30,"tag":832,"props":1148,"children":1149},{"style":991},[1150],{"type":35,"value":994},{"type":30,"tag":832,"props":1152,"children":1153},{"style":997},[1154],{"type":35,"value":1000},{"type":30,"tag":832,"props":1156,"children":1157},{"style":1003},[1158],{"type":35,"value":1159},"EventType",{"type":30,"tag":832,"props":1161,"children":1162},{"style":997},[1163],{"type":35,"value":1011},{"type":30,"tag":832,"props":1165,"children":1166},{"style":991},[1167],{"type":35,"value":1016},{"type":30,"tag":832,"props":1169,"children":1170},{"style":845},[1171],{"type":35,"value":1021},{"type":30,"tag":832,"props":1173,"children":1174},{"style":856},[1175],{"type":35,"value":516},{"type":30,"tag":832,"props":1177,"children":1178},{"style":845},[1179],{"type":35,"value":853},{"type":30,"tag":832,"props":1181,"children":1182},{"style":845},[1183],{"type":35,"value":1035},{"type":30,"tag":832,"props":1185,"children":1187},{"class":834,"line":1186},6,[1188],{"type":30,"tag":832,"props":1189,"children":1191},{"emptyLinePlaceholder":1190},true,[1192],{"type":35,"value":1193},"\n",{"type":30,"tag":832,"props":1195,"children":1197},{"class":834,"line":1196},7,[1198,1202,1207,1211,1215,1220,1224],{"type":30,"tag":832,"props":1199,"children":1200},{"style":991},[1201],{"type":35,"value":994},{"type":30,"tag":832,"props":1203,"children":1204},{"style":1003},[1205],{"type":35,"value":1206}," App",{"type":30,"tag":832,"props":1208,"children":1209},{"style":991},[1210],{"type":35,"value":1016},{"type":30,"tag":832,"props":1212,"children":1213},{"style":845},[1214],{"type":35,"value":1021},{"type":30,"tag":832,"props":1216,"children":1217},{"style":856},[1218],{"type":35,"value":1219},"./App.vue",{"type":30,"tag":832,"props":1221,"children":1222},{"style":845},[1223],{"type":35,"value":853},{"type":30,"tag":832,"props":1225,"children":1226},{"style":845},[1227],{"type":35,"value":1035},{"type":30,"tag":832,"props":1229,"children":1231},{"class":834,"line":1230},8,[1232,1236,1241,1245,1249,1254,1258],{"type":30,"tag":832,"props":1233,"children":1234},{"style":991},[1235],{"type":35,"value":994},{"type":30,"tag":832,"props":1237,"children":1238},{"style":1003},[1239],{"type":35,"value":1240}," router",{"type":30,"tag":832,"props":1242,"children":1243},{"style":991},[1244],{"type":35,"value":1016},{"type":30,"tag":832,"props":1246,"children":1247},{"style":845},[1248],{"type":35,"value":1021},{"type":30,"tag":832,"props":1250,"children":1251},{"style":856},[1252],{"type":35,"value":1253},"./router",{"type":30,"tag":832,"props":1255,"children":1256},{"style":845},[1257],{"type":35,"value":853},{"type":30,"tag":832,"props":1259,"children":1260},{"style":845},[1261],{"type":35,"value":1035},{"type":30,"tag":832,"props":1263,"children":1265},{"class":834,"line":1264},9,[1266],{"type":30,"tag":832,"props":1267,"children":1268},{"emptyLinePlaceholder":1190},[1269],{"type":35,"value":1193},{"type":30,"tag":832,"props":1271,"children":1273},{"class":834,"line":1272},10,[1274,1280,1285,1290,1295,1300],{"type":30,"tag":832,"props":1275,"children":1277},{"style":1276},"--shiki-default:#9D7CD8;--shiki-default-font-style:italic",[1278],{"type":35,"value":1279},"const",{"type":30,"tag":832,"props":1281,"children":1282},{"style":1097},[1283],{"type":35,"value":1284}," msalConfig",{"type":30,"tag":832,"props":1286,"children":1287},{"style":845},[1288],{"type":35,"value":1289},":",{"type":30,"tag":832,"props":1291,"children":1292},{"style":839},[1293],{"type":35,"value":1294}," Configuration",{"type":30,"tag":832,"props":1296,"children":1297},{"style":845},[1298],{"type":35,"value":1299}," =",{"type":30,"tag":832,"props":1301,"children":1302},{"style":997},[1303],{"type":35,"value":1304}," {\n",{"type":30,"tag":832,"props":1306,"children":1308},{"class":834,"line":1307},11,[1309,1315,1319],{"type":30,"tag":832,"props":1310,"children":1312},{"style":1311},"--shiki-default:#73DACA",[1313],{"type":35,"value":1314},"  auth",{"type":30,"tag":832,"props":1316,"children":1317},{"style":845},[1318],{"type":35,"value":1289},{"type":30,"tag":832,"props":1320,"children":1321},{"style":997},[1322],{"type":35,"value":1304},{"type":30,"tag":832,"props":1324,"children":1326},{"class":834,"line":1325},12,[1327,1332,1336,1341,1345,1350,1354,1359,1363,1368],{"type":30,"tag":832,"props":1328,"children":1329},{"style":1311},[1330],{"type":35,"value":1331},"    clientId",{"type":30,"tag":832,"props":1333,"children":1334},{"style":845},[1335],{"type":35,"value":1289},{"type":30,"tag":832,"props":1337,"children":1338},{"style":991},[1339],{"type":35,"value":1340}," import",{"type":30,"tag":832,"props":1342,"children":1343},{"style":845},[1344],{"type":35,"value":641},{"type":30,"tag":832,"props":1346,"children":1347},{"style":991},[1348],{"type":35,"value":1349},"meta",{"type":30,"tag":832,"props":1351,"children":1352},{"style":845},[1353],{"type":35,"value":641},{"type":30,"tag":832,"props":1355,"children":1356},{"style":839},[1357],{"type":35,"value":1358},"env",{"type":30,"tag":832,"props":1360,"children":1361},{"style":845},[1362],{"type":35,"value":641},{"type":30,"tag":832,"props":1364,"children":1366},{"style":1365},"--shiki-default:#FF9E64",[1367],{"type":35,"value":842},{"type":30,"tag":832,"props":1369,"children":1370},{"style":845},[1371],{"type":35,"value":1372},",\n",{"type":30,"tag":832,"props":1374,"children":1376},{"class":834,"line":1375},13,[1377,1382,1386,1390,1394,1398,1402,1406,1410,1414],{"type":30,"tag":832,"props":1378,"children":1379},{"style":1311},[1380],{"type":35,"value":1381},"    authority",{"type":30,"tag":832,"props":1383,"children":1384},{"style":845},[1385],{"type":35,"value":1289},{"type":30,"tag":832,"props":1387,"children":1388},{"style":991},[1389],{"type":35,"value":1340},{"type":30,"tag":832,"props":1391,"children":1392},{"style":845},[1393],{"type":35,"value":641},{"type":30,"tag":832,"props":1395,"children":1396},{"style":991},[1397],{"type":35,"value":1349},{"type":30,"tag":832,"props":1399,"children":1400},{"style":845},[1401],{"type":35,"value":641},{"type":30,"tag":832,"props":1403,"children":1404},{"style":839},[1405],{"type":35,"value":1358},{"type":30,"tag":832,"props":1407,"children":1408},{"style":845},[1409],{"type":35,"value":641},{"type":30,"tag":832,"props":1411,"children":1412},{"style":1365},[1413],{"type":35,"value":872},{"type":30,"tag":832,"props":1415,"children":1416},{"style":845},[1417],{"type":35,"value":1372},{"type":30,"tag":832,"props":1419,"children":1421},{"class":834,"line":1420},14,[1422,1427,1431,1435,1439,1443],{"type":30,"tag":832,"props":1423,"children":1424},{"style":1311},[1425],{"type":35,"value":1426},"    redirectUri",{"type":30,"tag":832,"props":1428,"children":1429},{"style":845},[1430],{"type":35,"value":1289},{"type":30,"tag":832,"props":1432,"children":1433},{"style":845},[1434],{"type":35,"value":1021},{"type":30,"tag":832,"props":1436,"children":1437},{"style":856},[1438],{"type":35,"value":731},{"type":30,"tag":832,"props":1440,"children":1441},{"style":845},[1442],{"type":35,"value":853},{"type":30,"tag":832,"props":1444,"children":1445},{"style":845},[1446],{"type":35,"value":1372},{"type":30,"tag":832,"props":1448,"children":1450},{"class":834,"line":1449},15,[1451,1456,1460,1464,1468,1472],{"type":30,"tag":832,"props":1452,"children":1453},{"style":1311},[1454],{"type":35,"value":1455},"    postLogoutRedirectUri",{"type":30,"tag":832,"props":1457,"children":1458},{"style":845},[1459],{"type":35,"value":1289},{"type":30,"tag":832,"props":1461,"children":1462},{"style":845},[1463],{"type":35,"value":1021},{"type":30,"tag":832,"props":1465,"children":1466},{"style":856},[1467],{"type":35,"value":731},{"type":30,"tag":832,"props":1469,"children":1470},{"style":845},[1471],{"type":35,"value":853},{"type":30,"tag":832,"props":1473,"children":1474},{"style":845},[1475],{"type":35,"value":1372},{"type":30,"tag":832,"props":1477,"children":1479},{"class":834,"line":1478},16,[1480,1485],{"type":30,"tag":832,"props":1481,"children":1482},{"style":997},[1483],{"type":35,"value":1484},"  }",{"type":30,"tag":832,"props":1486,"children":1487},{"style":845},[1488],{"type":35,"value":1372},{"type":30,"tag":832,"props":1490,"children":1492},{"class":834,"line":1491},17,[1493,1498,1502],{"type":30,"tag":832,"props":1494,"children":1495},{"style":1311},[1496],{"type":35,"value":1497},"  cache",{"type":30,"tag":832,"props":1499,"children":1500},{"style":845},[1501],{"type":35,"value":1289},{"type":30,"tag":832,"props":1503,"children":1504},{"style":997},[1505],{"type":35,"value":1304},{"type":30,"tag":832,"props":1507,"children":1509},{"class":834,"line":1508},18,[1510,1515,1519,1523,1528,1532],{"type":30,"tag":832,"props":1511,"children":1512},{"style":1311},[1513],{"type":35,"value":1514},"    cacheLocation",{"type":30,"tag":832,"props":1516,"children":1517},{"style":845},[1518],{"type":35,"value":1289},{"type":30,"tag":832,"props":1520,"children":1521},{"style":845},[1522],{"type":35,"value":1021},{"type":30,"tag":832,"props":1524,"children":1525},{"style":856},[1526],{"type":35,"value":1527},"localStorage",{"type":30,"tag":832,"props":1529,"children":1530},{"style":845},[1531],{"type":35,"value":853},{"type":30,"tag":832,"props":1533,"children":1534},{"style":845},[1535],{"type":35,"value":1372},{"type":30,"tag":832,"props":1537,"children":1539},{"class":834,"line":1538},19,[1540,1544],{"type":30,"tag":832,"props":1541,"children":1542},{"style":997},[1543],{"type":35,"value":1484},{"type":30,"tag":832,"props":1545,"children":1546},{"style":845},[1547],{"type":35,"value":1372},{"type":30,"tag":832,"props":1549,"children":1551},{"class":834,"line":1550},20,[1552,1557],{"type":30,"tag":832,"props":1553,"children":1554},{"style":997},[1555],{"type":35,"value":1556},"}",{"type":30,"tag":832,"props":1558,"children":1559},{"style":845},[1560],{"type":35,"value":1035},{"type":30,"tag":832,"props":1562,"children":1564},{"class":834,"line":1563},21,[1565],{"type":30,"tag":832,"props":1566,"children":1567},{"emptyLinePlaceholder":1190},[1568],{"type":35,"value":1193},{"type":30,"tag":832,"props":1570,"children":1572},{"class":834,"line":1571},22,[1573,1577,1582,1586,1591,1596,1601,1606],{"type":30,"tag":832,"props":1574,"children":1575},{"style":1276},[1576],{"type":35,"value":1279},{"type":30,"tag":832,"props":1578,"children":1579},{"style":1097},[1580],{"type":35,"value":1581}," instance",{"type":30,"tag":832,"props":1583,"children":1584},{"style":845},[1585],{"type":35,"value":1299},{"type":30,"tag":832,"props":1587,"children":1589},{"style":1588},"--shiki-default:#7AA2F7",[1590],{"type":35,"value":1062},{"type":30,"tag":832,"props":1592,"children":1593},{"style":997},[1594],{"type":35,"value":1595},"(",{"type":30,"tag":832,"props":1597,"children":1598},{"style":839},[1599],{"type":35,"value":1600},"msalConfig",{"type":30,"tag":832,"props":1602,"children":1603},{"style":997},[1604],{"type":35,"value":1605},")",{"type":30,"tag":832,"props":1607,"children":1608},{"style":845},[1609],{"type":35,"value":1035},{"type":30,"tag":832,"props":1611,"children":1613},{"class":834,"line":1612},23,[1614],{"type":30,"tag":832,"props":1615,"children":1616},{"emptyLinePlaceholder":1190},[1617],{"type":35,"value":1193},{"type":30,"tag":832,"props":1619,"children":1621},{"class":834,"line":1620},24,[1622],{"type":30,"tag":832,"props":1623,"children":1624},{"style":982},[1625],{"type":35,"value":1626},"// Restore the signed-in account after a page refresh.\n",{"type":30,"tag":832,"props":1628,"children":1630},{"class":834,"line":1629},25,[1631,1635,1640,1644,1648,1652,1657,1662],{"type":30,"tag":832,"props":1632,"children":1633},{"style":1276},[1634],{"type":35,"value":1279},{"type":30,"tag":832,"props":1636,"children":1637},{"style":1097},[1638],{"type":35,"value":1639}," accounts",{"type":30,"tag":832,"props":1641,"children":1642},{"style":845},[1643],{"type":35,"value":1299},{"type":30,"tag":832,"props":1645,"children":1646},{"style":839},[1647],{"type":35,"value":1581},{"type":30,"tag":832,"props":1649,"children":1650},{"style":845},[1651],{"type":35,"value":641},{"type":30,"tag":832,"props":1653,"children":1654},{"style":1588},[1655],{"type":35,"value":1656},"getAllAccounts",{"type":30,"tag":832,"props":1658,"children":1659},{"style":997},[1660],{"type":35,"value":1661},"()",{"type":30,"tag":832,"props":1663,"children":1664},{"style":845},[1665],{"type":35,"value":1035},{"type":30,"tag":832,"props":1667,"children":1669},{"class":834,"line":1668},26,[1670,1675,1680,1685,1689,1694,1699,1704,1708],{"type":30,"tag":832,"props":1671,"children":1672},{"style":1097},[1673],{"type":35,"value":1674},"if",{"type":30,"tag":832,"props":1676,"children":1677},{"style":997},[1678],{"type":35,"value":1679}," (",{"type":30,"tag":832,"props":1681,"children":1682},{"style":839},[1683],{"type":35,"value":1684},"accounts",{"type":30,"tag":832,"props":1686,"children":1687},{"style":845},[1688],{"type":35,"value":641},{"type":30,"tag":832,"props":1690,"children":1691},{"style":991},[1692],{"type":35,"value":1693},"length",{"type":30,"tag":832,"props":1695,"children":1696},{"style":1097},[1697],{"type":35,"value":1698}," >",{"type":30,"tag":832,"props":1700,"children":1701},{"style":1365},[1702],{"type":35,"value":1703}," 0",{"type":30,"tag":832,"props":1705,"children":1706},{"style":997},[1707],{"type":35,"value":1605},{"type":30,"tag":832,"props":1709,"children":1710},{"style":997},[1711],{"type":35,"value":1304},{"type":30,"tag":832,"props":1713,"children":1715},{"class":834,"line":1714},27,[1716,1721,1725,1730,1734,1738,1743,1748,1753],{"type":30,"tag":832,"props":1717,"children":1718},{"style":839},[1719],{"type":35,"value":1720},"  instance",{"type":30,"tag":832,"props":1722,"children":1723},{"style":845},[1724],{"type":35,"value":641},{"type":30,"tag":832,"props":1726,"children":1727},{"style":1588},[1728],{"type":35,"value":1729},"setActiveAccount",{"type":30,"tag":832,"props":1731,"children":1732},{"style":997},[1733],{"type":35,"value":1595},{"type":30,"tag":832,"props":1735,"children":1736},{"style":839},[1737],{"type":35,"value":1684},{"type":30,"tag":832,"props":1739,"children":1740},{"style":997},[1741],{"type":35,"value":1742},"[",{"type":30,"tag":832,"props":1744,"children":1745},{"style":1365},[1746],{"type":35,"value":1747},"0",{"type":30,"tag":832,"props":1749,"children":1750},{"style":997},[1751],{"type":35,"value":1752},"])",{"type":30,"tag":832,"props":1754,"children":1755},{"style":845},[1756],{"type":35,"value":1035},{"type":30,"tag":832,"props":1758,"children":1760},{"class":834,"line":1759},28,[1761],{"type":30,"tag":832,"props":1762,"children":1763},{"style":997},[1764],{"type":35,"value":1765},"}\n",{"type":30,"tag":832,"props":1767,"children":1769},{"class":834,"line":1768},29,[1770],{"type":30,"tag":832,"props":1771,"children":1772},{"emptyLinePlaceholder":1190},[1773],{"type":35,"value":1193},{"type":30,"tag":832,"props":1775,"children":1777},{"class":834,"line":1776},30,[1778],{"type":30,"tag":832,"props":1779,"children":1780},{"style":982},[1781],{"type":35,"value":1782},"// A fresh sign-in does not set the active account for you.\n",{"type":30,"tag":832,"props":1784,"children":1786},{"class":834,"line":1785},31,[1787,1792,1796,1801,1806,1812,1816,1821],{"type":30,"tag":832,"props":1788,"children":1789},{"style":839},[1790],{"type":35,"value":1791},"instance",{"type":30,"tag":832,"props":1793,"children":1794},{"style":845},[1795],{"type":35,"value":641},{"type":30,"tag":832,"props":1797,"children":1798},{"style":1588},[1799],{"type":35,"value":1800},"addEventCallback",{"type":30,"tag":832,"props":1802,"children":1803},{"style":997},[1804],{"type":35,"value":1805},"((",{"type":30,"tag":832,"props":1807,"children":1809},{"style":1808},"--shiki-default:#E0AF68",[1810],{"type":35,"value":1811},"event",{"type":30,"tag":832,"props":1813,"children":1814},{"style":997},[1815],{"type":35,"value":1605},{"type":30,"tag":832,"props":1817,"children":1818},{"style":1097},[1819],{"type":35,"value":1820}," =>",{"type":30,"tag":832,"props":1822,"children":1823},{"style":997},[1824],{"type":35,"value":1304},{"type":30,"tag":832,"props":1826,"children":1828},{"class":834,"line":1827},32,[1829,1834,1838,1842,1846,1851,1856,1861,1865,1870,1875,1880,1884,1889],{"type":30,"tag":832,"props":1830,"children":1831},{"style":1097},[1832],{"type":35,"value":1833},"  if",{"type":30,"tag":832,"props":1835,"children":1836},{"style":997},[1837],{"type":35,"value":1679},{"type":30,"tag":832,"props":1839,"children":1840},{"style":839},[1841],{"type":35,"value":1811},{"type":30,"tag":832,"props":1843,"children":1844},{"style":845},[1845],{"type":35,"value":641},{"type":30,"tag":832,"props":1847,"children":1848},{"style":991},[1849],{"type":35,"value":1850},"eventType",{"type":30,"tag":832,"props":1852,"children":1853},{"style":1097},[1854],{"type":35,"value":1855}," ===",{"type":30,"tag":832,"props":1857,"children":1858},{"style":839},[1859],{"type":35,"value":1860}," EventType",{"type":30,"tag":832,"props":1862,"children":1863},{"style":845},[1864],{"type":35,"value":641},{"type":30,"tag":832,"props":1866,"children":1867},{"style":1365},[1868],{"type":35,"value":1869},"LOGIN_SUCCESS",{"type":30,"tag":832,"props":1871,"children":1872},{"style":1097},[1873],{"type":35,"value":1874}," &&",{"type":30,"tag":832,"props":1876,"children":1877},{"style":839},[1878],{"type":35,"value":1879}," event",{"type":30,"tag":832,"props":1881,"children":1882},{"style":845},[1883],{"type":35,"value":641},{"type":30,"tag":832,"props":1885,"children":1886},{"style":991},[1887],{"type":35,"value":1888},"payload",{"type":30,"tag":832,"props":1890,"children":1891},{"style":997},[1892],{"type":35,"value":1893},") {\n",{"type":30,"tag":832,"props":1895,"children":1897},{"class":834,"line":1896},33,[1898,1903,1908,1912,1916,1920,1924,1929,1933],{"type":30,"tag":832,"props":1899,"children":1900},{"style":1276},[1901],{"type":35,"value":1902},"    const",{"type":30,"tag":832,"props":1904,"children":1905},{"style":1097},[1906],{"type":35,"value":1907}," payload",{"type":30,"tag":832,"props":1909,"children":1910},{"style":845},[1911],{"type":35,"value":1299},{"type":30,"tag":832,"props":1913,"children":1914},{"style":839},[1915],{"type":35,"value":1879},{"type":30,"tag":832,"props":1917,"children":1918},{"style":845},[1919],{"type":35,"value":641},{"type":30,"tag":832,"props":1921,"children":1922},{"style":991},[1923],{"type":35,"value":1888},{"type":30,"tag":832,"props":1925,"children":1926},{"style":845},[1927],{"type":35,"value":1928}," as",{"type":30,"tag":832,"props":1930,"children":1931},{"style":839},[1932],{"type":35,"value":1118},{"type":30,"tag":832,"props":1934,"children":1935},{"style":845},[1936],{"type":35,"value":1035},{"type":30,"tag":832,"props":1938,"children":1940},{"class":834,"line":1939},34,[1941,1946,1950,1954,1958,1962,1966,1971,1975],{"type":30,"tag":832,"props":1942,"children":1943},{"style":839},[1944],{"type":35,"value":1945},"    instance",{"type":30,"tag":832,"props":1947,"children":1948},{"style":845},[1949],{"type":35,"value":641},{"type":30,"tag":832,"props":1951,"children":1952},{"style":1588},[1953],{"type":35,"value":1729},{"type":30,"tag":832,"props":1955,"children":1956},{"style":997},[1957],{"type":35,"value":1595},{"type":30,"tag":832,"props":1959,"children":1960},{"style":839},[1961],{"type":35,"value":1888},{"type":30,"tag":832,"props":1963,"children":1964},{"style":845},[1965],{"type":35,"value":641},{"type":30,"tag":832,"props":1967,"children":1968},{"style":991},[1969],{"type":35,"value":1970},"account",{"type":30,"tag":832,"props":1972,"children":1973},{"style":997},[1974],{"type":35,"value":1605},{"type":30,"tag":832,"props":1976,"children":1977},{"style":845},[1978],{"type":35,"value":1035},{"type":30,"tag":832,"props":1980,"children":1982},{"class":834,"line":1981},35,[1983],{"type":30,"tag":832,"props":1984,"children":1985},{"style":997},[1986],{"type":35,"value":1987},"  }\n",{"type":30,"tag":832,"props":1989,"children":1991},{"class":834,"line":1990},36,[1992,1997],{"type":30,"tag":832,"props":1993,"children":1994},{"style":997},[1995],{"type":35,"value":1996},"})",{"type":30,"tag":832,"props":1998,"children":1999},{"style":845},[2000],{"type":35,"value":1035},{"type":30,"tag":832,"props":2002,"children":2004},{"class":834,"line":2003},37,[2005],{"type":30,"tag":832,"props":2006,"children":2007},{"emptyLinePlaceholder":1190},[2008],{"type":35,"value":1193},{"type":30,"tag":832,"props":2010,"children":2012},{"class":834,"line":2011},38,[2013,2017,2022,2026,2031,2035,2040,2044],{"type":30,"tag":832,"props":2014,"children":2015},{"style":1276},[2016],{"type":35,"value":1279},{"type":30,"tag":832,"props":2018,"children":2019},{"style":1097},[2020],{"type":35,"value":2021}," app",{"type":30,"tag":832,"props":2023,"children":2024},{"style":845},[2025],{"type":35,"value":1299},{"type":30,"tag":832,"props":2027,"children":2028},{"style":1588},[2029],{"type":35,"value":2030}," createApp",{"type":30,"tag":832,"props":2032,"children":2033},{"style":997},[2034],{"type":35,"value":1595},{"type":30,"tag":832,"props":2036,"children":2037},{"style":839},[2038],{"type":35,"value":2039},"App",{"type":30,"tag":832,"props":2041,"children":2042},{"style":997},[2043],{"type":35,"value":1605},{"type":30,"tag":832,"props":2045,"children":2046},{"style":845},[2047],{"type":35,"value":1035},{"type":30,"tag":832,"props":2049,"children":2051},{"class":834,"line":2050},39,[2052,2057,2061,2066,2070,2075,2079],{"type":30,"tag":832,"props":2053,"children":2054},{"style":839},[2055],{"type":35,"value":2056},"app",{"type":30,"tag":832,"props":2058,"children":2059},{"style":845},[2060],{"type":35,"value":641},{"type":30,"tag":832,"props":2062,"children":2063},{"style":1588},[2064],{"type":35,"value":2065},"use",{"type":30,"tag":832,"props":2067,"children":2068},{"style":997},[2069],{"type":35,"value":1595},{"type":30,"tag":832,"props":2071,"children":2072},{"style":839},[2073],{"type":35,"value":2074},"router",{"type":30,"tag":832,"props":2076,"children":2077},{"style":997},[2078],{"type":35,"value":1605},{"type":30,"tag":832,"props":2080,"children":2081},{"style":845},[2082],{"type":35,"value":1035},{"type":30,"tag":832,"props":2084,"children":2086},{"class":834,"line":2085},40,[2087,2091,2095,2099,2103,2107,2111,2115,2119],{"type":30,"tag":832,"props":2088,"children":2089},{"style":839},[2090],{"type":35,"value":2056},{"type":30,"tag":832,"props":2092,"children":2093},{"style":845},[2094],{"type":35,"value":641},{"type":30,"tag":832,"props":2096,"children":2097},{"style":1588},[2098],{"type":35,"value":2065},{"type":30,"tag":832,"props":2100,"children":2101},{"style":997},[2102],{"type":35,"value":1595},{"type":30,"tag":832,"props":2104,"children":2105},{"style":839},[2106],{"type":35,"value":1052},{"type":30,"tag":832,"props":2108,"children":2109},{"style":845},[2110],{"type":35,"value":1057},{"type":30,"tag":832,"props":2112,"children":2113},{"style":839},[2114],{"type":35,"value":1581},{"type":30,"tag":832,"props":2116,"children":2117},{"style":997},[2118],{"type":35,"value":1605},{"type":30,"tag":832,"props":2120,"children":2121},{"style":845},[2122],{"type":35,"value":1035},{"type":30,"tag":832,"props":2124,"children":2126},{"class":834,"line":2125},41,[2127,2131,2135,2140,2144,2148,2153,2157,2161],{"type":30,"tag":832,"props":2128,"children":2129},{"style":839},[2130],{"type":35,"value":2056},{"type":30,"tag":832,"props":2132,"children":2133},{"style":845},[2134],{"type":35,"value":641},{"type":30,"tag":832,"props":2136,"children":2137},{"style":1588},[2138],{"type":35,"value":2139},"mount",{"type":30,"tag":832,"props":2141,"children":2142},{"style":997},[2143],{"type":35,"value":1595},{"type":30,"tag":832,"props":2145,"children":2146},{"style":845},[2147],{"type":35,"value":853},{"type":30,"tag":832,"props":2149,"children":2150},{"style":856},[2151],{"type":35,"value":2152},"#app",{"type":30,"tag":832,"props":2154,"children":2155},{"style":845},[2156],{"type":35,"value":853},{"type":30,"tag":832,"props":2158,"children":2159},{"style":997},[2160],{"type":35,"value":1605},{"type":30,"tag":832,"props":2162,"children":2163},{"style":845},[2164],{"type":35,"value":1035},{"type":30,"tag":31,"props":2166,"children":2167},{},[2168],{"type":35,"value":2169},"Two things in there are easy to leave out and annoying to debug.",{"type":30,"tag":31,"props":2171,"children":2172},{},[2173,2178,2180,2185],{"type":30,"tag":38,"props":2174,"children":2176},{"className":2175},[],[2177],{"type":35,"value":1729},{"type":35,"value":2179}," after ",{"type":30,"tag":38,"props":2181,"children":2183},{"className":2182},[],[2184],{"type":35,"value":1656},{"type":35,"value":2186}," 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":30,"tag":31,"props":2188,"children":2189},{},[2190,2192,2197],{"type":35,"value":2191},"The ",{"type":30,"tag":38,"props":2193,"children":2195},{"className":2194},[],[2196],{"type":35,"value":1869},{"type":35,"value":2198}," callback covers the other direction. A first-time sign-in populates the cache but leaves the active account unset until you set it.",{"type":30,"tag":31,"props":2200,"children":2201},{},[2202,2208,2210,2216],{"type":30,"tag":38,"props":2203,"children":2205},{"className":2204},[],[2206],{"type":35,"value":2207},"cacheLocation: 'localStorage'",{"type":35,"value":2209}," keeps the session across tabs and reloads. The default is ",{"type":30,"tag":38,"props":2211,"children":2213},{"className":2212},[],[2214],{"type":35,"value":2215},"sessionStorage",{"type":35,"value":2217},", which doesn't.",{"type":30,"tag":31,"props":2219,"children":2220},{},[2221,2223,2229,2231,2237,2239,2245,2247,2253,2255,2260,2262,2267],{"type":35,"value":2222},"Once the plugin is installed, ",{"type":30,"tag":38,"props":2224,"children":2226},{"className":2225},[],[2227],{"type":35,"value":2228},"useMsal()",{"type":35,"value":2230}," handles the rest of the startup sequence. On first call, while the interaction status is still ",{"type":30,"tag":38,"props":2232,"children":2234},{"className":2233},[],[2235],{"type":35,"value":2236},"Startup",{"type":35,"value":2238},", it calls ",{"type":30,"tag":38,"props":2240,"children":2242},{"className":2241},[],[2243],{"type":35,"value":2244},"initialize()",{"type":35,"value":2246}," and then ",{"type":30,"tag":38,"props":2248,"children":2250},{"className":2249},[],[2251],{"type":35,"value":2252},"handleRedirectPromise()",{"type":35,"value":2254},". That matters because ",{"type":30,"tag":38,"props":2256,"children":2258},{"className":2257},[],[2259],{"type":35,"value":516},{"type":35,"value":2261}," has required an awaited ",{"type":30,"tag":38,"props":2263,"children":2265},{"className":2264},[],[2266],{"type":35,"value":2244},{"type":35,"value":2268}," before any other API call since v3. Skip it and you get:",{"type":30,"tag":822,"props":2270,"children":2273},{"className":2271,"code":2272,"language":35,"meta":7,"style":7},"language-text shiki shiki-themes tokyo-night","BrowserAuthError: uninitialized_public_client_application\n",[2274],{"type":30,"tag":38,"props":2275,"children":2276},{"__ignoreMap":7},[2277],{"type":30,"tag":832,"props":2278,"children":2279},{"class":834,"line":835},[2280],{"type":30,"tag":832,"props":2281,"children":2282},{},[2283],{"type":35,"value":2272},{"type":30,"tag":97,"props":2285,"children":2287},{"id":2286},"signing-in-popup-or-redirect",[2288],{"type":35,"value":2289},"Signing in: popup or redirect",{"type":30,"tag":31,"props":2291,"children":2292},{},[2293,2298],{"type":30,"tag":38,"props":2294,"children":2296},{"className":2295},[],[2297],{"type":35,"value":2228},{"type":35,"value":2299}," gives you the MSAL instance plus reactive state:",{"type":30,"tag":822,"props":2301,"children":2303},{"className":970,"code":2302,"language":972,"meta":7,"style":7},"const { instance, accounts, inProgress, loginRequest, callMsGraph } = useMsal();\n",[2304],{"type":30,"tag":38,"props":2305,"children":2306},{"__ignoreMap":7},[2307],{"type":30,"tag":832,"props":2308,"children":2309},{"class":834,"line":835},[2310,2314,2319,2323,2327,2331,2335,2340,2344,2349,2353,2358,2362,2366,2371,2375],{"type":30,"tag":832,"props":2311,"children":2312},{"style":1276},[2313],{"type":35,"value":1279},{"type":30,"tag":832,"props":2315,"children":2316},{"style":845},[2317],{"type":35,"value":2318}," {",{"type":30,"tag":832,"props":2320,"children":2321},{"style":1097},[2322],{"type":35,"value":1581},{"type":30,"tag":832,"props":2324,"children":2325},{"style":845},[2326],{"type":35,"value":1057},{"type":30,"tag":832,"props":2328,"children":2329},{"style":1097},[2330],{"type":35,"value":1639},{"type":30,"tag":832,"props":2332,"children":2333},{"style":845},[2334],{"type":35,"value":1057},{"type":30,"tag":832,"props":2336,"children":2337},{"style":1097},[2338],{"type":35,"value":2339}," inProgress",{"type":30,"tag":832,"props":2341,"children":2342},{"style":845},[2343],{"type":35,"value":1057},{"type":30,"tag":832,"props":2345,"children":2346},{"style":1097},[2347],{"type":35,"value":2348}," loginRequest",{"type":30,"tag":832,"props":2350,"children":2351},{"style":845},[2352],{"type":35,"value":1057},{"type":30,"tag":832,"props":2354,"children":2355},{"style":1097},[2356],{"type":35,"value":2357}," callMsGraph",{"type":30,"tag":832,"props":2359,"children":2360},{"style":845},[2361],{"type":35,"value":1011},{"type":30,"tag":832,"props":2363,"children":2364},{"style":845},[2365],{"type":35,"value":1299},{"type":30,"tag":832,"props":2367,"children":2368},{"style":1588},[2369],{"type":35,"value":2370}," useMsal",{"type":30,"tag":832,"props":2372,"children":2373},{"style":997},[2374],{"type":35,"value":1661},{"type":30,"tag":832,"props":2376,"children":2377},{"style":845},[2378],{"type":35,"value":1035},{"type":30,"tag":31,"props":2380,"children":2381},{},[2382,2387,2389,2394,2395,2400,2401,2407,2409,2415,2417,2423],{"type":30,"tag":38,"props":2383,"children":2385},{"className":2384},[],[2386],{"type":35,"value":1791},{"type":35,"value":2388}," is the plain ",{"type":30,"tag":38,"props":2390,"children":2392},{"className":2391},[],[2393],{"type":35,"value":524},{"type":35,"value":799},{"type":30,"tag":38,"props":2396,"children":2398},{"className":2397},[],[2399],{"type":35,"value":1684},{"type":35,"value":617},{"type":30,"tag":38,"props":2402,"children":2404},{"className":2403},[],[2405],{"type":35,"value":2406},"inProgress",{"type":35,"value":2408}," are refs. ",{"type":30,"tag":38,"props":2410,"children":2412},{"className":2411},[],[2413],{"type":35,"value":2414},"loginRequest",{"type":35,"value":2416}," is a default request object of ",{"type":30,"tag":38,"props":2418,"children":2420},{"className":2419},[],[2421],{"type":35,"value":2422},"{ scopes: ['User.Read'] }",{"type":35,"value":2424},", which is enough to sign in and read the user's own profile.",{"type":30,"tag":822,"props":2426,"children":2429},{"className":2427,"code":2428,"language":1026,"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",[2430],{"type":30,"tag":38,"props":2431,"children":2432},{"__ignoreMap":7},[2433,2480,2529,2536,2579,2607,2614,2668,2721,2794,2839,2855,2862,2878,2967,3028],{"type":30,"tag":832,"props":2434,"children":2435},{"class":834,"line":835},[2436,2442,2448,2453,2458,2462,2466,2471,2475],{"type":30,"tag":832,"props":2437,"children":2439},{"style":2438},"--shiki-default:#BA3C97",[2440],{"type":35,"value":2441},"\u003C",{"type":30,"tag":832,"props":2443,"children":2445},{"style":2444},"--shiki-default:#F7768E",[2446],{"type":35,"value":2447},"script",{"type":30,"tag":832,"props":2449,"children":2450},{"style":1097},[2451],{"type":35,"value":2452}," setup",{"type":30,"tag":832,"props":2454,"children":2455},{"style":1097},[2456],{"type":35,"value":2457}," lang",{"type":30,"tag":832,"props":2459,"children":2460},{"style":845},[2461],{"type":35,"value":848},{"type":30,"tag":832,"props":2463,"children":2464},{"style":845},[2465],{"type":35,"value":853},{"type":30,"tag":832,"props":2467,"children":2468},{"style":856},[2469],{"type":35,"value":2470},"ts",{"type":30,"tag":832,"props":2472,"children":2473},{"style":845},[2474],{"type":35,"value":853},{"type":30,"tag":832,"props":2476,"children":2477},{"style":2438},[2478],{"type":35,"value":2479},">\n",{"type":30,"tag":832,"props":2481,"children":2482},{"class":834,"line":473},[2483,2487,2491,2496,2500,2505,2509,2513,2517,2521,2525],{"type":30,"tag":832,"props":2484,"children":2485},{"style":991},[2486],{"type":35,"value":994},{"type":30,"tag":832,"props":2488,"children":2489},{"style":997},[2490],{"type":35,"value":1000},{"type":30,"tag":832,"props":2492,"children":2493},{"style":1003},[2494],{"type":35,"value":2495},"useMsal",{"type":30,"tag":832,"props":2497,"children":2498},{"style":845},[2499],{"type":35,"value":1057},{"type":30,"tag":832,"props":2501,"children":2502},{"style":1003},[2503],{"type":35,"value":2504}," useIsAuthenticated",{"type":30,"tag":832,"props":2506,"children":2507},{"style":997},[2508],{"type":35,"value":1011},{"type":30,"tag":832,"props":2510,"children":2511},{"style":991},[2512],{"type":35,"value":1016},{"type":30,"tag":832,"props":2514,"children":2515},{"style":845},[2516],{"type":35,"value":1021},{"type":30,"tag":832,"props":2518,"children":2519},{"style":856},[2520],{"type":35,"value":547},{"type":30,"tag":832,"props":2522,"children":2523},{"style":845},[2524],{"type":35,"value":853},{"type":30,"tag":832,"props":2526,"children":2527},{"style":845},[2528],{"type":35,"value":1035},{"type":30,"tag":832,"props":2530,"children":2531},{"class":834,"line":1038},[2532],{"type":30,"tag":832,"props":2533,"children":2534},{"emptyLinePlaceholder":1190},[2535],{"type":35,"value":1193},{"type":30,"tag":832,"props":2537,"children":2538},{"class":834,"line":1089},[2539,2543,2547,2551,2555,2559,2563,2567,2571,2575],{"type":30,"tag":832,"props":2540,"children":2541},{"style":1276},[2542],{"type":35,"value":1279},{"type":30,"tag":832,"props":2544,"children":2545},{"style":845},[2546],{"type":35,"value":2318},{"type":30,"tag":832,"props":2548,"children":2549},{"style":1097},[2550],{"type":35,"value":1581},{"type":30,"tag":832,"props":2552,"children":2553},{"style":845},[2554],{"type":35,"value":1057},{"type":30,"tag":832,"props":2556,"children":2557},{"style":1097},[2558],{"type":35,"value":2348},{"type":30,"tag":832,"props":2560,"children":2561},{"style":845},[2562],{"type":35,"value":1011},{"type":30,"tag":832,"props":2564,"children":2565},{"style":845},[2566],{"type":35,"value":1299},{"type":30,"tag":832,"props":2568,"children":2569},{"style":1588},[2570],{"type":35,"value":2370},{"type":30,"tag":832,"props":2572,"children":2573},{"style":997},[2574],{"type":35,"value":1661},{"type":30,"tag":832,"props":2576,"children":2577},{"style":845},[2578],{"type":35,"value":1035},{"type":30,"tag":832,"props":2580,"children":2581},{"class":834,"line":1145},[2582,2586,2591,2595,2599,2603],{"type":30,"tag":832,"props":2583,"children":2584},{"style":1276},[2585],{"type":35,"value":1279},{"type":30,"tag":832,"props":2587,"children":2588},{"style":1097},[2589],{"type":35,"value":2590}," isAuthenticated",{"type":30,"tag":832,"props":2592,"children":2593},{"style":845},[2594],{"type":35,"value":1299},{"type":30,"tag":832,"props":2596,"children":2597},{"style":1588},[2598],{"type":35,"value":2504},{"type":30,"tag":832,"props":2600,"children":2601},{"style":997},[2602],{"type":35,"value":1661},{"type":30,"tag":832,"props":2604,"children":2605},{"style":845},[2606],{"type":35,"value":1035},{"type":30,"tag":832,"props":2608,"children":2609},{"class":834,"line":1186},[2610],{"type":30,"tag":832,"props":2611,"children":2612},{"emptyLinePlaceholder":1190},[2613],{"type":35,"value":1193},{"type":30,"tag":832,"props":2615,"children":2616},{"class":834,"line":1196},[2617,2621,2626,2630,2635,2639,2643,2647,2652,2656,2660,2664],{"type":30,"tag":832,"props":2618,"children":2619},{"style":1276},[2620],{"type":35,"value":1279},{"type":30,"tag":832,"props":2622,"children":2623},{"style":1588},[2624],{"type":35,"value":2625}," loginPopup",{"type":30,"tag":832,"props":2627,"children":2628},{"style":845},[2629],{"type":35,"value":1299},{"type":30,"tag":832,"props":2631,"children":2632},{"style":997},[2633],{"type":35,"value":2634}," ()",{"type":30,"tag":832,"props":2636,"children":2637},{"style":1097},[2638],{"type":35,"value":1820},{"type":30,"tag":832,"props":2640,"children":2641},{"style":839},[2642],{"type":35,"value":1581},{"type":30,"tag":832,"props":2644,"children":2645},{"style":845},[2646],{"type":35,"value":641},{"type":30,"tag":832,"props":2648,"children":2649},{"style":1588},[2650],{"type":35,"value":2651},"loginPopup",{"type":30,"tag":832,"props":2653,"children":2654},{"style":997},[2655],{"type":35,"value":1595},{"type":30,"tag":832,"props":2657,"children":2658},{"style":839},[2659],{"type":35,"value":2414},{"type":30,"tag":832,"props":2661,"children":2662},{"style":997},[2663],{"type":35,"value":1605},{"type":30,"tag":832,"props":2665,"children":2666},{"style":845},[2667],{"type":35,"value":1035},{"type":30,"tag":832,"props":2669,"children":2670},{"class":834,"line":1230},[2671,2675,2680,2684,2688,2692,2696,2700,2705,2709,2713,2717],{"type":30,"tag":832,"props":2672,"children":2673},{"style":1276},[2674],{"type":35,"value":1279},{"type":30,"tag":832,"props":2676,"children":2677},{"style":1588},[2678],{"type":35,"value":2679}," loginRedirect",{"type":30,"tag":832,"props":2681,"children":2682},{"style":845},[2683],{"type":35,"value":1299},{"type":30,"tag":832,"props":2685,"children":2686},{"style":997},[2687],{"type":35,"value":2634},{"type":30,"tag":832,"props":2689,"children":2690},{"style":1097},[2691],{"type":35,"value":1820},{"type":30,"tag":832,"props":2693,"children":2694},{"style":839},[2695],{"type":35,"value":1581},{"type":30,"tag":832,"props":2697,"children":2698},{"style":845},[2699],{"type":35,"value":641},{"type":30,"tag":832,"props":2701,"children":2702},{"style":1588},[2703],{"type":35,"value":2704},"loginRedirect",{"type":30,"tag":832,"props":2706,"children":2707},{"style":997},[2708],{"type":35,"value":1595},{"type":30,"tag":832,"props":2710,"children":2711},{"style":839},[2712],{"type":35,"value":2414},{"type":30,"tag":832,"props":2714,"children":2715},{"style":997},[2716],{"type":35,"value":1605},{"type":30,"tag":832,"props":2718,"children":2719},{"style":845},[2720],{"type":35,"value":1035},{"type":30,"tag":832,"props":2722,"children":2723},{"class":834,"line":1264},[2724,2728,2733,2737,2741,2745,2749,2753,2758,2763,2768,2772,2776,2781,2785,2790],{"type":30,"tag":832,"props":2725,"children":2726},{"style":1276},[2727],{"type":35,"value":1279},{"type":30,"tag":832,"props":2729,"children":2730},{"style":1588},[2731],{"type":35,"value":2732}," logoutPopup",{"type":30,"tag":832,"props":2734,"children":2735},{"style":845},[2736],{"type":35,"value":1299},{"type":30,"tag":832,"props":2738,"children":2739},{"style":997},[2740],{"type":35,"value":2634},{"type":30,"tag":832,"props":2742,"children":2743},{"style":1097},[2744],{"type":35,"value":1820},{"type":30,"tag":832,"props":2746,"children":2747},{"style":839},[2748],{"type":35,"value":1581},{"type":30,"tag":832,"props":2750,"children":2751},{"style":845},[2752],{"type":35,"value":641},{"type":30,"tag":832,"props":2754,"children":2755},{"style":1588},[2756],{"type":35,"value":2757},"logoutPopup",{"type":30,"tag":832,"props":2759,"children":2760},{"style":997},[2761],{"type":35,"value":2762},"({",{"type":30,"tag":832,"props":2764,"children":2765},{"style":1311},[2766],{"type":35,"value":2767}," mainWindowRedirectUri",{"type":30,"tag":832,"props":2769,"children":2770},{"style":845},[2771],{"type":35,"value":1289},{"type":30,"tag":832,"props":2773,"children":2774},{"style":845},[2775],{"type":35,"value":1021},{"type":30,"tag":832,"props":2777,"children":2778},{"style":856},[2779],{"type":35,"value":2780},"/",{"type":30,"tag":832,"props":2782,"children":2783},{"style":845},[2784],{"type":35,"value":853},{"type":30,"tag":832,"props":2786,"children":2787},{"style":997},[2788],{"type":35,"value":2789}," })",{"type":30,"tag":832,"props":2791,"children":2792},{"style":845},[2793],{"type":35,"value":1035},{"type":30,"tag":832,"props":2795,"children":2796},{"class":834,"line":1272},[2797,2801,2806,2810,2814,2818,2822,2826,2831,2835],{"type":30,"tag":832,"props":2798,"children":2799},{"style":1276},[2800],{"type":35,"value":1279},{"type":30,"tag":832,"props":2802,"children":2803},{"style":1588},[2804],{"type":35,"value":2805}," logoutRedirect",{"type":30,"tag":832,"props":2807,"children":2808},{"style":845},[2809],{"type":35,"value":1299},{"type":30,"tag":832,"props":2811,"children":2812},{"style":997},[2813],{"type":35,"value":2634},{"type":30,"tag":832,"props":2815,"children":2816},{"style":1097},[2817],{"type":35,"value":1820},{"type":30,"tag":832,"props":2819,"children":2820},{"style":839},[2821],{"type":35,"value":1581},{"type":30,"tag":832,"props":2823,"children":2824},{"style":845},[2825],{"type":35,"value":641},{"type":30,"tag":832,"props":2827,"children":2828},{"style":1588},[2829],{"type":35,"value":2830},"logoutRedirect",{"type":30,"tag":832,"props":2832,"children":2833},{"style":997},[2834],{"type":35,"value":1661},{"type":30,"tag":832,"props":2836,"children":2837},{"style":845},[2838],{"type":35,"value":1035},{"type":30,"tag":832,"props":2840,"children":2841},{"class":834,"line":1307},[2842,2847,2851],{"type":30,"tag":832,"props":2843,"children":2844},{"style":2438},[2845],{"type":35,"value":2846},"\u003C/",{"type":30,"tag":832,"props":2848,"children":2849},{"style":2444},[2850],{"type":35,"value":2447},{"type":30,"tag":832,"props":2852,"children":2853},{"style":2438},[2854],{"type":35,"value":2479},{"type":30,"tag":832,"props":2856,"children":2857},{"class":834,"line":1325},[2858],{"type":30,"tag":832,"props":2859,"children":2860},{"emptyLinePlaceholder":1190},[2861],{"type":35,"value":1193},{"type":30,"tag":832,"props":2863,"children":2864},{"class":834,"line":1375},[2865,2869,2874],{"type":30,"tag":832,"props":2866,"children":2867},{"style":2438},[2868],{"type":35,"value":2441},{"type":30,"tag":832,"props":2870,"children":2871},{"style":2444},[2872],{"type":35,"value":2873},"template",{"type":30,"tag":832,"props":2875,"children":2876},{"style":2438},[2877],{"type":35,"value":2479},{"type":30,"tag":832,"props":2879,"children":2880},{"class":834,"line":1420},[2881,2886,2891,2896,2900,2904,2909,2914,2918,2923,2928,2932,2936,2940,2944,2949,2955,2959,2963],{"type":30,"tag":832,"props":2882,"children":2883},{"style":2438},[2884],{"type":35,"value":2885},"  \u003C",{"type":30,"tag":832,"props":2887,"children":2888},{"style":2444},[2889],{"type":35,"value":2890},"button",{"type":30,"tag":832,"props":2892,"children":2893},{"style":1097},[2894],{"type":35,"value":2895}," v-if",{"type":30,"tag":832,"props":2897,"children":2898},{"style":845},[2899],{"type":35,"value":848},{"type":30,"tag":832,"props":2901,"children":2902},{"style":845},[2903],{"type":35,"value":853},{"type":30,"tag":832,"props":2905,"children":2906},{"style":1097},[2907],{"type":35,"value":2908},"!",{"type":30,"tag":832,"props":2910,"children":2911},{"style":839},[2912],{"type":35,"value":2913},"isAuthenticated",{"type":30,"tag":832,"props":2915,"children":2916},{"style":845},[2917],{"type":35,"value":853},{"type":30,"tag":832,"props":2919,"children":2920},{"style":845},[2921],{"type":35,"value":2922}," @",{"type":30,"tag":832,"props":2924,"children":2925},{"style":1097},[2926],{"type":35,"value":2927},"click",{"type":30,"tag":832,"props":2929,"children":2930},{"style":845},[2931],{"type":35,"value":848},{"type":30,"tag":832,"props":2933,"children":2934},{"style":845},[2935],{"type":35,"value":853},{"type":30,"tag":832,"props":2937,"children":2938},{"style":839},[2939],{"type":35,"value":2651},{"type":30,"tag":832,"props":2941,"children":2942},{"style":845},[2943],{"type":35,"value":853},{"type":30,"tag":832,"props":2945,"children":2946},{"style":2438},[2947],{"type":35,"value":2948},">",{"type":30,"tag":832,"props":2950,"children":2952},{"style":2951},"--shiki-default:#9AA5CE",[2953],{"type":35,"value":2954},"Sign in",{"type":30,"tag":832,"props":2956,"children":2957},{"style":2438},[2958],{"type":35,"value":2846},{"type":30,"tag":832,"props":2960,"children":2961},{"style":2444},[2962],{"type":35,"value":2890},{"type":30,"tag":832,"props":2964,"children":2965},{"style":2438},[2966],{"type":35,"value":2479},{"type":30,"tag":832,"props":2968,"children":2969},{"class":834,"line":1449},[2970,2974,2978,2983,2987,2991,2995,2999,3003,3007,3011,3016,3020,3024],{"type":30,"tag":832,"props":2971,"children":2972},{"style":2438},[2973],{"type":35,"value":2885},{"type":30,"tag":832,"props":2975,"children":2976},{"style":2444},[2977],{"type":35,"value":2890},{"type":30,"tag":832,"props":2979,"children":2980},{"style":1097},[2981],{"type":35,"value":2982}," v-else",{"type":30,"tag":832,"props":2984,"children":2985},{"style":845},[2986],{"type":35,"value":2922},{"type":30,"tag":832,"props":2988,"children":2989},{"style":1097},[2990],{"type":35,"value":2927},{"type":30,"tag":832,"props":2992,"children":2993},{"style":845},[2994],{"type":35,"value":848},{"type":30,"tag":832,"props":2996,"children":2997},{"style":845},[2998],{"type":35,"value":853},{"type":30,"tag":832,"props":3000,"children":3001},{"style":839},[3002],{"type":35,"value":2757},{"type":30,"tag":832,"props":3004,"children":3005},{"style":845},[3006],{"type":35,"value":853},{"type":30,"tag":832,"props":3008,"children":3009},{"style":2438},[3010],{"type":35,"value":2948},{"type":30,"tag":832,"props":3012,"children":3013},{"style":2951},[3014],{"type":35,"value":3015},"Sign out",{"type":30,"tag":832,"props":3017,"children":3018},{"style":2438},[3019],{"type":35,"value":2846},{"type":30,"tag":832,"props":3021,"children":3022},{"style":2444},[3023],{"type":35,"value":2890},{"type":30,"tag":832,"props":3025,"children":3026},{"style":2438},[3027],{"type":35,"value":2479},{"type":30,"tag":832,"props":3029,"children":3030},{"class":834,"line":1478},[3031,3035,3039],{"type":30,"tag":832,"props":3032,"children":3033},{"style":2438},[3034],{"type":35,"value":2846},{"type":30,"tag":832,"props":3036,"children":3037},{"style":2444},[3038],{"type":35,"value":2873},{"type":30,"tag":832,"props":3040,"children":3041},{"style":2438},[3042],{"type":35,"value":2479},{"type":30,"tag":31,"props":3044,"children":3045},{},[3046],{"type":35,"value":3047},"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":30,"tag":31,"props":3049,"children":3050},{},[3051],{"type":35,"value":3052},"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":30,"tag":31,"props":3054,"children":3055},{},[3056],{"type":35,"value":3057},"Pick one and use it consistently. Mixing them across an app produces interaction-status bugs that are hard to trace.",{"type":30,"tag":97,"props":3059,"children":3061},{"id":3060},"reading-auth-state-in-a-component",[3062],{"type":35,"value":3063},"Reading auth state in a component",{"type":30,"tag":822,"props":3065,"children":3067},{"className":970,"code":3066,"language":972,"meta":7,"style":7},"import { useIsAuthenticated } from \"vue3-msal-plugin\";\n\nconst isAuthenticated = useIsAuthenticated();\n",[3068],{"type":30,"tag":38,"props":3069,"children":3070},{"__ignoreMap":7},[3071,3111,3118],{"type":30,"tag":832,"props":3072,"children":3073},{"class":834,"line":835},[3074,3078,3082,3087,3091,3095,3099,3103,3107],{"type":30,"tag":832,"props":3075,"children":3076},{"style":991},[3077],{"type":35,"value":994},{"type":30,"tag":832,"props":3079,"children":3080},{"style":997},[3081],{"type":35,"value":1000},{"type":30,"tag":832,"props":3083,"children":3084},{"style":1003},[3085],{"type":35,"value":3086},"useIsAuthenticated",{"type":30,"tag":832,"props":3088,"children":3089},{"style":997},[3090],{"type":35,"value":1011},{"type":30,"tag":832,"props":3092,"children":3093},{"style":991},[3094],{"type":35,"value":1016},{"type":30,"tag":832,"props":3096,"children":3097},{"style":845},[3098],{"type":35,"value":1021},{"type":30,"tag":832,"props":3100,"children":3101},{"style":856},[3102],{"type":35,"value":547},{"type":30,"tag":832,"props":3104,"children":3105},{"style":845},[3106],{"type":35,"value":853},{"type":30,"tag":832,"props":3108,"children":3109},{"style":845},[3110],{"type":35,"value":1035},{"type":30,"tag":832,"props":3112,"children":3113},{"class":834,"line":473},[3114],{"type":30,"tag":832,"props":3115,"children":3116},{"emptyLinePlaceholder":1190},[3117],{"type":35,"value":1193},{"type":30,"tag":832,"props":3119,"children":3120},{"class":834,"line":1038},[3121,3125,3129,3133,3137,3141],{"type":30,"tag":832,"props":3122,"children":3123},{"style":1276},[3124],{"type":35,"value":1279},{"type":30,"tag":832,"props":3126,"children":3127},{"style":1097},[3128],{"type":35,"value":2590},{"type":30,"tag":832,"props":3130,"children":3131},{"style":845},[3132],{"type":35,"value":1299},{"type":30,"tag":832,"props":3134,"children":3135},{"style":1588},[3136],{"type":35,"value":2504},{"type":30,"tag":832,"props":3138,"children":3139},{"style":997},[3140],{"type":35,"value":1661},{"type":30,"tag":832,"props":3142,"children":3143},{"style":845},[3144],{"type":35,"value":1035},{"type":30,"tag":31,"props":3146,"children":3147},{},[3148,3150,3156,3158,3163],{"type":35,"value":3149},"It returns a ",{"type":30,"tag":38,"props":3151,"children":3153},{"className":3152},[],[3154],{"type":35,"value":3155},"Ref\u003Cboolean>",{"type":35,"value":3157}," 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":30,"tag":38,"props":3159,"children":3161},{"className":3160},[],[3162],{"type":35,"value":1684},{"type":35,"value":3164}," 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":30,"tag":31,"props":3166,"children":3167},{},[3168],{"type":35,"value":3169},"For the signed-in user's details, read the account:",{"type":30,"tag":822,"props":3171,"children":3173},{"className":2427,"code":3172,"language":1026,"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",[3174],{"type":30,"tag":38,"props":3175,"children":3176},{"__ignoreMap":7},[3177,3216,3256,3295,3302,3337,3411,3426,3433,3448,3547],{"type":30,"tag":832,"props":3178,"children":3179},{"class":834,"line":835},[3180,3184,3188,3192,3196,3200,3204,3208,3212],{"type":30,"tag":832,"props":3181,"children":3182},{"style":2438},[3183],{"type":35,"value":2441},{"type":30,"tag":832,"props":3185,"children":3186},{"style":2444},[3187],{"type":35,"value":2447},{"type":30,"tag":832,"props":3189,"children":3190},{"style":1097},[3191],{"type":35,"value":2452},{"type":30,"tag":832,"props":3193,"children":3194},{"style":1097},[3195],{"type":35,"value":2457},{"type":30,"tag":832,"props":3197,"children":3198},{"style":845},[3199],{"type":35,"value":848},{"type":30,"tag":832,"props":3201,"children":3202},{"style":845},[3203],{"type":35,"value":853},{"type":30,"tag":832,"props":3205,"children":3206},{"style":856},[3207],{"type":35,"value":2470},{"type":30,"tag":832,"props":3209,"children":3210},{"style":845},[3211],{"type":35,"value":853},{"type":30,"tag":832,"props":3213,"children":3214},{"style":2438},[3215],{"type":35,"value":2479},{"type":30,"tag":832,"props":3217,"children":3218},{"class":834,"line":473},[3219,3223,3227,3232,3236,3240,3244,3248,3252],{"type":30,"tag":832,"props":3220,"children":3221},{"style":991},[3222],{"type":35,"value":994},{"type":30,"tag":832,"props":3224,"children":3225},{"style":997},[3226],{"type":35,"value":1000},{"type":30,"tag":832,"props":3228,"children":3229},{"style":1003},[3230],{"type":35,"value":3231},"computed",{"type":30,"tag":832,"props":3233,"children":3234},{"style":997},[3235],{"type":35,"value":1011},{"type":30,"tag":832,"props":3237,"children":3238},{"style":991},[3239],{"type":35,"value":1016},{"type":30,"tag":832,"props":3241,"children":3242},{"style":845},[3243],{"type":35,"value":1021},{"type":30,"tag":832,"props":3245,"children":3246},{"style":856},[3247],{"type":35,"value":1026},{"type":30,"tag":832,"props":3249,"children":3250},{"style":845},[3251],{"type":35,"value":853},{"type":30,"tag":832,"props":3253,"children":3254},{"style":845},[3255],{"type":35,"value":1035},{"type":30,"tag":832,"props":3257,"children":3258},{"class":834,"line":1038},[3259,3263,3267,3271,3275,3279,3283,3287,3291],{"type":30,"tag":832,"props":3260,"children":3261},{"style":991},[3262],{"type":35,"value":994},{"type":30,"tag":832,"props":3264,"children":3265},{"style":997},[3266],{"type":35,"value":1000},{"type":30,"tag":832,"props":3268,"children":3269},{"style":1003},[3270],{"type":35,"value":2495},{"type":30,"tag":832,"props":3272,"children":3273},{"style":997},[3274],{"type":35,"value":1011},{"type":30,"tag":832,"props":3276,"children":3277},{"style":991},[3278],{"type":35,"value":1016},{"type":30,"tag":832,"props":3280,"children":3281},{"style":845},[3282],{"type":35,"value":1021},{"type":30,"tag":832,"props":3284,"children":3285},{"style":856},[3286],{"type":35,"value":547},{"type":30,"tag":832,"props":3288,"children":3289},{"style":845},[3290],{"type":35,"value":853},{"type":30,"tag":832,"props":3292,"children":3293},{"style":845},[3294],{"type":35,"value":1035},{"type":30,"tag":832,"props":3296,"children":3297},{"class":834,"line":1089},[3298],{"type":30,"tag":832,"props":3299,"children":3300},{"emptyLinePlaceholder":1190},[3301],{"type":35,"value":1193},{"type":30,"tag":832,"props":3303,"children":3304},{"class":834,"line":1145},[3305,3309,3313,3317,3321,3325,3329,3333],{"type":30,"tag":832,"props":3306,"children":3307},{"style":1276},[3308],{"type":35,"value":1279},{"type":30,"tag":832,"props":3310,"children":3311},{"style":845},[3312],{"type":35,"value":2318},{"type":30,"tag":832,"props":3314,"children":3315},{"style":1097},[3316],{"type":35,"value":1639},{"type":30,"tag":832,"props":3318,"children":3319},{"style":845},[3320],{"type":35,"value":1011},{"type":30,"tag":832,"props":3322,"children":3323},{"style":845},[3324],{"type":35,"value":1299},{"type":30,"tag":832,"props":3326,"children":3327},{"style":1588},[3328],{"type":35,"value":2370},{"type":30,"tag":832,"props":3330,"children":3331},{"style":997},[3332],{"type":35,"value":1661},{"type":30,"tag":832,"props":3334,"children":3335},{"style":845},[3336],{"type":35,"value":1035},{"type":30,"tag":832,"props":3338,"children":3339},{"class":834,"line":1186},[3340,3344,3349,3353,3358,3363,3367,3371,3375,3380,3384,3388,3393,3398,3403,3407],{"type":30,"tag":832,"props":3341,"children":3342},{"style":1276},[3343],{"type":35,"value":1279},{"type":30,"tag":832,"props":3345,"children":3346},{"style":1097},[3347],{"type":35,"value":3348}," account",{"type":30,"tag":832,"props":3350,"children":3351},{"style":845},[3352],{"type":35,"value":1299},{"type":30,"tag":832,"props":3354,"children":3355},{"style":1588},[3356],{"type":35,"value":3357}," computed",{"type":30,"tag":832,"props":3359,"children":3360},{"style":997},[3361],{"type":35,"value":3362},"(()",{"type":30,"tag":832,"props":3364,"children":3365},{"style":1097},[3366],{"type":35,"value":1820},{"type":30,"tag":832,"props":3368,"children":3369},{"style":839},[3370],{"type":35,"value":1639},{"type":30,"tag":832,"props":3372,"children":3373},{"style":845},[3374],{"type":35,"value":641},{"type":30,"tag":832,"props":3376,"children":3377},{"style":991},[3378],{"type":35,"value":3379},"value",{"type":30,"tag":832,"props":3381,"children":3382},{"style":997},[3383],{"type":35,"value":1742},{"type":30,"tag":832,"props":3385,"children":3386},{"style":1365},[3387],{"type":35,"value":1747},{"type":30,"tag":832,"props":3389,"children":3390},{"style":997},[3391],{"type":35,"value":3392},"]",{"type":30,"tag":832,"props":3394,"children":3395},{"style":1097},[3396],{"type":35,"value":3397}," ??",{"type":30,"tag":832,"props":3399,"children":3400},{"style":1365},[3401],{"type":35,"value":3402}," null",{"type":30,"tag":832,"props":3404,"children":3405},{"style":997},[3406],{"type":35,"value":1605},{"type":30,"tag":832,"props":3408,"children":3409},{"style":845},[3410],{"type":35,"value":1035},{"type":30,"tag":832,"props":3412,"children":3413},{"class":834,"line":1196},[3414,3418,3422],{"type":30,"tag":832,"props":3415,"children":3416},{"style":2438},[3417],{"type":35,"value":2846},{"type":30,"tag":832,"props":3419,"children":3420},{"style":2444},[3421],{"type":35,"value":2447},{"type":30,"tag":832,"props":3423,"children":3424},{"style":2438},[3425],{"type":35,"value":2479},{"type":30,"tag":832,"props":3427,"children":3428},{"class":834,"line":1230},[3429],{"type":30,"tag":832,"props":3430,"children":3431},{"emptyLinePlaceholder":1190},[3432],{"type":35,"value":1193},{"type":30,"tag":832,"props":3434,"children":3435},{"class":834,"line":1264},[3436,3440,3444],{"type":30,"tag":832,"props":3437,"children":3438},{"style":2438},[3439],{"type":35,"value":2441},{"type":30,"tag":832,"props":3441,"children":3442},{"style":2444},[3443],{"type":35,"value":2873},{"type":30,"tag":832,"props":3445,"children":3446},{"style":2438},[3447],{"type":35,"value":2479},{"type":30,"tag":832,"props":3449,"children":3450},{"class":834,"line":1272},[3451,3455,3459,3463,3467,3471,3475,3479,3483,3488,3492,3496,3501,3506,3510,3514,3518,3522,3527,3531,3535,3539,3543],{"type":30,"tag":832,"props":3452,"children":3453},{"style":2438},[3454],{"type":35,"value":2885},{"type":30,"tag":832,"props":3456,"children":3457},{"style":2444},[3458],{"type":35,"value":31},{"type":30,"tag":832,"props":3460,"children":3461},{"style":1097},[3462],{"type":35,"value":2895},{"type":30,"tag":832,"props":3464,"children":3465},{"style":845},[3466],{"type":35,"value":848},{"type":30,"tag":832,"props":3468,"children":3469},{"style":845},[3470],{"type":35,"value":853},{"type":30,"tag":832,"props":3472,"children":3473},{"style":839},[3474],{"type":35,"value":1970},{"type":30,"tag":832,"props":3476,"children":3477},{"style":845},[3478],{"type":35,"value":853},{"type":30,"tag":832,"props":3480,"children":3481},{"style":2438},[3482],{"type":35,"value":2948},{"type":30,"tag":832,"props":3484,"children":3485},{"style":845},[3486],{"type":35,"value":3487},"{{",{"type":30,"tag":832,"props":3489,"children":3490},{"style":839},[3491],{"type":35,"value":3348},{"type":30,"tag":832,"props":3493,"children":3494},{"style":845},[3495],{"type":35,"value":641},{"type":30,"tag":832,"props":3497,"children":3498},{"style":991},[3499],{"type":35,"value":3500},"name",{"type":30,"tag":832,"props":3502,"children":3503},{"style":845},[3504],{"type":35,"value":3505}," }}",{"type":30,"tag":832,"props":3507,"children":3508},{"style":2951},[3509],{"type":35,"value":1679},{"type":30,"tag":832,"props":3511,"children":3512},{"style":845},[3513],{"type":35,"value":3487},{"type":30,"tag":832,"props":3515,"children":3516},{"style":839},[3517],{"type":35,"value":3348},{"type":30,"tag":832,"props":3519,"children":3520},{"style":845},[3521],{"type":35,"value":641},{"type":30,"tag":832,"props":3523,"children":3524},{"style":991},[3525],{"type":35,"value":3526},"username",{"type":30,"tag":832,"props":3528,"children":3529},{"style":845},[3530],{"type":35,"value":3505},{"type":30,"tag":832,"props":3532,"children":3533},{"style":2951},[3534],{"type":35,"value":1605},{"type":30,"tag":832,"props":3536,"children":3537},{"style":2438},[3538],{"type":35,"value":2846},{"type":30,"tag":832,"props":3540,"children":3541},{"style":2444},[3542],{"type":35,"value":31},{"type":30,"tag":832,"props":3544,"children":3545},{"style":2438},[3546],{"type":35,"value":2479},{"type":30,"tag":832,"props":3548,"children":3549},{"class":834,"line":1307},[3550,3554,3558],{"type":30,"tag":832,"props":3551,"children":3552},{"style":2438},[3553],{"type":35,"value":2846},{"type":30,"tag":832,"props":3555,"children":3556},{"style":2444},[3557],{"type":35,"value":2873},{"type":30,"tag":832,"props":3559,"children":3560},{"style":2438},[3561],{"type":35,"value":2479},{"type":30,"tag":919,"props":3563,"children":3564},{},[3565],{"type":30,"tag":31,"props":3566,"children":3567},{},[3568,3574,3575,3581],{"type":30,"tag":38,"props":3569,"children":3571},{"className":3570},[],[3572],{"type":35,"value":3573},"account.name",{"type":35,"value":617},{"type":30,"tag":38,"props":3576,"children":3578},{"className":3577},[],[3579],{"type":35,"value":3580},"account.username",{"type":35,"value":3582}," 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":30,"tag":97,"props":3584,"children":3586},{"id":3585},"getting-an-access-token",[3587],{"type":35,"value":3588},"Getting an access token",{"type":30,"tag":31,"props":3590,"children":3591},{},[3592,3594,3600],{"type":35,"value":3593},"Calling any protected API means acquiring an access token for its scopes. ",{"type":30,"tag":38,"props":3595,"children":3597},{"className":3596},[],[3598],{"type":35,"value":3599},"useMsalAuthentication",{"type":35,"value":3601}," wraps that:",{"type":30,"tag":822,"props":3603,"children":3605},{"className":2427,"code":3604,"language":1026,"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",[3606],{"type":30,"tag":38,"props":3607,"children":3608},{"__ignoreMap":7},[3609,3648,3688,3736,3743,3803,3824,3870,3881,3888,3928,3947,3989,3996,4007],{"type":30,"tag":832,"props":3610,"children":3611},{"class":834,"line":835},[3612,3616,3620,3624,3628,3632,3636,3640,3644],{"type":30,"tag":832,"props":3613,"children":3614},{"style":2438},[3615],{"type":35,"value":2441},{"type":30,"tag":832,"props":3617,"children":3618},{"style":2444},[3619],{"type":35,"value":2447},{"type":30,"tag":832,"props":3621,"children":3622},{"style":1097},[3623],{"type":35,"value":2452},{"type":30,"tag":832,"props":3625,"children":3626},{"style":1097},[3627],{"type":35,"value":2457},{"type":30,"tag":832,"props":3629,"children":3630},{"style":845},[3631],{"type":35,"value":848},{"type":30,"tag":832,"props":3633,"children":3634},{"style":845},[3635],{"type":35,"value":853},{"type":30,"tag":832,"props":3637,"children":3638},{"style":856},[3639],{"type":35,"value":2470},{"type":30,"tag":832,"props":3641,"children":3642},{"style":845},[3643],{"type":35,"value":853},{"type":30,"tag":832,"props":3645,"children":3646},{"style":2438},[3647],{"type":35,"value":2479},{"type":30,"tag":832,"props":3649,"children":3650},{"class":834,"line":473},[3651,3655,3659,3664,3668,3672,3676,3680,3684],{"type":30,"tag":832,"props":3652,"children":3653},{"style":991},[3654],{"type":35,"value":994},{"type":30,"tag":832,"props":3656,"children":3657},{"style":997},[3658],{"type":35,"value":1000},{"type":30,"tag":832,"props":3660,"children":3661},{"style":1003},[3662],{"type":35,"value":3663},"watch",{"type":30,"tag":832,"props":3665,"children":3666},{"style":997},[3667],{"type":35,"value":1011},{"type":30,"tag":832,"props":3669,"children":3670},{"style":991},[3671],{"type":35,"value":1016},{"type":30,"tag":832,"props":3673,"children":3674},{"style":845},[3675],{"type":35,"value":1021},{"type":30,"tag":832,"props":3677,"children":3678},{"style":856},[3679],{"type":35,"value":1026},{"type":30,"tag":832,"props":3681,"children":3682},{"style":845},[3683],{"type":35,"value":853},{"type":30,"tag":832,"props":3685,"children":3686},{"style":845},[3687],{"type":35,"value":1035},{"type":30,"tag":832,"props":3689,"children":3690},{"class":834,"line":1038},[3691,3695,3699,3703,3707,3712,3716,3720,3724,3728,3732],{"type":30,"tag":832,"props":3692,"children":3693},{"style":991},[3694],{"type":35,"value":994},{"type":30,"tag":832,"props":3696,"children":3697},{"style":997},[3698],{"type":35,"value":1000},{"type":30,"tag":832,"props":3700,"children":3701},{"style":1003},[3702],{"type":35,"value":3599},{"type":30,"tag":832,"props":3704,"children":3705},{"style":845},[3706],{"type":35,"value":1057},{"type":30,"tag":832,"props":3708,"children":3709},{"style":1003},[3710],{"type":35,"value":3711}," InteractionType",{"type":30,"tag":832,"props":3713,"children":3714},{"style":997},[3715],{"type":35,"value":1011},{"type":30,"tag":832,"props":3717,"children":3718},{"style":991},[3719],{"type":35,"value":1016},{"type":30,"tag":832,"props":3721,"children":3722},{"style":845},[3723],{"type":35,"value":1021},{"type":30,"tag":832,"props":3725,"children":3726},{"style":856},[3727],{"type":35,"value":547},{"type":30,"tag":832,"props":3729,"children":3730},{"style":845},[3731],{"type":35,"value":853},{"type":30,"tag":832,"props":3733,"children":3734},{"style":845},[3735],{"type":35,"value":1035},{"type":30,"tag":832,"props":3737,"children":3738},{"class":834,"line":1089},[3739],{"type":30,"tag":832,"props":3740,"children":3741},{"emptyLinePlaceholder":1190},[3742],{"type":35,"value":1193},{"type":30,"tag":832,"props":3744,"children":3745},{"class":834,"line":1145},[3746,3750,3754,3759,3763,3768,3772,3776,3780,3785,3789,3793,3798],{"type":30,"tag":832,"props":3747,"children":3748},{"style":1276},[3749],{"type":35,"value":1279},{"type":30,"tag":832,"props":3751,"children":3752},{"style":845},[3753],{"type":35,"value":2318},{"type":30,"tag":832,"props":3755,"children":3756},{"style":1097},[3757],{"type":35,"value":3758}," result",{"type":30,"tag":832,"props":3760,"children":3761},{"style":845},[3762],{"type":35,"value":1057},{"type":30,"tag":832,"props":3764,"children":3765},{"style":1097},[3766],{"type":35,"value":3767}," error",{"type":30,"tag":832,"props":3769,"children":3770},{"style":845},[3771],{"type":35,"value":1057},{"type":30,"tag":832,"props":3773,"children":3774},{"style":1097},[3775],{"type":35,"value":2339},{"type":30,"tag":832,"props":3777,"children":3778},{"style":845},[3779],{"type":35,"value":1057},{"type":30,"tag":832,"props":3781,"children":3782},{"style":1097},[3783],{"type":35,"value":3784}," acquireToken",{"type":30,"tag":832,"props":3786,"children":3787},{"style":845},[3788],{"type":35,"value":1011},{"type":30,"tag":832,"props":3790,"children":3791},{"style":845},[3792],{"type":35,"value":1299},{"type":30,"tag":832,"props":3794,"children":3795},{"style":1588},[3796],{"type":35,"value":3797}," useMsalAuthentication",{"type":30,"tag":832,"props":3799,"children":3800},{"style":997},[3801],{"type":35,"value":3802},"(\n",{"type":30,"tag":832,"props":3804,"children":3805},{"class":834,"line":1186},[3806,3811,3815,3820],{"type":30,"tag":832,"props":3807,"children":3808},{"style":839},[3809],{"type":35,"value":3810},"  InteractionType",{"type":30,"tag":832,"props":3812,"children":3813},{"style":845},[3814],{"type":35,"value":641},{"type":30,"tag":832,"props":3816,"children":3817},{"style":991},[3818],{"type":35,"value":3819},"Popup",{"type":30,"tag":832,"props":3821,"children":3822},{"style":845},[3823],{"type":35,"value":1372},{"type":30,"tag":832,"props":3825,"children":3826},{"class":834,"line":1196},[3827,3832,3837,3841,3846,3850,3854,3858,3862,3866],{"type":30,"tag":832,"props":3828,"children":3829},{"style":997},[3830],{"type":35,"value":3831},"  {",{"type":30,"tag":832,"props":3833,"children":3834},{"style":1311},[3835],{"type":35,"value":3836}," scopes",{"type":30,"tag":832,"props":3838,"children":3839},{"style":845},[3840],{"type":35,"value":1289},{"type":30,"tag":832,"props":3842,"children":3843},{"style":997},[3844],{"type":35,"value":3845}," [",{"type":30,"tag":832,"props":3847,"children":3848},{"style":845},[3849],{"type":35,"value":853},{"type":30,"tag":832,"props":3851,"children":3852},{"style":856},[3853],{"type":35,"value":805},{"type":30,"tag":832,"props":3855,"children":3856},{"style":845},[3857],{"type":35,"value":853},{"type":30,"tag":832,"props":3859,"children":3860},{"style":997},[3861],{"type":35,"value":3392},{"type":30,"tag":832,"props":3863,"children":3864},{"style":997},[3865],{"type":35,"value":1011},{"type":30,"tag":832,"props":3867,"children":3868},{"style":845},[3869],{"type":35,"value":1372},{"type":30,"tag":832,"props":3871,"children":3872},{"class":834,"line":1230},[3873,3877],{"type":30,"tag":832,"props":3874,"children":3875},{"style":997},[3876],{"type":35,"value":1605},{"type":30,"tag":832,"props":3878,"children":3879},{"style":845},[3880],{"type":35,"value":1035},{"type":30,"tag":832,"props":3882,"children":3883},{"class":834,"line":1264},[3884],{"type":30,"tag":832,"props":3885,"children":3886},{"emptyLinePlaceholder":1190},[3887],{"type":35,"value":1193},{"type":30,"tag":832,"props":3889,"children":3890},{"class":834,"line":1272},[3891,3895,3899,3904,3908,3912,3916,3920,3924],{"type":30,"tag":832,"props":3892,"children":3893},{"style":1588},[3894],{"type":35,"value":3663},{"type":30,"tag":832,"props":3896,"children":3897},{"style":997},[3898],{"type":35,"value":1595},{"type":30,"tag":832,"props":3900,"children":3901},{"style":839},[3902],{"type":35,"value":3903},"result",{"type":30,"tag":832,"props":3905,"children":3906},{"style":845},[3907],{"type":35,"value":1057},{"type":30,"tag":832,"props":3909,"children":3910},{"style":997},[3911],{"type":35,"value":1679},{"type":30,"tag":832,"props":3913,"children":3914},{"style":1808},[3915],{"type":35,"value":3379},{"type":30,"tag":832,"props":3917,"children":3918},{"style":997},[3919],{"type":35,"value":1605},{"type":30,"tag":832,"props":3921,"children":3922},{"style":1097},[3923],{"type":35,"value":1820},{"type":30,"tag":832,"props":3925,"children":3926},{"style":997},[3927],{"type":35,"value":1304},{"type":30,"tag":832,"props":3929,"children":3930},{"class":834,"line":1307},[3931,3935,3939,3943],{"type":30,"tag":832,"props":3932,"children":3933},{"style":1097},[3934],{"type":35,"value":1833},{"type":30,"tag":832,"props":3936,"children":3937},{"style":997},[3938],{"type":35,"value":1679},{"type":30,"tag":832,"props":3940,"children":3941},{"style":839},[3942],{"type":35,"value":3379},{"type":30,"tag":832,"props":3944,"children":3945},{"style":997},[3946],{"type":35,"value":1893},{"type":30,"tag":832,"props":3948,"children":3949},{"class":834,"line":1325},[3950,3955,3959,3964,3968,3972,3976,3981,3985],{"type":30,"tag":832,"props":3951,"children":3952},{"style":839},[3953],{"type":35,"value":3954},"    console",{"type":30,"tag":832,"props":3956,"children":3957},{"style":845},[3958],{"type":35,"value":641},{"type":30,"tag":832,"props":3960,"children":3961},{"style":1588},[3962],{"type":35,"value":3963},"log",{"type":30,"tag":832,"props":3965,"children":3966},{"style":997},[3967],{"type":35,"value":1595},{"type":30,"tag":832,"props":3969,"children":3970},{"style":839},[3971],{"type":35,"value":3379},{"type":30,"tag":832,"props":3973,"children":3974},{"style":845},[3975],{"type":35,"value":641},{"type":30,"tag":832,"props":3977,"children":3978},{"style":991},[3979],{"type":35,"value":3980},"accessToken",{"type":30,"tag":832,"props":3982,"children":3983},{"style":997},[3984],{"type":35,"value":1605},{"type":30,"tag":832,"props":3986,"children":3987},{"style":845},[3988],{"type":35,"value":1035},{"type":30,"tag":832,"props":3990,"children":3991},{"class":834,"line":1375},[3992],{"type":30,"tag":832,"props":3993,"children":3994},{"style":997},[3995],{"type":35,"value":1987},{"type":30,"tag":832,"props":3997,"children":3998},{"class":834,"line":1420},[3999,4003],{"type":30,"tag":832,"props":4000,"children":4001},{"style":997},[4002],{"type":35,"value":1996},{"type":30,"tag":832,"props":4004,"children":4005},{"style":845},[4006],{"type":35,"value":1035},{"type":30,"tag":832,"props":4008,"children":4009},{"class":834,"line":1449},[4010,4014,4018],{"type":30,"tag":832,"props":4011,"children":4012},{"style":2438},[4013],{"type":35,"value":2846},{"type":30,"tag":832,"props":4015,"children":4016},{"style":2444},[4017],{"type":35,"value":2447},{"type":30,"tag":832,"props":4019,"children":4020},{"style":2438},[4021],{"type":35,"value":2479},{"type":30,"tag":31,"props":4023,"children":4024},{},[4025,4027,4033,4035,4040,4042,4048,4050,4055],{"type":35,"value":4026},"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":30,"tag":38,"props":4028,"children":4030},{"className":4029},[],[4031],{"type":35,"value":4032},"acquireToken",{"type":35,"value":4034}," to trigger it manually, plus ",{"type":30,"tag":38,"props":4036,"children":4038},{"className":4037},[],[4039],{"type":35,"value":3903},{"type":35,"value":4041},", ",{"type":30,"tag":38,"props":4043,"children":4045},{"className":4044},[],[4046],{"type":35,"value":4047},"error",{"type":35,"value":4049},", and ",{"type":30,"tag":38,"props":4051,"children":4053},{"className":4052},[],[4054],{"type":35,"value":2406},{"type":35,"value":4056}," as refs.",{"type":30,"tag":31,"props":4058,"children":4059},{},[4060,4062,4069,4071,4077],{"type":35,"value":4061},"The sequence it runs is ",{"type":30,"tag":68,"props":4063,"children":4066},{"href":4064,"rel":4065},"https://learn.microsoft.com/en-us/entra/identity-platform/scenario-spa-acquire-token",[72],[4067],{"type":35,"value":4068},"the pattern Microsoft recommends",{"type":35,"value":4070},". Try ",{"type":30,"tag":38,"props":4072,"children":4074},{"className":4073},[],[4075],{"type":35,"value":4076},"acquireTokenSilent",{"type":35,"value":4078}," first, which returns a cached access token or refreshes it in the background. If that fails, fall back to an interactive prompt.",{"type":30,"tag":31,"props":4080,"children":4081},{},[4082,4084,4090,4092,4098,4100,4106,4108,4113],{"type":35,"value":4083},"Pass ",{"type":30,"tag":38,"props":4085,"children":4087},{"className":4086},[],[4088],{"type":35,"value":4089},"InteractionType.Popup",{"type":35,"value":4091}," or ",{"type":30,"tag":38,"props":4093,"children":4095},{"className":4094},[],[4096],{"type":35,"value":4097},"InteractionType.Redirect",{"type":35,"value":4099}," rather than ",{"type":30,"tag":38,"props":4101,"children":4103},{"className":4102},[],[4104],{"type":35,"value":4105},"Silent",{"type":35,"value":4107},". 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":30,"tag":38,"props":4109,"children":4111},{"className":4110},[],[4112],{"type":35,"value":4105},{"type":35,"value":4114}," gives you no fallback path.",{"type":30,"tag":31,"props":4116,"children":4117},{},[4118,4120,4125,4127,4132],{"type":35,"value":4119},"Request the scopes for the API you are actually calling. A token for ",{"type":30,"tag":38,"props":4121,"children":4123},{"className":4122},[],[4124],{"type":35,"value":805},{"type":35,"value":4126}," 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":30,"tag":38,"props":4128,"children":4130},{"className":4129},[],[4131],{"type":35,"value":4032},{"type":35,"value":4133}," with an override instead of widening the original request:",{"type":30,"tag":822,"props":4135,"children":4137},{"className":970,"code":4136,"language":972,"meta":7,"style":7},"await acquireToken({ scopes: [\"api://your-api-id/Files.Read\"] });\n",[4138],{"type":30,"tag":38,"props":4139,"children":4140},{"__ignoreMap":7},[4141],{"type":30,"tag":832,"props":4142,"children":4143},{"class":834,"line":835},[4144,4150,4154,4158,4162,4166,4170,4174,4179,4183,4187,4191],{"type":30,"tag":832,"props":4145,"children":4147},{"style":4146},"--shiki-default:#BB9AF7;--shiki-default-font-style:italic",[4148],{"type":35,"value":4149},"await",{"type":30,"tag":832,"props":4151,"children":4152},{"style":1588},[4153],{"type":35,"value":3784},{"type":30,"tag":832,"props":4155,"children":4156},{"style":997},[4157],{"type":35,"value":2762},{"type":30,"tag":832,"props":4159,"children":4160},{"style":1311},[4161],{"type":35,"value":3836},{"type":30,"tag":832,"props":4163,"children":4164},{"style":845},[4165],{"type":35,"value":1289},{"type":30,"tag":832,"props":4167,"children":4168},{"style":997},[4169],{"type":35,"value":3845},{"type":30,"tag":832,"props":4171,"children":4172},{"style":845},[4173],{"type":35,"value":853},{"type":30,"tag":832,"props":4175,"children":4176},{"style":856},[4177],{"type":35,"value":4178},"api://your-api-id/Files.Read",{"type":30,"tag":832,"props":4180,"children":4181},{"style":845},[4182],{"type":35,"value":853},{"type":30,"tag":832,"props":4184,"children":4185},{"style":997},[4186],{"type":35,"value":3392},{"type":30,"tag":832,"props":4188,"children":4189},{"style":997},[4190],{"type":35,"value":2789},{"type":30,"tag":832,"props":4192,"children":4193},{"style":845},[4194],{"type":35,"value":1035},{"type":30,"tag":919,"props":4196,"children":4197},{},[4198],{"type":30,"tag":31,"props":4199,"children":4200},{},[4201,4203,4208],{"type":35,"value":4202},"Tokens are cached by MSAL, keyed by scope. Calling ",{"type":30,"tag":38,"props":4204,"children":4206},{"className":4205},[],[4207],{"type":35,"value":4076},{"type":35,"value":4209}," 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":30,"tag":97,"props":4211,"children":4213},{"id":4212},"calling-microsoft-graph",[4214],{"type":35,"value":4215},"Calling Microsoft Graph",{"type":30,"tag":31,"props":4217,"children":4218},{},[4219,4224,4226,4232],{"type":30,"tag":38,"props":4220,"children":4222},{"className":4221},[],[4223],{"type":35,"value":2228},{"type":35,"value":4225}," exposes a ",{"type":30,"tag":38,"props":4227,"children":4229},{"className":4228},[],[4230],{"type":35,"value":4231},"callMsGraph",{"type":35,"value":4233}," helper for the common case of reading the signed-in user's profile:",{"type":30,"tag":822,"props":4235,"children":4237},{"className":2427,"code":4236,"language":1026,"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",[4238],{"type":30,"tag":38,"props":4239,"children":4240},{"__ignoreMap":7},[4241,4280,4329,4340,4352,4364,4375,4402,4409,4444,4496,4532,4543,4550,4632,4639,4683,4716,4728,4781,4807,4838,4845,4856,4871,4878,4893,4953],{"type":30,"tag":832,"props":4242,"children":4243},{"class":834,"line":835},[4244,4248,4252,4256,4260,4264,4268,4272,4276],{"type":30,"tag":832,"props":4245,"children":4246},{"style":2438},[4247],{"type":35,"value":2441},{"type":30,"tag":832,"props":4249,"children":4250},{"style":2444},[4251],{"type":35,"value":2447},{"type":30,"tag":832,"props":4253,"children":4254},{"style":1097},[4255],{"type":35,"value":2452},{"type":30,"tag":832,"props":4257,"children":4258},{"style":1097},[4259],{"type":35,"value":2457},{"type":30,"tag":832,"props":4261,"children":4262},{"style":845},[4263],{"type":35,"value":848},{"type":30,"tag":832,"props":4265,"children":4266},{"style":845},[4267],{"type":35,"value":853},{"type":30,"tag":832,"props":4269,"children":4270},{"style":856},[4271],{"type":35,"value":2470},{"type":30,"tag":832,"props":4273,"children":4274},{"style":845},[4275],{"type":35,"value":853},{"type":30,"tag":832,"props":4277,"children":4278},{"style":2438},[4279],{"type":35,"value":2479},{"type":30,"tag":832,"props":4281,"children":4282},{"class":834,"line":473},[4283,4287,4291,4296,4300,4305,4309,4313,4317,4321,4325],{"type":30,"tag":832,"props":4284,"children":4285},{"style":991},[4286],{"type":35,"value":994},{"type":30,"tag":832,"props":4288,"children":4289},{"style":997},[4290],{"type":35,"value":1000},{"type":30,"tag":832,"props":4292,"children":4293},{"style":1003},[4294],{"type":35,"value":4295},"ref",{"type":30,"tag":832,"props":4297,"children":4298},{"style":845},[4299],{"type":35,"value":1057},{"type":30,"tag":832,"props":4301,"children":4302},{"style":1003},[4303],{"type":35,"value":4304}," watch",{"type":30,"tag":832,"props":4306,"children":4307},{"style":997},[4308],{"type":35,"value":1011},{"type":30,"tag":832,"props":4310,"children":4311},{"style":991},[4312],{"type":35,"value":1016},{"type":30,"tag":832,"props":4314,"children":4315},{"style":845},[4316],{"type":35,"value":1021},{"type":30,"tag":832,"props":4318,"children":4319},{"style":856},[4320],{"type":35,"value":1026},{"type":30,"tag":832,"props":4322,"children":4323},{"style":845},[4324],{"type":35,"value":853},{"type":30,"tag":832,"props":4326,"children":4327},{"style":845},[4328],{"type":35,"value":1035},{"type":30,"tag":832,"props":4330,"children":4331},{"class":834,"line":1038},[4332,4336],{"type":30,"tag":832,"props":4333,"children":4334},{"style":991},[4335],{"type":35,"value":994},{"type":30,"tag":832,"props":4337,"children":4338},{"style":997},[4339],{"type":35,"value":1304},{"type":30,"tag":832,"props":4341,"children":4342},{"class":834,"line":1089},[4343,4348],{"type":30,"tag":832,"props":4344,"children":4345},{"style":1003},[4346],{"type":35,"value":4347},"  useMsal",{"type":30,"tag":832,"props":4349,"children":4350},{"style":845},[4351],{"type":35,"value":1372},{"type":30,"tag":832,"props":4353,"children":4354},{"class":834,"line":1145},[4355,4360],{"type":30,"tag":832,"props":4356,"children":4357},{"style":1003},[4358],{"type":35,"value":4359},"  useMsalAuthentication",{"type":30,"tag":832,"props":4361,"children":4362},{"style":845},[4363],{"type":35,"value":1372},{"type":30,"tag":832,"props":4365,"children":4366},{"class":834,"line":1186},[4367,4371],{"type":30,"tag":832,"props":4368,"children":4369},{"style":1003},[4370],{"type":35,"value":3810},{"type":30,"tag":832,"props":4372,"children":4373},{"style":845},[4374],{"type":35,"value":1372},{"type":30,"tag":832,"props":4376,"children":4377},{"class":834,"line":1196},[4378,4382,4386,4390,4394,4398],{"type":30,"tag":832,"props":4379,"children":4380},{"style":997},[4381],{"type":35,"value":1556},{"type":30,"tag":832,"props":4383,"children":4384},{"style":991},[4385],{"type":35,"value":1016},{"type":30,"tag":832,"props":4387,"children":4388},{"style":845},[4389],{"type":35,"value":1021},{"type":30,"tag":832,"props":4391,"children":4392},{"style":856},[4393],{"type":35,"value":547},{"type":30,"tag":832,"props":4395,"children":4396},{"style":845},[4397],{"type":35,"value":853},{"type":30,"tag":832,"props":4399,"children":4400},{"style":845},[4401],{"type":35,"value":1035},{"type":30,"tag":832,"props":4403,"children":4404},{"class":834,"line":1230},[4405],{"type":30,"tag":832,"props":4406,"children":4407},{"emptyLinePlaceholder":1190},[4408],{"type":35,"value":1193},{"type":30,"tag":832,"props":4410,"children":4411},{"class":834,"line":1264},[4412,4416,4420,4424,4428,4432,4436,4440],{"type":30,"tag":832,"props":4413,"children":4414},{"style":1276},[4415],{"type":35,"value":1279},{"type":30,"tag":832,"props":4417,"children":4418},{"style":845},[4419],{"type":35,"value":2318},{"type":30,"tag":832,"props":4421,"children":4422},{"style":1097},[4423],{"type":35,"value":2357},{"type":30,"tag":832,"props":4425,"children":4426},{"style":845},[4427],{"type":35,"value":1011},{"type":30,"tag":832,"props":4429,"children":4430},{"style":845},[4431],{"type":35,"value":1299},{"type":30,"tag":832,"props":4433,"children":4434},{"style":1588},[4435],{"type":35,"value":2370},{"type":30,"tag":832,"props":4437,"children":4438},{"style":997},[4439],{"type":35,"value":1661},{"type":30,"tag":832,"props":4441,"children":4442},{"style":845},[4443],{"type":35,"value":1035},{"type":30,"tag":832,"props":4445,"children":4446},{"class":834,"line":1272},[4447,4451,4455,4459,4463,4467,4471,4475,4480,4484,4488,4492],{"type":30,"tag":832,"props":4448,"children":4449},{"style":1276},[4450],{"type":35,"value":1279},{"type":30,"tag":832,"props":4452,"children":4453},{"style":845},[4454],{"type":35,"value":2318},{"type":30,"tag":832,"props":4456,"children":4457},{"style":1097},[4458],{"type":35,"value":3758},{"type":30,"tag":832,"props":4460,"children":4461},{"style":845},[4462],{"type":35,"value":1011},{"type":30,"tag":832,"props":4464,"children":4465},{"style":845},[4466],{"type":35,"value":1299},{"type":30,"tag":832,"props":4468,"children":4469},{"style":1588},[4470],{"type":35,"value":3797},{"type":30,"tag":832,"props":4472,"children":4473},{"style":997},[4474],{"type":35,"value":1595},{"type":30,"tag":832,"props":4476,"children":4477},{"style":839},[4478],{"type":35,"value":4479},"InteractionType",{"type":30,"tag":832,"props":4481,"children":4482},{"style":845},[4483],{"type":35,"value":641},{"type":30,"tag":832,"props":4485,"children":4486},{"style":991},[4487],{"type":35,"value":3819},{"type":30,"tag":832,"props":4489,"children":4490},{"style":845},[4491],{"type":35,"value":1057},{"type":30,"tag":832,"props":4493,"children":4494},{"style":997},[4495],{"type":35,"value":1304},{"type":30,"tag":832,"props":4497,"children":4498},{"class":834,"line":1307},[4499,4504,4508,4512,4516,4520,4524,4528],{"type":30,"tag":832,"props":4500,"children":4501},{"style":1311},[4502],{"type":35,"value":4503},"  scopes",{"type":30,"tag":832,"props":4505,"children":4506},{"style":845},[4507],{"type":35,"value":1289},{"type":30,"tag":832,"props":4509,"children":4510},{"style":997},[4511],{"type":35,"value":3845},{"type":30,"tag":832,"props":4513,"children":4514},{"style":845},[4515],{"type":35,"value":853},{"type":30,"tag":832,"props":4517,"children":4518},{"style":856},[4519],{"type":35,"value":805},{"type":30,"tag":832,"props":4521,"children":4522},{"style":845},[4523],{"type":35,"value":853},{"type":30,"tag":832,"props":4525,"children":4526},{"style":997},[4527],{"type":35,"value":3392},{"type":30,"tag":832,"props":4529,"children":4530},{"style":845},[4531],{"type":35,"value":1372},{"type":30,"tag":832,"props":4533,"children":4534},{"class":834,"line":1325},[4535,4539],{"type":30,"tag":832,"props":4536,"children":4537},{"style":997},[4538],{"type":35,"value":1996},{"type":30,"tag":832,"props":4540,"children":4541},{"style":845},[4542],{"type":35,"value":1035},{"type":30,"tag":832,"props":4544,"children":4545},{"class":834,"line":1375},[4546],{"type":30,"tag":832,"props":4547,"children":4548},{"emptyLinePlaceholder":1190},[4549],{"type":35,"value":1193},{"type":30,"tag":832,"props":4551,"children":4552},{"class":834,"line":1420},[4553,4557,4562,4566,4571,4575,4580,4584,4589,4593,4598,4602,4607,4611,4615,4619,4624,4628],{"type":30,"tag":832,"props":4554,"children":4555},{"style":1276},[4556],{"type":35,"value":1279},{"type":30,"tag":832,"props":4558,"children":4559},{"style":1097},[4560],{"type":35,"value":4561}," profile",{"type":30,"tag":832,"props":4563,"children":4564},{"style":845},[4565],{"type":35,"value":1299},{"type":30,"tag":832,"props":4567,"children":4568},{"style":1588},[4569],{"type":35,"value":4570}," ref",{"type":30,"tag":832,"props":4572,"children":4573},{"style":845},[4574],{"type":35,"value":2441},{"type":30,"tag":832,"props":4576,"children":4577},{"style":839},[4578],{"type":35,"value":4579},"Record",{"type":30,"tag":832,"props":4581,"children":4582},{"style":845},[4583],{"type":35,"value":2441},{"type":30,"tag":832,"props":4585,"children":4586},{"style":1003},[4587],{"type":35,"value":4588},"string",{"type":30,"tag":832,"props":4590,"children":4591},{"style":845},[4592],{"type":35,"value":1057},{"type":30,"tag":832,"props":4594,"children":4595},{"style":1003},[4596],{"type":35,"value":4597}," unknown",{"type":30,"tag":832,"props":4599,"children":4600},{"style":845},[4601],{"type":35,"value":2948},{"type":30,"tag":832,"props":4603,"children":4604},{"style":845},[4605],{"type":35,"value":4606}," |",{"type":30,"tag":832,"props":4608,"children":4609},{"style":1003},[4610],{"type":35,"value":3402},{"type":30,"tag":832,"props":4612,"children":4613},{"style":845},[4614],{"type":35,"value":2948},{"type":30,"tag":832,"props":4616,"children":4617},{"style":997},[4618],{"type":35,"value":1595},{"type":30,"tag":832,"props":4620,"children":4621},{"style":1365},[4622],{"type":35,"value":4623},"null",{"type":30,"tag":832,"props":4625,"children":4626},{"style":997},[4627],{"type":35,"value":1605},{"type":30,"tag":832,"props":4629,"children":4630},{"style":845},[4631],{"type":35,"value":1035},{"type":30,"tag":832,"props":4633,"children":4634},{"class":834,"line":1449},[4635],{"type":30,"tag":832,"props":4636,"children":4637},{"emptyLinePlaceholder":1190},[4638],{"type":35,"value":1193},{"type":30,"tag":832,"props":4640,"children":4641},{"class":834,"line":1478},[4642,4646,4650,4654,4658,4663,4667,4671,4675,4679],{"type":30,"tag":832,"props":4643,"children":4644},{"style":1588},[4645],{"type":35,"value":3663},{"type":30,"tag":832,"props":4647,"children":4648},{"style":997},[4649],{"type":35,"value":1595},{"type":30,"tag":832,"props":4651,"children":4652},{"style":839},[4653],{"type":35,"value":3903},{"type":30,"tag":832,"props":4655,"children":4656},{"style":845},[4657],{"type":35,"value":1057},{"type":30,"tag":832,"props":4659,"children":4660},{"style":1276},[4661],{"type":35,"value":4662}," async",{"type":30,"tag":832,"props":4664,"children":4665},{"style":997},[4666],{"type":35,"value":1679},{"type":30,"tag":832,"props":4668,"children":4669},{"style":1808},[4670],{"type":35,"value":3379},{"type":30,"tag":832,"props":4672,"children":4673},{"style":997},[4674],{"type":35,"value":1605},{"type":30,"tag":832,"props":4676,"children":4677},{"style":1097},[4678],{"type":35,"value":1820},{"type":30,"tag":832,"props":4680,"children":4681},{"style":997},[4682],{"type":35,"value":1304},{"type":30,"tag":832,"props":4684,"children":4685},{"class":834,"line":1491},[4686,4690,4694,4698,4702,4707,4712],{"type":30,"tag":832,"props":4687,"children":4688},{"style":1097},[4689],{"type":35,"value":1833},{"type":30,"tag":832,"props":4691,"children":4692},{"style":997},[4693],{"type":35,"value":1679},{"type":30,"tag":832,"props":4695,"children":4696},{"style":1097},[4697],{"type":35,"value":2908},{"type":30,"tag":832,"props":4699,"children":4700},{"style":839},[4701],{"type":35,"value":3379},{"type":30,"tag":832,"props":4703,"children":4704},{"style":997},[4705],{"type":35,"value":4706},") ",{"type":30,"tag":832,"props":4708,"children":4709},{"style":4146},[4710],{"type":35,"value":4711},"return",{"type":30,"tag":832,"props":4713,"children":4714},{"style":845},[4715],{"type":35,"value":1035},{"type":30,"tag":832,"props":4717,"children":4718},{"class":834,"line":1508},[4719,4724],{"type":30,"tag":832,"props":4720,"children":4721},{"style":1097},[4722],{"type":35,"value":4723},"  try",{"type":30,"tag":832,"props":4725,"children":4726},{"style":997},[4727],{"type":35,"value":1304},{"type":30,"tag":832,"props":4729,"children":4730},{"class":834,"line":1538},[4731,4736,4740,4744,4748,4753,4757,4761,4765,4769,4773,4777],{"type":30,"tag":832,"props":4732,"children":4733},{"style":839},[4734],{"type":35,"value":4735},"    profile",{"type":30,"tag":832,"props":4737,"children":4738},{"style":845},[4739],{"type":35,"value":641},{"type":30,"tag":832,"props":4741,"children":4742},{"style":991},[4743],{"type":35,"value":3379},{"type":30,"tag":832,"props":4745,"children":4746},{"style":845},[4747],{"type":35,"value":1299},{"type":30,"tag":832,"props":4749,"children":4750},{"style":4146},[4751],{"type":35,"value":4752}," await",{"type":30,"tag":832,"props":4754,"children":4755},{"style":1588},[4756],{"type":35,"value":2357},{"type":30,"tag":832,"props":4758,"children":4759},{"style":997},[4760],{"type":35,"value":1595},{"type":30,"tag":832,"props":4762,"children":4763},{"style":839},[4764],{"type":35,"value":3379},{"type":30,"tag":832,"props":4766,"children":4767},{"style":845},[4768],{"type":35,"value":641},{"type":30,"tag":832,"props":4770,"children":4771},{"style":991},[4772],{"type":35,"value":3980},{"type":30,"tag":832,"props":4774,"children":4775},{"style":997},[4776],{"type":35,"value":1605},{"type":30,"tag":832,"props":4778,"children":4779},{"style":845},[4780],{"type":35,"value":1035},{"type":30,"tag":832,"props":4782,"children":4783},{"class":834,"line":1550},[4784,4789,4794,4798,4803],{"type":30,"tag":832,"props":4785,"children":4786},{"style":997},[4787],{"type":35,"value":4788},"  } ",{"type":30,"tag":832,"props":4790,"children":4791},{"style":1097},[4792],{"type":35,"value":4793},"catch",{"type":30,"tag":832,"props":4795,"children":4796},{"style":997},[4797],{"type":35,"value":1679},{"type":30,"tag":832,"props":4799,"children":4800},{"style":839},[4801],{"type":35,"value":4802},"e",{"type":30,"tag":832,"props":4804,"children":4805},{"style":997},[4806],{"type":35,"value":1893},{"type":30,"tag":832,"props":4808,"children":4809},{"class":834,"line":1563},[4810,4814,4818,4822,4826,4830,4834],{"type":30,"tag":832,"props":4811,"children":4812},{"style":839},[4813],{"type":35,"value":3954},{"type":30,"tag":832,"props":4815,"children":4816},{"style":845},[4817],{"type":35,"value":641},{"type":30,"tag":832,"props":4819,"children":4820},{"style":1588},[4821],{"type":35,"value":4047},{"type":30,"tag":832,"props":4823,"children":4824},{"style":997},[4825],{"type":35,"value":1595},{"type":30,"tag":832,"props":4827,"children":4828},{"style":839},[4829],{"type":35,"value":4802},{"type":30,"tag":832,"props":4831,"children":4832},{"style":997},[4833],{"type":35,"value":1605},{"type":30,"tag":832,"props":4835,"children":4836},{"style":845},[4837],{"type":35,"value":1035},{"type":30,"tag":832,"props":4839,"children":4840},{"class":834,"line":1571},[4841],{"type":30,"tag":832,"props":4842,"children":4843},{"style":997},[4844],{"type":35,"value":1987},{"type":30,"tag":832,"props":4846,"children":4847},{"class":834,"line":1612},[4848,4852],{"type":30,"tag":832,"props":4849,"children":4850},{"style":997},[4851],{"type":35,"value":1996},{"type":30,"tag":832,"props":4853,"children":4854},{"style":845},[4855],{"type":35,"value":1035},{"type":30,"tag":832,"props":4857,"children":4858},{"class":834,"line":1620},[4859,4863,4867],{"type":30,"tag":832,"props":4860,"children":4861},{"style":2438},[4862],{"type":35,"value":2846},{"type":30,"tag":832,"props":4864,"children":4865},{"style":2444},[4866],{"type":35,"value":2447},{"type":30,"tag":832,"props":4868,"children":4869},{"style":2438},[4870],{"type":35,"value":2479},{"type":30,"tag":832,"props":4872,"children":4873},{"class":834,"line":1629},[4874],{"type":30,"tag":832,"props":4875,"children":4876},{"emptyLinePlaceholder":1190},[4877],{"type":35,"value":1193},{"type":30,"tag":832,"props":4879,"children":4880},{"class":834,"line":1668},[4881,4885,4889],{"type":30,"tag":832,"props":4882,"children":4883},{"style":2438},[4884],{"type":35,"value":2441},{"type":30,"tag":832,"props":4886,"children":4887},{"style":2444},[4888],{"type":35,"value":2873},{"type":30,"tag":832,"props":4890,"children":4891},{"style":2438},[4892],{"type":35,"value":2479},{"type":30,"tag":832,"props":4894,"children":4895},{"class":834,"line":1714},[4896,4900,4904,4908,4912,4916,4921,4925,4929,4933,4937,4941,4945,4949],{"type":30,"tag":832,"props":4897,"children":4898},{"style":2438},[4899],{"type":35,"value":2885},{"type":30,"tag":832,"props":4901,"children":4902},{"style":2444},[4903],{"type":35,"value":822},{"type":30,"tag":832,"props":4905,"children":4906},{"style":1097},[4907],{"type":35,"value":2895},{"type":30,"tag":832,"props":4909,"children":4910},{"style":845},[4911],{"type":35,"value":848},{"type":30,"tag":832,"props":4913,"children":4914},{"style":845},[4915],{"type":35,"value":853},{"type":30,"tag":832,"props":4917,"children":4918},{"style":839},[4919],{"type":35,"value":4920},"profile",{"type":30,"tag":832,"props":4922,"children":4923},{"style":845},[4924],{"type":35,"value":853},{"type":30,"tag":832,"props":4926,"children":4927},{"style":2438},[4928],{"type":35,"value":2948},{"type":30,"tag":832,"props":4930,"children":4931},{"style":845},[4932],{"type":35,"value":3487},{"type":30,"tag":832,"props":4934,"children":4935},{"style":839},[4936],{"type":35,"value":4561},{"type":30,"tag":832,"props":4938,"children":4939},{"style":845},[4940],{"type":35,"value":3505},{"type":30,"tag":832,"props":4942,"children":4943},{"style":2438},[4944],{"type":35,"value":2846},{"type":30,"tag":832,"props":4946,"children":4947},{"style":2444},[4948],{"type":35,"value":822},{"type":30,"tag":832,"props":4950,"children":4951},{"style":2438},[4952],{"type":35,"value":2479},{"type":30,"tag":832,"props":4954,"children":4955},{"class":834,"line":1759},[4956,4960,4964],{"type":30,"tag":832,"props":4957,"children":4958},{"style":2438},[4959],{"type":35,"value":2846},{"type":30,"tag":832,"props":4961,"children":4962},{"style":2444},[4963],{"type":35,"value":2873},{"type":30,"tag":832,"props":4965,"children":4966},{"style":2438},[4967],{"type":35,"value":2479},{"type":30,"tag":31,"props":4969,"children":4970},{},[4971,4976,4978,4984,4986,4992,4994,5000,5002,5008],{"type":30,"tag":38,"props":4972,"children":4974},{"className":4973},[],[4975],{"type":35,"value":4231},{"type":35,"value":4977}," issues a ",{"type":30,"tag":38,"props":4979,"children":4981},{"className":4980},[],[4982],{"type":35,"value":4983},"GET",{"type":35,"value":4985}," against ",{"type":30,"tag":38,"props":4987,"children":4989},{"className":4988},[],[4990],{"type":35,"value":4991},"https://graph.microsoft.com/v1.0/me",{"type":35,"value":4993}," with the token as a bearer header. That endpoint is hardcoded, so treat it as a ",{"type":30,"tag":38,"props":4995,"children":4997},{"className":4996},[],[4998],{"type":35,"value":4999},"/me",{"type":35,"value":5001}," shortcut rather than a Graph client. For any other Graph resource, use the access token with ",{"type":30,"tag":38,"props":5003,"children":5005},{"className":5004},[],[5006],{"type":35,"value":5007},"fetch",{"type":35,"value":5009}," or the Graph SDK directly. The token is the part that was hard.",{"type":30,"tag":97,"props":5011,"children":5013},{"id":5012},"protecting-routes-with-vue-router",[5014],{"type":35,"value":5015},"Protecting routes with Vue Router",{"type":30,"tag":31,"props":5017,"children":5018},{},[5019],{"type":35,"value":5020},"The obvious guard is wrong in one specific way:",{"type":30,"tag":822,"props":5022,"children":5024},{"className":970,"code":5023,"language":972,"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",[5025],{"type":30,"tag":38,"props":5026,"children":5027},{"__ignoreMap":7},[5028,5036,5073,5145,5169,5176],{"type":30,"tag":832,"props":5029,"children":5030},{"class":834,"line":835},[5031],{"type":30,"tag":832,"props":5032,"children":5033},{"style":982},[5034],{"type":35,"value":5035},"// Broken on redirect returns.\n",{"type":30,"tag":832,"props":5037,"children":5038},{"class":834,"line":473},[5039,5043,5047,5052,5056,5061,5065,5069],{"type":30,"tag":832,"props":5040,"children":5041},{"style":839},[5042],{"type":35,"value":2074},{"type":30,"tag":832,"props":5044,"children":5045},{"style":845},[5046],{"type":35,"value":641},{"type":30,"tag":832,"props":5048,"children":5049},{"style":1588},[5050],{"type":35,"value":5051},"beforeEach",{"type":30,"tag":832,"props":5053,"children":5054},{"style":997},[5055],{"type":35,"value":1805},{"type":30,"tag":832,"props":5057,"children":5058},{"style":1808},[5059],{"type":35,"value":5060},"to",{"type":30,"tag":832,"props":5062,"children":5063},{"style":997},[5064],{"type":35,"value":1605},{"type":30,"tag":832,"props":5066,"children":5067},{"style":1097},[5068],{"type":35,"value":1820},{"type":30,"tag":832,"props":5070,"children":5071},{"style":997},[5072],{"type":35,"value":1304},{"type":30,"tag":832,"props":5074,"children":5075},{"class":834,"line":1038},[5076,5080,5084,5088,5092,5096,5100,5105,5109,5113,5117,5121,5125,5129,5133,5137,5141],{"type":30,"tag":832,"props":5077,"children":5078},{"style":1097},[5079],{"type":35,"value":1833},{"type":30,"tag":832,"props":5081,"children":5082},{"style":997},[5083],{"type":35,"value":1679},{"type":30,"tag":832,"props":5085,"children":5086},{"style":839},[5087],{"type":35,"value":5060},{"type":30,"tag":832,"props":5089,"children":5090},{"style":845},[5091],{"type":35,"value":641},{"type":30,"tag":832,"props":5093,"children":5094},{"style":839},[5095],{"type":35,"value":1349},{"type":30,"tag":832,"props":5097,"children":5098},{"style":845},[5099],{"type":35,"value":641},{"type":30,"tag":832,"props":5101,"children":5102},{"style":991},[5103],{"type":35,"value":5104},"requiresAuth",{"type":30,"tag":832,"props":5106,"children":5107},{"style":1097},[5108],{"type":35,"value":1874},{"type":30,"tag":832,"props":5110,"children":5111},{"style":839},[5112],{"type":35,"value":1581},{"type":30,"tag":832,"props":5114,"children":5115},{"style":845},[5116],{"type":35,"value":641},{"type":30,"tag":832,"props":5118,"children":5119},{"style":1588},[5120],{"type":35,"value":1656},{"type":30,"tag":832,"props":5122,"children":5123},{"style":997},[5124],{"type":35,"value":1661},{"type":30,"tag":832,"props":5126,"children":5127},{"style":845},[5128],{"type":35,"value":641},{"type":30,"tag":832,"props":5130,"children":5131},{"style":991},[5132],{"type":35,"value":1693},{"type":30,"tag":832,"props":5134,"children":5135},{"style":1097},[5136],{"type":35,"value":1855},{"type":30,"tag":832,"props":5138,"children":5139},{"style":1365},[5140],{"type":35,"value":1703},{"type":30,"tag":832,"props":5142,"children":5143},{"style":997},[5144],{"type":35,"value":1893},{"type":30,"tag":832,"props":5146,"children":5147},{"class":834,"line":1089},[5148,5153,5157,5161,5165],{"type":30,"tag":832,"props":5149,"children":5150},{"style":4146},[5151],{"type":35,"value":5152},"    return",{"type":30,"tag":832,"props":5154,"children":5155},{"style":845},[5156],{"type":35,"value":1021},{"type":30,"tag":832,"props":5158,"children":5159},{"style":856},[5160],{"type":35,"value":2780},{"type":30,"tag":832,"props":5162,"children":5163},{"style":845},[5164],{"type":35,"value":853},{"type":30,"tag":832,"props":5166,"children":5167},{"style":845},[5168],{"type":35,"value":1035},{"type":30,"tag":832,"props":5170,"children":5171},{"class":834,"line":1145},[5172],{"type":30,"tag":832,"props":5173,"children":5174},{"style":997},[5175],{"type":35,"value":1987},{"type":30,"tag":832,"props":5177,"children":5178},{"class":834,"line":1186},[5179,5183],{"type":30,"tag":832,"props":5180,"children":5181},{"style":997},[5182],{"type":35,"value":1996},{"type":30,"tag":832,"props":5184,"children":5185},{"style":845},[5186],{"type":35,"value":1035},{"type":30,"tag":31,"props":5188,"children":5189},{},[5190],{"type":35,"value":5191},"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":30,"tag":822,"props":5193,"children":5195},{"className":970,"code":5194,"language":972,"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",[5196],{"type":30,"tag":38,"props":5197,"children":5198},{"__ignoreMap":7},[5199,5207,5250,5295,5302,5324,5345,5365,5376,5421,5474,5481,5489,5518,5546,5553,5612,5619,5643,5679,5709,5721,5737,5749],{"type":30,"tag":832,"props":5200,"children":5201},{"class":834,"line":835},[5202],{"type":30,"tag":832,"props":5203,"children":5204},{"style":982},[5205],{"type":35,"value":5206},"// src/router/guards.ts\n",{"type":30,"tag":832,"props":5208,"children":5209},{"class":834,"line":473},[5210,5214,5218,5222,5226,5230,5234,5238,5242,5246],{"type":30,"tag":832,"props":5211,"children":5212},{"style":991},[5213],{"type":35,"value":994},{"type":30,"tag":832,"props":5215,"children":5216},{"style":1097},[5217],{"type":35,"value":1100},{"type":30,"tag":832,"props":5219,"children":5220},{"style":997},[5221],{"type":35,"value":1000},{"type":30,"tag":832,"props":5223,"children":5224},{"style":1003},[5225],{"type":35,"value":524},{"type":30,"tag":832,"props":5227,"children":5228},{"style":997},[5229],{"type":35,"value":1011},{"type":30,"tag":832,"props":5231,"children":5232},{"style":991},[5233],{"type":35,"value":1016},{"type":30,"tag":832,"props":5235,"children":5236},{"style":845},[5237],{"type":35,"value":1021},{"type":30,"tag":832,"props":5239,"children":5240},{"style":856},[5241],{"type":35,"value":516},{"type":30,"tag":832,"props":5243,"children":5244},{"style":845},[5245],{"type":35,"value":853},{"type":30,"tag":832,"props":5247,"children":5248},{"style":845},[5249],{"type":35,"value":1035},{"type":30,"tag":832,"props":5251,"children":5252},{"class":834,"line":1038},[5253,5257,5261,5265,5270,5274,5278,5282,5287,5291],{"type":30,"tag":832,"props":5254,"children":5255},{"style":991},[5256],{"type":35,"value":994},{"type":30,"tag":832,"props":5258,"children":5259},{"style":1097},[5260],{"type":35,"value":1100},{"type":30,"tag":832,"props":5262,"children":5263},{"style":997},[5264],{"type":35,"value":1000},{"type":30,"tag":832,"props":5266,"children":5267},{"style":1003},[5268],{"type":35,"value":5269},"Router",{"type":30,"tag":832,"props":5271,"children":5272},{"style":997},[5273],{"type":35,"value":1011},{"type":30,"tag":832,"props":5275,"children":5276},{"style":991},[5277],{"type":35,"value":1016},{"type":30,"tag":832,"props":5279,"children":5280},{"style":845},[5281],{"type":35,"value":1021},{"type":30,"tag":832,"props":5283,"children":5284},{"style":856},[5285],{"type":35,"value":5286},"vue-router",{"type":30,"tag":832,"props":5288,"children":5289},{"style":845},[5290],{"type":35,"value":853},{"type":30,"tag":832,"props":5292,"children":5293},{"style":845},[5294],{"type":35,"value":1035},{"type":30,"tag":832,"props":5296,"children":5297},{"class":834,"line":1089},[5298],{"type":30,"tag":832,"props":5299,"children":5300},{"emptyLinePlaceholder":1190},[5301],{"type":35,"value":1193},{"type":30,"tag":832,"props":5303,"children":5304},{"class":834,"line":1145},[5305,5310,5315,5320],{"type":30,"tag":832,"props":5306,"children":5307},{"style":991},[5308],{"type":35,"value":5309},"export",{"type":30,"tag":832,"props":5311,"children":5312},{"style":1097},[5313],{"type":35,"value":5314}," function",{"type":30,"tag":832,"props":5316,"children":5317},{"style":1588},[5318],{"type":35,"value":5319}," registerGuard",{"type":30,"tag":832,"props":5321,"children":5322},{"style":997},[5323],{"type":35,"value":3802},{"type":30,"tag":832,"props":5325,"children":5326},{"class":834,"line":1186},[5327,5332,5336,5341],{"type":30,"tag":832,"props":5328,"children":5329},{"style":1808},[5330],{"type":35,"value":5331},"  router",{"type":30,"tag":832,"props":5333,"children":5334},{"style":845},[5335],{"type":35,"value":1289},{"type":30,"tag":832,"props":5337,"children":5338},{"style":839},[5339],{"type":35,"value":5340}," Router",{"type":30,"tag":832,"props":5342,"children":5343},{"style":845},[5344],{"type":35,"value":1372},{"type":30,"tag":832,"props":5346,"children":5347},{"class":834,"line":1196},[5348,5352,5356,5361],{"type":30,"tag":832,"props":5349,"children":5350},{"style":1808},[5351],{"type":35,"value":1720},{"type":30,"tag":832,"props":5353,"children":5354},{"style":845},[5355],{"type":35,"value":1289},{"type":30,"tag":832,"props":5357,"children":5358},{"style":839},[5359],{"type":35,"value":5360}," PublicClientApplication",{"type":30,"tag":832,"props":5362,"children":5363},{"style":845},[5364],{"type":35,"value":1372},{"type":30,"tag":832,"props":5366,"children":5367},{"class":834,"line":1230},[5368,5372],{"type":30,"tag":832,"props":5369,"children":5370},{"style":997},[5371],{"type":35,"value":1605},{"type":30,"tag":832,"props":5373,"children":5374},{"style":997},[5375],{"type":35,"value":1304},{"type":30,"tag":832,"props":5377,"children":5378},{"class":834,"line":1264},[5379,5383,5387,5391,5395,5400,5404,5408,5412,5417],{"type":30,"tag":832,"props":5380,"children":5381},{"style":839},[5382],{"type":35,"value":5331},{"type":30,"tag":832,"props":5384,"children":5385},{"style":845},[5386],{"type":35,"value":641},{"type":30,"tag":832,"props":5388,"children":5389},{"style":1588},[5390],{"type":35,"value":5051},{"type":30,"tag":832,"props":5392,"children":5393},{"style":997},[5394],{"type":35,"value":1595},{"type":30,"tag":832,"props":5396,"children":5397},{"style":1276},[5398],{"type":35,"value":5399},"async",{"type":30,"tag":832,"props":5401,"children":5402},{"style":997},[5403],{"type":35,"value":1679},{"type":30,"tag":832,"props":5405,"children":5406},{"style":1808},[5407],{"type":35,"value":5060},{"type":30,"tag":832,"props":5409,"children":5410},{"style":997},[5411],{"type":35,"value":4706},{"type":30,"tag":832,"props":5413,"children":5414},{"style":1097},[5415],{"type":35,"value":5416},"=>",{"type":30,"tag":832,"props":5418,"children":5419},{"style":997},[5420],{"type":35,"value":1304},{"type":30,"tag":832,"props":5422,"children":5423},{"class":834,"line":1272},[5424,5429,5433,5437,5441,5445,5449,5453,5457,5461,5465,5470],{"type":30,"tag":832,"props":5425,"children":5426},{"style":1097},[5427],{"type":35,"value":5428},"    if",{"type":30,"tag":832,"props":5430,"children":5431},{"style":997},[5432],{"type":35,"value":1679},{"type":30,"tag":832,"props":5434,"children":5435},{"style":1097},[5436],{"type":35,"value":2908},{"type":30,"tag":832,"props":5438,"children":5439},{"style":839},[5440],{"type":35,"value":5060},{"type":30,"tag":832,"props":5442,"children":5443},{"style":845},[5444],{"type":35,"value":641},{"type":30,"tag":832,"props":5446,"children":5447},{"style":839},[5448],{"type":35,"value":1349},{"type":30,"tag":832,"props":5450,"children":5451},{"style":845},[5452],{"type":35,"value":641},{"type":30,"tag":832,"props":5454,"children":5455},{"style":991},[5456],{"type":35,"value":5104},{"type":30,"tag":832,"props":5458,"children":5459},{"style":997},[5460],{"type":35,"value":4706},{"type":30,"tag":832,"props":5462,"children":5463},{"style":4146},[5464],{"type":35,"value":4711},{"type":30,"tag":832,"props":5466,"children":5467},{"style":1365},[5468],{"type":35,"value":5469}," true",{"type":30,"tag":832,"props":5471,"children":5472},{"style":845},[5473],{"type":35,"value":1035},{"type":30,"tag":832,"props":5475,"children":5476},{"class":834,"line":1307},[5477],{"type":30,"tag":832,"props":5478,"children":5479},{"emptyLinePlaceholder":1190},[5480],{"type":35,"value":1193},{"type":30,"tag":832,"props":5482,"children":5483},{"class":834,"line":1325},[5484],{"type":30,"tag":832,"props":5485,"children":5486},{"style":982},[5487],{"type":35,"value":5488},"    // Both are safe to call repeatedly; MSAL no-ops after the first run.\n",{"type":30,"tag":832,"props":5490,"children":5491},{"class":834,"line":1375},[5492,5497,5501,5505,5510,5514],{"type":30,"tag":832,"props":5493,"children":5494},{"style":4146},[5495],{"type":35,"value":5496},"    await",{"type":30,"tag":832,"props":5498,"children":5499},{"style":839},[5500],{"type":35,"value":1581},{"type":30,"tag":832,"props":5502,"children":5503},{"style":845},[5504],{"type":35,"value":641},{"type":30,"tag":832,"props":5506,"children":5507},{"style":1588},[5508],{"type":35,"value":5509},"initialize",{"type":30,"tag":832,"props":5511,"children":5512},{"style":997},[5513],{"type":35,"value":1661},{"type":30,"tag":832,"props":5515,"children":5516},{"style":845},[5517],{"type":35,"value":1035},{"type":30,"tag":832,"props":5519,"children":5520},{"class":834,"line":1420},[5521,5525,5529,5533,5538,5542],{"type":30,"tag":832,"props":5522,"children":5523},{"style":4146},[5524],{"type":35,"value":5496},{"type":30,"tag":832,"props":5526,"children":5527},{"style":839},[5528],{"type":35,"value":1581},{"type":30,"tag":832,"props":5530,"children":5531},{"style":845},[5532],{"type":35,"value":641},{"type":30,"tag":832,"props":5534,"children":5535},{"style":1588},[5536],{"type":35,"value":5537},"handleRedirectPromise",{"type":30,"tag":832,"props":5539,"children":5540},{"style":997},[5541],{"type":35,"value":1661},{"type":30,"tag":832,"props":5543,"children":5544},{"style":845},[5545],{"type":35,"value":1035},{"type":30,"tag":832,"props":5547,"children":5548},{"class":834,"line":1449},[5549],{"type":30,"tag":832,"props":5550,"children":5551},{"emptyLinePlaceholder":1190},[5552],{"type":35,"value":1193},{"type":30,"tag":832,"props":5554,"children":5555},{"class":834,"line":1478},[5556,5560,5564,5568,5572,5576,5580,5584,5588,5592,5596,5600,5604,5608],{"type":30,"tag":832,"props":5557,"children":5558},{"style":1097},[5559],{"type":35,"value":5428},{"type":30,"tag":832,"props":5561,"children":5562},{"style":997},[5563],{"type":35,"value":1679},{"type":30,"tag":832,"props":5565,"children":5566},{"style":839},[5567],{"type":35,"value":1791},{"type":30,"tag":832,"props":5569,"children":5570},{"style":845},[5571],{"type":35,"value":641},{"type":30,"tag":832,"props":5573,"children":5574},{"style":1588},[5575],{"type":35,"value":1656},{"type":30,"tag":832,"props":5577,"children":5578},{"style":997},[5579],{"type":35,"value":1661},{"type":30,"tag":832,"props":5581,"children":5582},{"style":845},[5583],{"type":35,"value":641},{"type":30,"tag":832,"props":5585,"children":5586},{"style":991},[5587],{"type":35,"value":1693},{"type":30,"tag":832,"props":5589,"children":5590},{"style":1097},[5591],{"type":35,"value":1698},{"type":30,"tag":832,"props":5593,"children":5594},{"style":1365},[5595],{"type":35,"value":1703},{"type":30,"tag":832,"props":5597,"children":5598},{"style":997},[5599],{"type":35,"value":4706},{"type":30,"tag":832,"props":5601,"children":5602},{"style":4146},[5603],{"type":35,"value":4711},{"type":30,"tag":832,"props":5605,"children":5606},{"style":1365},[5607],{"type":35,"value":5469},{"type":30,"tag":832,"props":5609,"children":5610},{"style":845},[5611],{"type":35,"value":1035},{"type":30,"tag":832,"props":5613,"children":5614},{"class":834,"line":1491},[5615],{"type":30,"tag":832,"props":5616,"children":5617},{"emptyLinePlaceholder":1190},[5618],{"type":35,"value":1193},{"type":30,"tag":832,"props":5620,"children":5621},{"class":834,"line":1508},[5622,5626,5630,5634,5638],{"type":30,"tag":832,"props":5623,"children":5624},{"style":4146},[5625],{"type":35,"value":5496},{"type":30,"tag":832,"props":5627,"children":5628},{"style":839},[5629],{"type":35,"value":1581},{"type":30,"tag":832,"props":5631,"children":5632},{"style":845},[5633],{"type":35,"value":641},{"type":30,"tag":832,"props":5635,"children":5636},{"style":1588},[5637],{"type":35,"value":2704},{"type":30,"tag":832,"props":5639,"children":5640},{"style":997},[5641],{"type":35,"value":5642},"({\n",{"type":30,"tag":832,"props":5644,"children":5645},{"class":834,"line":1538},[5646,5651,5655,5659,5663,5667,5671,5675],{"type":30,"tag":832,"props":5647,"children":5648},{"style":1311},[5649],{"type":35,"value":5650},"      scopes",{"type":30,"tag":832,"props":5652,"children":5653},{"style":845},[5654],{"type":35,"value":1289},{"type":30,"tag":832,"props":5656,"children":5657},{"style":997},[5658],{"type":35,"value":3845},{"type":30,"tag":832,"props":5660,"children":5661},{"style":845},[5662],{"type":35,"value":853},{"type":30,"tag":832,"props":5664,"children":5665},{"style":856},[5666],{"type":35,"value":805},{"type":30,"tag":832,"props":5668,"children":5669},{"style":845},[5670],{"type":35,"value":853},{"type":30,"tag":832,"props":5672,"children":5673},{"style":997},[5674],{"type":35,"value":3392},{"type":30,"tag":832,"props":5676,"children":5677},{"style":845},[5678],{"type":35,"value":1372},{"type":30,"tag":832,"props":5680,"children":5681},{"class":834,"line":1550},[5682,5687,5691,5696,5700,5705],{"type":30,"tag":832,"props":5683,"children":5684},{"style":1311},[5685],{"type":35,"value":5686},"      redirectStartPage",{"type":30,"tag":832,"props":5688,"children":5689},{"style":845},[5690],{"type":35,"value":1289},{"type":30,"tag":832,"props":5692,"children":5693},{"style":839},[5694],{"type":35,"value":5695}," to",{"type":30,"tag":832,"props":5697,"children":5698},{"style":845},[5699],{"type":35,"value":641},{"type":30,"tag":832,"props":5701,"children":5702},{"style":991},[5703],{"type":35,"value":5704},"fullPath",{"type":30,"tag":832,"props":5706,"children":5707},{"style":845},[5708],{"type":35,"value":1372},{"type":30,"tag":832,"props":5710,"children":5711},{"class":834,"line":1563},[5712,5717],{"type":30,"tag":832,"props":5713,"children":5714},{"style":997},[5715],{"type":35,"value":5716},"    })",{"type":30,"tag":832,"props":5718,"children":5719},{"style":845},[5720],{"type":35,"value":1035},{"type":30,"tag":832,"props":5722,"children":5723},{"class":834,"line":1571},[5724,5728,5733],{"type":30,"tag":832,"props":5725,"children":5726},{"style":4146},[5727],{"type":35,"value":5152},{"type":30,"tag":832,"props":5729,"children":5730},{"style":1365},[5731],{"type":35,"value":5732}," false",{"type":30,"tag":832,"props":5734,"children":5735},{"style":845},[5736],{"type":35,"value":1035},{"type":30,"tag":832,"props":5738,"children":5739},{"class":834,"line":1612},[5740,5745],{"type":30,"tag":832,"props":5741,"children":5742},{"style":997},[5743],{"type":35,"value":5744},"  })",{"type":30,"tag":832,"props":5746,"children":5747},{"style":845},[5748],{"type":35,"value":1035},{"type":30,"tag":832,"props":5750,"children":5751},{"class":834,"line":1620},[5752],{"type":30,"tag":832,"props":5753,"children":5754},{"style":997},[5755],{"type":35,"value":1765},{"type":30,"tag":31,"props":5757,"children":5758},{},[5759,5765],{"type":30,"tag":38,"props":5760,"children":5762},{"className":5761},[],[5763],{"type":35,"value":5764},"redirectStartPage",{"type":35,"value":5766}," is what returns the user to the page they asked for instead of your app root.",{"type":30,"tag":31,"props":5768,"children":5769},{},[5770],{"type":35,"value":5771},"Mark the routes that need it and register the guard with the same instance you passed to the plugin:",{"type":30,"tag":822,"props":5773,"children":5775},{"className":970,"code":5774,"language":972,"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",[5776],{"type":30,"tag":38,"props":5777,"children":5778},{"__ignoreMap":7},[5779,5803,5828,5845,5900,5988,6000,6011,6018],{"type":30,"tag":832,"props":5780,"children":5781},{"class":834,"line":835},[5782,5786,5790,5794,5799],{"type":30,"tag":832,"props":5783,"children":5784},{"style":1276},[5785],{"type":35,"value":1279},{"type":30,"tag":832,"props":5787,"children":5788},{"style":1097},[5789],{"type":35,"value":1240},{"type":30,"tag":832,"props":5791,"children":5792},{"style":845},[5793],{"type":35,"value":1299},{"type":30,"tag":832,"props":5795,"children":5796},{"style":1588},[5797],{"type":35,"value":5798}," createRouter",{"type":30,"tag":832,"props":5800,"children":5801},{"style":997},[5802],{"type":35,"value":5642},{"type":30,"tag":832,"props":5804,"children":5805},{"class":834,"line":473},[5806,5811,5815,5820,5824],{"type":30,"tag":832,"props":5807,"children":5808},{"style":1311},[5809],{"type":35,"value":5810},"  history",{"type":30,"tag":832,"props":5812,"children":5813},{"style":845},[5814],{"type":35,"value":1289},{"type":30,"tag":832,"props":5816,"children":5817},{"style":1588},[5818],{"type":35,"value":5819}," createWebHistory",{"type":30,"tag":832,"props":5821,"children":5822},{"style":997},[5823],{"type":35,"value":1661},{"type":30,"tag":832,"props":5825,"children":5826},{"style":845},[5827],{"type":35,"value":1372},{"type":30,"tag":832,"props":5829,"children":5830},{"class":834,"line":1038},[5831,5836,5840],{"type":30,"tag":832,"props":5832,"children":5833},{"style":1311},[5834],{"type":35,"value":5835},"  routes",{"type":30,"tag":832,"props":5837,"children":5838},{"style":845},[5839],{"type":35,"value":1289},{"type":30,"tag":832,"props":5841,"children":5842},{"style":997},[5843],{"type":35,"value":5844}," [\n",{"type":30,"tag":832,"props":5846,"children":5847},{"class":834,"line":1089},[5848,5853,5858,5862,5866,5870,5874,5878,5883,5887,5892,5896],{"type":30,"tag":832,"props":5849,"children":5850},{"style":997},[5851],{"type":35,"value":5852},"    {",{"type":30,"tag":832,"props":5854,"children":5855},{"style":1311},[5856],{"type":35,"value":5857}," path",{"type":30,"tag":832,"props":5859,"children":5860},{"style":845},[5861],{"type":35,"value":1289},{"type":30,"tag":832,"props":5863,"children":5864},{"style":845},[5865],{"type":35,"value":1021},{"type":30,"tag":832,"props":5867,"children":5868},{"style":856},[5869],{"type":35,"value":2780},{"type":30,"tag":832,"props":5871,"children":5872},{"style":845},[5873],{"type":35,"value":853},{"type":30,"tag":832,"props":5875,"children":5876},{"style":845},[5877],{"type":35,"value":1057},{"type":30,"tag":832,"props":5879,"children":5880},{"style":1311},[5881],{"type":35,"value":5882}," component",{"type":30,"tag":832,"props":5884,"children":5885},{"style":845},[5886],{"type":35,"value":1289},{"type":30,"tag":832,"props":5888,"children":5889},{"style":991},[5890],{"type":35,"value":5891}," Home",{"type":30,"tag":832,"props":5893,"children":5894},{"style":997},[5895],{"type":35,"value":1011},{"type":30,"tag":832,"props":5897,"children":5898},{"style":845},[5899],{"type":35,"value":1372},{"type":30,"tag":832,"props":5901,"children":5902},{"class":834,"line":1145},[5903,5907,5911,5915,5919,5924,5928,5932,5936,5940,5945,5949,5954,5958,5962,5968,5972,5976,5980,5984],{"type":30,"tag":832,"props":5904,"children":5905},{"style":997},[5906],{"type":35,"value":5852},{"type":30,"tag":832,"props":5908,"children":5909},{"style":1311},[5910],{"type":35,"value":5857},{"type":30,"tag":832,"props":5912,"children":5913},{"style":845},[5914],{"type":35,"value":1289},{"type":30,"tag":832,"props":5916,"children":5917},{"style":845},[5918],{"type":35,"value":1021},{"type":30,"tag":832,"props":5920,"children":5921},{"style":856},[5922],{"type":35,"value":5923},"/profile",{"type":30,"tag":832,"props":5925,"children":5926},{"style":845},[5927],{"type":35,"value":853},{"type":30,"tag":832,"props":5929,"children":5930},{"style":845},[5931],{"type":35,"value":1057},{"type":30,"tag":832,"props":5933,"children":5934},{"style":1311},[5935],{"type":35,"value":5882},{"type":30,"tag":832,"props":5937,"children":5938},{"style":845},[5939],{"type":35,"value":1289},{"type":30,"tag":832,"props":5941,"children":5942},{"style":991},[5943],{"type":35,"value":5944}," Profile",{"type":30,"tag":832,"props":5946,"children":5947},{"style":845},[5948],{"type":35,"value":1057},{"type":30,"tag":832,"props":5950,"children":5951},{"style":1311},[5952],{"type":35,"value":5953}," meta",{"type":30,"tag":832,"props":5955,"children":5956},{"style":845},[5957],{"type":35,"value":1289},{"type":30,"tag":832,"props":5959,"children":5960},{"style":997},[5961],{"type":35,"value":2318},{"type":30,"tag":832,"props":5963,"children":5965},{"style":5964},"--shiki-default:#41A6B5",[5966],{"type":35,"value":5967}," requiresAuth",{"type":30,"tag":832,"props":5969,"children":5970},{"style":845},[5971],{"type":35,"value":1289},{"type":30,"tag":832,"props":5973,"children":5974},{"style":1365},[5975],{"type":35,"value":5469},{"type":30,"tag":832,"props":5977,"children":5978},{"style":997},[5979],{"type":35,"value":1011},{"type":30,"tag":832,"props":5981,"children":5982},{"style":997},[5983],{"type":35,"value":1011},{"type":30,"tag":832,"props":5985,"children":5986},{"style":845},[5987],{"type":35,"value":1372},{"type":30,"tag":832,"props":5989,"children":5990},{"class":834,"line":1186},[5991,5996],{"type":30,"tag":832,"props":5992,"children":5993},{"style":997},[5994],{"type":35,"value":5995},"  ]",{"type":30,"tag":832,"props":5997,"children":5998},{"style":845},[5999],{"type":35,"value":1372},{"type":30,"tag":832,"props":6001,"children":6002},{"class":834,"line":1196},[6003,6007],{"type":30,"tag":832,"props":6004,"children":6005},{"style":997},[6006],{"type":35,"value":1996},{"type":30,"tag":832,"props":6008,"children":6009},{"style":845},[6010],{"type":35,"value":1035},{"type":30,"tag":832,"props":6012,"children":6013},{"class":834,"line":1230},[6014],{"type":30,"tag":832,"props":6015,"children":6016},{"emptyLinePlaceholder":1190},[6017],{"type":35,"value":1193},{"type":30,"tag":832,"props":6019,"children":6020},{"class":834,"line":1264},[6021,6026,6030,6034,6038,6042,6046],{"type":30,"tag":832,"props":6022,"children":6023},{"style":1588},[6024],{"type":35,"value":6025},"registerGuard",{"type":30,"tag":832,"props":6027,"children":6028},{"style":997},[6029],{"type":35,"value":1595},{"type":30,"tag":832,"props":6031,"children":6032},{"style":839},[6033],{"type":35,"value":2074},{"type":30,"tag":832,"props":6035,"children":6036},{"style":845},[6037],{"type":35,"value":1057},{"type":30,"tag":832,"props":6039,"children":6040},{"style":839},[6041],{"type":35,"value":1581},{"type":30,"tag":832,"props":6043,"children":6044},{"style":997},[6045],{"type":35,"value":1605},{"type":30,"tag":832,"props":6047,"children":6048},{"style":845},[6049],{"type":35,"value":1035},{"type":30,"tag":31,"props":6051,"children":6052},{},[6053,6058,6060,6066,6068,6073],{"type":30,"tag":38,"props":6054,"children":6056},{"className":6055},[],[6057],{"type":35,"value":2228},{"type":35,"value":6059}," can't run here. It reads the component instance from ",{"type":30,"tag":38,"props":6061,"children":6063},{"className":6062},[],[6064],{"type":35,"value":6065},"getCurrentInstance()",{"type":35,"value":6067},", which is ",{"type":30,"tag":38,"props":6069,"children":6071},{"className":6070},[],[6072],{"type":35,"value":4623},{"type":35,"value":6074}," inside a navigation guard. Pass the MSAL instance in explicitly.",{"type":30,"tag":97,"props":6076,"children":6078},{"id":6077},"using-msal-in-nuxt",[6079],{"type":35,"value":6080},"Using MSAL in Nuxt",{"type":30,"tag":31,"props":6082,"children":6083},{},[6084,6089,6091,6097,6098,6103,6105,6111],{"type":30,"tag":38,"props":6085,"children":6087},{"className":6086},[],[6088],{"type":35,"value":516},{"type":35,"value":6090}," reads ",{"type":30,"tag":38,"props":6092,"children":6094},{"className":6093},[],[6095],{"type":35,"value":6096},"window",{"type":35,"value":617},{"type":30,"tag":38,"props":6099,"children":6101},{"className":6100},[],[6102],{"type":35,"value":1527},{"type":35,"value":6104},". 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":30,"tag":38,"props":6106,"children":6108},{"className":6107},[],[6109],{"type":35,"value":6110},"\u003CClientOnly>",{"type":35,"value":641},{"type":30,"tag":31,"props":6113,"children":6114},{},[6115,6116,6123,6125,6131],{"type":35,"value":2191},{"type":30,"tag":68,"props":6117,"children":6120},{"href":6118,"rel":6119},"https://github.com/DulanDev/vue3-msal/tree/main/samples/sample-with-nuxt",[72],[6121],{"type":35,"value":6122},"Nuxt sample in the repo",{"type":35,"value":6124}," uses two plugins instead, so ",{"type":30,"tag":38,"props":6126,"children":6128},{"className":6127},[],[6129],{"type":35,"value":6130},"$msal",{"type":35,"value":6132}," resolves on both sides.",{"type":30,"tag":31,"props":6134,"children":6135},{},[6136],{"type":35,"value":6137},"The client plugin builds and installs the instance:",{"type":30,"tag":822,"props":6139,"children":6141},{"className":970,"code":6140,"language":972,"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",[6142],{"type":30,"tag":38,"props":6143,"children":6144},{"__ignoreMap":7},[6145,6153,6200,6243,6250,6296,6326,6333,6360,6376,6428,6477,6526,6538,6583,6594,6601,6636,6664,6671,6706,6770,6777,6826],{"type":30,"tag":832,"props":6146,"children":6147},{"class":834,"line":835},[6148],{"type":30,"tag":832,"props":6149,"children":6150},{"style":982},[6151],{"type":35,"value":6152},"// app/plugins/msal.client.ts\n",{"type":30,"tag":832,"props":6154,"children":6155},{"class":834,"line":473},[6156,6160,6164,6168,6172,6176,6180,6184,6188,6192,6196],{"type":30,"tag":832,"props":6157,"children":6158},{"style":991},[6159],{"type":35,"value":994},{"type":30,"tag":832,"props":6161,"children":6162},{"style":997},[6163],{"type":35,"value":1000},{"type":30,"tag":832,"props":6165,"children":6166},{"style":1003},[6167],{"type":35,"value":1052},{"type":30,"tag":832,"props":6169,"children":6170},{"style":845},[6171],{"type":35,"value":1057},{"type":30,"tag":832,"props":6173,"children":6174},{"style":1003},[6175],{"type":35,"value":1062},{"type":30,"tag":832,"props":6177,"children":6178},{"style":997},[6179],{"type":35,"value":1011},{"type":30,"tag":832,"props":6181,"children":6182},{"style":991},[6183],{"type":35,"value":1016},{"type":30,"tag":832,"props":6185,"children":6186},{"style":845},[6187],{"type":35,"value":1021},{"type":30,"tag":832,"props":6189,"children":6190},{"style":856},[6191],{"type":35,"value":547},{"type":30,"tag":832,"props":6193,"children":6194},{"style":845},[6195],{"type":35,"value":853},{"type":30,"tag":832,"props":6197,"children":6198},{"style":845},[6199],{"type":35,"value":1035},{"type":30,"tag":832,"props":6201,"children":6202},{"class":834,"line":1038},[6203,6207,6211,6215,6219,6223,6227,6231,6235,6239],{"type":30,"tag":832,"props":6204,"children":6205},{"style":991},[6206],{"type":35,"value":994},{"type":30,"tag":832,"props":6208,"children":6209},{"style":1097},[6210],{"type":35,"value":1100},{"type":30,"tag":832,"props":6212,"children":6213},{"style":997},[6214],{"type":35,"value":1000},{"type":30,"tag":832,"props":6216,"children":6217},{"style":1003},[6218],{"type":35,"value":1109},{"type":30,"tag":832,"props":6220,"children":6221},{"style":997},[6222],{"type":35,"value":1011},{"type":30,"tag":832,"props":6224,"children":6225},{"style":991},[6226],{"type":35,"value":1016},{"type":30,"tag":832,"props":6228,"children":6229},{"style":845},[6230],{"type":35,"value":1021},{"type":30,"tag":832,"props":6232,"children":6233},{"style":856},[6234],{"type":35,"value":516},{"type":30,"tag":832,"props":6236,"children":6237},{"style":845},[6238],{"type":35,"value":853},{"type":30,"tag":832,"props":6240,"children":6241},{"style":845},[6242],{"type":35,"value":1035},{"type":30,"tag":832,"props":6244,"children":6245},{"class":834,"line":1089},[6246],{"type":30,"tag":832,"props":6247,"children":6248},{"emptyLinePlaceholder":1190},[6249],{"type":35,"value":1193},{"type":30,"tag":832,"props":6251,"children":6252},{"class":834,"line":1145},[6253,6257,6262,6267,6271,6275,6279,6284,6288,6292],{"type":30,"tag":832,"props":6254,"children":6255},{"style":991},[6256],{"type":35,"value":5309},{"type":30,"tag":832,"props":6258,"children":6259},{"style":991},[6260],{"type":35,"value":6261}," default",{"type":30,"tag":832,"props":6263,"children":6264},{"style":1588},[6265],{"type":35,"value":6266}," defineNuxtPlugin",{"type":30,"tag":832,"props":6268,"children":6269},{"style":997},[6270],{"type":35,"value":1595},{"type":30,"tag":832,"props":6272,"children":6273},{"style":1276},[6274],{"type":35,"value":5399},{"type":30,"tag":832,"props":6276,"children":6277},{"style":997},[6278],{"type":35,"value":1679},{"type":30,"tag":832,"props":6280,"children":6281},{"style":1808},[6282],{"type":35,"value":6283},"nuxtApp",{"type":30,"tag":832,"props":6285,"children":6286},{"style":997},[6287],{"type":35,"value":1605},{"type":30,"tag":832,"props":6289,"children":6290},{"style":1097},[6291],{"type":35,"value":1820},{"type":30,"tag":832,"props":6293,"children":6294},{"style":997},[6295],{"type":35,"value":1304},{"type":30,"tag":832,"props":6297,"children":6298},{"class":834,"line":1186},[6299,6304,6309,6313,6318,6322],{"type":30,"tag":832,"props":6300,"children":6301},{"style":1276},[6302],{"type":35,"value":6303},"  const",{"type":30,"tag":832,"props":6305,"children":6306},{"style":1097},[6307],{"type":35,"value":6308}," config",{"type":30,"tag":832,"props":6310,"children":6311},{"style":845},[6312],{"type":35,"value":1299},{"type":30,"tag":832,"props":6314,"children":6315},{"style":1588},[6316],{"type":35,"value":6317}," useRuntimeConfig",{"type":30,"tag":832,"props":6319,"children":6320},{"style":997},[6321],{"type":35,"value":1661},{"type":30,"tag":832,"props":6323,"children":6324},{"style":845},[6325],{"type":35,"value":1035},{"type":30,"tag":832,"props":6327,"children":6328},{"class":834,"line":1196},[6329],{"type":30,"tag":832,"props":6330,"children":6331},{"emptyLinePlaceholder":1190},[6332],{"type":35,"value":1193},{"type":30,"tag":832,"props":6334,"children":6335},{"class":834,"line":1230},[6336,6340,6344,6348,6352,6356],{"type":30,"tag":832,"props":6337,"children":6338},{"style":1276},[6339],{"type":35,"value":6303},{"type":30,"tag":832,"props":6341,"children":6342},{"style":1097},[6343],{"type":35,"value":1284},{"type":30,"tag":832,"props":6345,"children":6346},{"style":845},[6347],{"type":35,"value":1289},{"type":30,"tag":832,"props":6349,"children":6350},{"style":839},[6351],{"type":35,"value":1294},{"type":30,"tag":832,"props":6353,"children":6354},{"style":845},[6355],{"type":35,"value":1299},{"type":30,"tag":832,"props":6357,"children":6358},{"style":997},[6359],{"type":35,"value":1304},{"type":30,"tag":832,"props":6361,"children":6362},{"class":834,"line":1264},[6363,6368,6372],{"type":30,"tag":832,"props":6364,"children":6365},{"style":1311},[6366],{"type":35,"value":6367},"    auth",{"type":30,"tag":832,"props":6369,"children":6370},{"style":845},[6371],{"type":35,"value":1289},{"type":30,"tag":832,"props":6373,"children":6374},{"style":997},[6375],{"type":35,"value":1304},{"type":30,"tag":832,"props":6377,"children":6378},{"class":834,"line":1272},[6379,6384,6388,6393,6397,6402,6406,6411,6415,6420,6424],{"type":30,"tag":832,"props":6380,"children":6381},{"style":1311},[6382],{"type":35,"value":6383},"      clientId",{"type":30,"tag":832,"props":6385,"children":6386},{"style":845},[6387],{"type":35,"value":1289},{"type":30,"tag":832,"props":6389,"children":6390},{"style":1588},[6391],{"type":35,"value":6392}," String",{"type":30,"tag":832,"props":6394,"children":6395},{"style":997},[6396],{"type":35,"value":1595},{"type":30,"tag":832,"props":6398,"children":6399},{"style":839},[6400],{"type":35,"value":6401},"config",{"type":30,"tag":832,"props":6403,"children":6404},{"style":845},[6405],{"type":35,"value":641},{"type":30,"tag":832,"props":6407,"children":6408},{"style":839},[6409],{"type":35,"value":6410},"public",{"type":30,"tag":832,"props":6412,"children":6413},{"style":845},[6414],{"type":35,"value":641},{"type":30,"tag":832,"props":6416,"children":6417},{"style":991},[6418],{"type":35,"value":6419},"clientId",{"type":30,"tag":832,"props":6421,"children":6422},{"style":997},[6423],{"type":35,"value":1605},{"type":30,"tag":832,"props":6425,"children":6426},{"style":845},[6427],{"type":35,"value":1372},{"type":30,"tag":832,"props":6429,"children":6430},{"class":834,"line":1307},[6431,6436,6440,6444,6448,6452,6456,6460,6464,6469,6473],{"type":30,"tag":832,"props":6432,"children":6433},{"style":1311},[6434],{"type":35,"value":6435},"      authority",{"type":30,"tag":832,"props":6437,"children":6438},{"style":845},[6439],{"type":35,"value":1289},{"type":30,"tag":832,"props":6441,"children":6442},{"style":1588},[6443],{"type":35,"value":6392},{"type":30,"tag":832,"props":6445,"children":6446},{"style":997},[6447],{"type":35,"value":1595},{"type":30,"tag":832,"props":6449,"children":6450},{"style":839},[6451],{"type":35,"value":6401},{"type":30,"tag":832,"props":6453,"children":6454},{"style":845},[6455],{"type":35,"value":641},{"type":30,"tag":832,"props":6457,"children":6458},{"style":839},[6459],{"type":35,"value":6410},{"type":30,"tag":832,"props":6461,"children":6462},{"style":845},[6463],{"type":35,"value":641},{"type":30,"tag":832,"props":6465,"children":6466},{"style":991},[6467],{"type":35,"value":6468},"authority",{"type":30,"tag":832,"props":6470,"children":6471},{"style":997},[6472],{"type":35,"value":1605},{"type":30,"tag":832,"props":6474,"children":6475},{"style":845},[6476],{"type":35,"value":1372},{"type":30,"tag":832,"props":6478,"children":6479},{"class":834,"line":1325},[6480,6485,6489,6493,6497,6501,6505,6509,6513,6518,6522],{"type":30,"tag":832,"props":6481,"children":6482},{"style":1311},[6483],{"type":35,"value":6484},"      redirectUri",{"type":30,"tag":832,"props":6486,"children":6487},{"style":845},[6488],{"type":35,"value":1289},{"type":30,"tag":832,"props":6490,"children":6491},{"style":1588},[6492],{"type":35,"value":6392},{"type":30,"tag":832,"props":6494,"children":6495},{"style":997},[6496],{"type":35,"value":1595},{"type":30,"tag":832,"props":6498,"children":6499},{"style":839},[6500],{"type":35,"value":6401},{"type":30,"tag":832,"props":6502,"children":6503},{"style":845},[6504],{"type":35,"value":641},{"type":30,"tag":832,"props":6506,"children":6507},{"style":839},[6508],{"type":35,"value":6410},{"type":30,"tag":832,"props":6510,"children":6511},{"style":845},[6512],{"type":35,"value":641},{"type":30,"tag":832,"props":6514,"children":6515},{"style":991},[6516],{"type":35,"value":6517},"redirectUri",{"type":30,"tag":832,"props":6519,"children":6520},{"style":997},[6521],{"type":35,"value":1605},{"type":30,"tag":832,"props":6523,"children":6524},{"style":845},[6525],{"type":35,"value":1372},{"type":30,"tag":832,"props":6527,"children":6528},{"class":834,"line":1375},[6529,6534],{"type":30,"tag":832,"props":6530,"children":6531},{"style":997},[6532],{"type":35,"value":6533},"    }",{"type":30,"tag":832,"props":6535,"children":6536},{"style":845},[6537],{"type":35,"value":1372},{"type":30,"tag":832,"props":6539,"children":6540},{"class":834,"line":1420},[6541,6546,6550,6554,6559,6563,6567,6571,6575,6579],{"type":30,"tag":832,"props":6542,"children":6543},{"style":1311},[6544],{"type":35,"value":6545},"    cache",{"type":30,"tag":832,"props":6547,"children":6548},{"style":845},[6549],{"type":35,"value":1289},{"type":30,"tag":832,"props":6551,"children":6552},{"style":997},[6553],{"type":35,"value":1000},{"type":30,"tag":832,"props":6555,"children":6556},{"style":1311},[6557],{"type":35,"value":6558},"cacheLocation",{"type":30,"tag":832,"props":6560,"children":6561},{"style":845},[6562],{"type":35,"value":1289},{"type":30,"tag":832,"props":6564,"children":6565},{"style":845},[6566],{"type":35,"value":1021},{"type":30,"tag":832,"props":6568,"children":6569},{"style":856},[6570],{"type":35,"value":1527},{"type":30,"tag":832,"props":6572,"children":6573},{"style":845},[6574],{"type":35,"value":853},{"type":30,"tag":832,"props":6576,"children":6577},{"style":997},[6578],{"type":35,"value":1011},{"type":30,"tag":832,"props":6580,"children":6581},{"style":845},[6582],{"type":35,"value":1372},{"type":30,"tag":832,"props":6584,"children":6585},{"class":834,"line":1449},[6586,6590],{"type":30,"tag":832,"props":6587,"children":6588},{"style":997},[6589],{"type":35,"value":1484},{"type":30,"tag":832,"props":6591,"children":6592},{"style":845},[6593],{"type":35,"value":1035},{"type":30,"tag":832,"props":6595,"children":6596},{"class":834,"line":1478},[6597],{"type":30,"tag":832,"props":6598,"children":6599},{"emptyLinePlaceholder":1190},[6600],{"type":35,"value":1193},{"type":30,"tag":832,"props":6602,"children":6603},{"class":834,"line":1491},[6604,6608,6612,6616,6620,6624,6628,6632],{"type":30,"tag":832,"props":6605,"children":6606},{"style":1276},[6607],{"type":35,"value":6303},{"type":30,"tag":832,"props":6609,"children":6610},{"style":1097},[6611],{"type":35,"value":1581},{"type":30,"tag":832,"props":6613,"children":6614},{"style":845},[6615],{"type":35,"value":1299},{"type":30,"tag":832,"props":6617,"children":6618},{"style":1588},[6619],{"type":35,"value":1062},{"type":30,"tag":832,"props":6621,"children":6622},{"style":997},[6623],{"type":35,"value":1595},{"type":30,"tag":832,"props":6625,"children":6626},{"style":839},[6627],{"type":35,"value":1600},{"type":30,"tag":832,"props":6629,"children":6630},{"style":997},[6631],{"type":35,"value":1605},{"type":30,"tag":832,"props":6633,"children":6634},{"style":845},[6635],{"type":35,"value":1035},{"type":30,"tag":832,"props":6637,"children":6638},{"class":834,"line":1508},[6639,6644,6648,6652,6656,6660],{"type":30,"tag":832,"props":6640,"children":6641},{"style":4146},[6642],{"type":35,"value":6643},"  await",{"type":30,"tag":832,"props":6645,"children":6646},{"style":839},[6647],{"type":35,"value":1581},{"type":30,"tag":832,"props":6649,"children":6650},{"style":845},[6651],{"type":35,"value":641},{"type":30,"tag":832,"props":6653,"children":6654},{"style":1588},[6655],{"type":35,"value":5509},{"type":30,"tag":832,"props":6657,"children":6658},{"style":997},[6659],{"type":35,"value":1661},{"type":30,"tag":832,"props":6661,"children":6662},{"style":845},[6663],{"type":35,"value":1035},{"type":30,"tag":832,"props":6665,"children":6666},{"class":834,"line":1538},[6667],{"type":30,"tag":832,"props":6668,"children":6669},{"emptyLinePlaceholder":1190},[6670],{"type":35,"value":1193},{"type":30,"tag":832,"props":6672,"children":6673},{"class":834,"line":1550},[6674,6678,6682,6686,6690,6694,6698,6702],{"type":30,"tag":832,"props":6675,"children":6676},{"style":1276},[6677],{"type":35,"value":6303},{"type":30,"tag":832,"props":6679,"children":6680},{"style":1097},[6681],{"type":35,"value":1639},{"type":30,"tag":832,"props":6683,"children":6684},{"style":845},[6685],{"type":35,"value":1299},{"type":30,"tag":832,"props":6687,"children":6688},{"style":839},[6689],{"type":35,"value":1581},{"type":30,"tag":832,"props":6691,"children":6692},{"style":845},[6693],{"type":35,"value":641},{"type":30,"tag":832,"props":6695,"children":6696},{"style":1588},[6697],{"type":35,"value":1656},{"type":30,"tag":832,"props":6699,"children":6700},{"style":997},[6701],{"type":35,"value":1661},{"type":30,"tag":832,"props":6703,"children":6704},{"style":845},[6705],{"type":35,"value":1035},{"type":30,"tag":832,"props":6707,"children":6708},{"class":834,"line":1563},[6709,6713,6717,6721,6725,6729,6734,6738,6742,6746,6750,6754,6758,6762,6766],{"type":30,"tag":832,"props":6710,"children":6711},{"style":1097},[6712],{"type":35,"value":1833},{"type":30,"tag":832,"props":6714,"children":6715},{"style":997},[6716],{"type":35,"value":1679},{"type":30,"tag":832,"props":6718,"children":6719},{"style":839},[6720],{"type":35,"value":1684},{"type":30,"tag":832,"props":6722,"children":6723},{"style":997},[6724],{"type":35,"value":1742},{"type":30,"tag":832,"props":6726,"children":6727},{"style":1365},[6728],{"type":35,"value":1747},{"type":30,"tag":832,"props":6730,"children":6731},{"style":997},[6732],{"type":35,"value":6733},"]) ",{"type":30,"tag":832,"props":6735,"children":6736},{"style":839},[6737],{"type":35,"value":1791},{"type":30,"tag":832,"props":6739,"children":6740},{"style":845},[6741],{"type":35,"value":641},{"type":30,"tag":832,"props":6743,"children":6744},{"style":1588},[6745],{"type":35,"value":1729},{"type":30,"tag":832,"props":6747,"children":6748},{"style":997},[6749],{"type":35,"value":1595},{"type":30,"tag":832,"props":6751,"children":6752},{"style":839},[6753],{"type":35,"value":1684},{"type":30,"tag":832,"props":6755,"children":6756},{"style":997},[6757],{"type":35,"value":1742},{"type":30,"tag":832,"props":6759,"children":6760},{"style":1365},[6761],{"type":35,"value":1747},{"type":30,"tag":832,"props":6763,"children":6764},{"style":997},[6765],{"type":35,"value":1752},{"type":30,"tag":832,"props":6767,"children":6768},{"style":845},[6769],{"type":35,"value":1035},{"type":30,"tag":832,"props":6771,"children":6772},{"class":834,"line":1571},[6773],{"type":30,"tag":832,"props":6774,"children":6775},{"emptyLinePlaceholder":1190},[6776],{"type":35,"value":1193},{"type":30,"tag":832,"props":6778,"children":6779},{"class":834,"line":1612},[6780,6785,6789,6794,6798,6802,6806,6810,6814,6818,6822],{"type":30,"tag":832,"props":6781,"children":6782},{"style":839},[6783],{"type":35,"value":6784},"  nuxtApp",{"type":30,"tag":832,"props":6786,"children":6787},{"style":845},[6788],{"type":35,"value":641},{"type":30,"tag":832,"props":6790,"children":6791},{"style":991},[6792],{"type":35,"value":6793},"vueApp",{"type":30,"tag":832,"props":6795,"children":6796},{"style":845},[6797],{"type":35,"value":641},{"type":30,"tag":832,"props":6799,"children":6800},{"style":1588},[6801],{"type":35,"value":2065},{"type":30,"tag":832,"props":6803,"children":6804},{"style":997},[6805],{"type":35,"value":1595},{"type":30,"tag":832,"props":6807,"children":6808},{"style":839},[6809],{"type":35,"value":1052},{"type":30,"tag":832,"props":6811,"children":6812},{"style":845},[6813],{"type":35,"value":1057},{"type":30,"tag":832,"props":6815,"children":6816},{"style":839},[6817],{"type":35,"value":1581},{"type":30,"tag":832,"props":6819,"children":6820},{"style":997},[6821],{"type":35,"value":1605},{"type":30,"tag":832,"props":6823,"children":6824},{"style":845},[6825],{"type":35,"value":1035},{"type":30,"tag":832,"props":6827,"children":6828},{"class":834,"line":1620},[6829,6833],{"type":30,"tag":832,"props":6830,"children":6831},{"style":997},[6832],{"type":35,"value":1996},{"type":30,"tag":832,"props":6834,"children":6835},{"style":845},[6836],{"type":35,"value":1035},{"type":30,"tag":31,"props":6838,"children":6839},{},[6840,6842,6847],{"type":35,"value":6841},"This awaits ",{"type":30,"tag":38,"props":6843,"children":6845},{"className":6844},[],[6846],{"type":35,"value":2244},{"type":35,"value":6848}," explicitly, before the plugin is installed, so no component ever sees an uninitialized instance.",{"type":30,"tag":31,"props":6850,"children":6851},{},[6852,6854,6859,6860,6866],{"type":35,"value":6853},"The server plugin installs a stub with an empty account list, so ",{"type":30,"tag":38,"props":6855,"children":6857},{"className":6856},[],[6858],{"type":35,"value":2228},{"type":35,"value":617},{"type":30,"tag":38,"props":6861,"children":6863},{"className":6862},[],[6864],{"type":35,"value":6865},"useIsAuthenticated()",{"type":35,"value":6867}," 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":30,"tag":822,"props":6869,"children":6871},{"className":970,"code":6870,"language":972,"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",[6872],{"type":30,"tag":38,"props":6873,"children":6874},{"__ignoreMap":7},[6875,6883,6923,6963,7015,7059,7066,7101,7149,7179,7251,7323,7341,7362,7432,7444,7455,7475,7482,7547,7566,7596,7616,7627],{"type":30,"tag":832,"props":6876,"children":6877},{"class":834,"line":835},[6878],{"type":30,"tag":832,"props":6879,"children":6880},{"style":982},[6881],{"type":35,"value":6882},"// app/plugins/msal.server.ts\n",{"type":30,"tag":832,"props":6884,"children":6885},{"class":834,"line":473},[6886,6890,6894,6899,6903,6907,6911,6915,6919],{"type":30,"tag":832,"props":6887,"children":6888},{"style":991},[6889],{"type":35,"value":994},{"type":30,"tag":832,"props":6891,"children":6892},{"style":997},[6893],{"type":35,"value":1000},{"type":30,"tag":832,"props":6895,"children":6896},{"style":1003},[6897],{"type":35,"value":6898},"shallowReactive",{"type":30,"tag":832,"props":6900,"children":6901},{"style":997},[6902],{"type":35,"value":1011},{"type":30,"tag":832,"props":6904,"children":6905},{"style":991},[6906],{"type":35,"value":1016},{"type":30,"tag":832,"props":6908,"children":6909},{"style":845},[6910],{"type":35,"value":1021},{"type":30,"tag":832,"props":6912,"children":6913},{"style":856},[6914],{"type":35,"value":1026},{"type":30,"tag":832,"props":6916,"children":6917},{"style":845},[6918],{"type":35,"value":853},{"type":30,"tag":832,"props":6920,"children":6921},{"style":845},[6922],{"type":35,"value":1035},{"type":30,"tag":832,"props":6924,"children":6925},{"class":834,"line":1038},[6926,6930,6934,6939,6943,6947,6951,6955,6959],{"type":30,"tag":832,"props":6927,"children":6928},{"style":991},[6929],{"type":35,"value":994},{"type":30,"tag":832,"props":6931,"children":6932},{"style":997},[6933],{"type":35,"value":1000},{"type":30,"tag":832,"props":6935,"children":6936},{"style":1003},[6937],{"type":35,"value":6938},"InteractionStatus",{"type":30,"tag":832,"props":6940,"children":6941},{"style":997},[6942],{"type":35,"value":1011},{"type":30,"tag":832,"props":6944,"children":6945},{"style":991},[6946],{"type":35,"value":1016},{"type":30,"tag":832,"props":6948,"children":6949},{"style":845},[6950],{"type":35,"value":1021},{"type":30,"tag":832,"props":6952,"children":6953},{"style":856},[6954],{"type":35,"value":516},{"type":30,"tag":832,"props":6956,"children":6957},{"style":845},[6958],{"type":35,"value":853},{"type":30,"tag":832,"props":6960,"children":6961},{"style":845},[6962],{"type":35,"value":1035},{"type":30,"tag":832,"props":6964,"children":6965},{"class":834,"line":1089},[6966,6970,6974,6978,6983,6987,6991,6995,6999,7003,7007,7011],{"type":30,"tag":832,"props":6967,"children":6968},{"style":991},[6969],{"type":35,"value":994},{"type":30,"tag":832,"props":6971,"children":6972},{"style":1097},[6973],{"type":35,"value":1100},{"type":30,"tag":832,"props":6975,"children":6976},{"style":997},[6977],{"type":35,"value":1000},{"type":30,"tag":832,"props":6979,"children":6980},{"style":1003},[6981],{"type":35,"value":6982},"AccountInfo",{"type":30,"tag":832,"props":6984,"children":6985},{"style":845},[6986],{"type":35,"value":1057},{"type":30,"tag":832,"props":6988,"children":6989},{"style":1003},[6990],{"type":35,"value":5360},{"type":30,"tag":832,"props":6992,"children":6993},{"style":997},[6994],{"type":35,"value":1011},{"type":30,"tag":832,"props":6996,"children":6997},{"style":991},[6998],{"type":35,"value":1016},{"type":30,"tag":832,"props":7000,"children":7001},{"style":845},[7002],{"type":35,"value":1021},{"type":30,"tag":832,"props":7004,"children":7005},{"style":856},[7006],{"type":35,"value":516},{"type":30,"tag":832,"props":7008,"children":7009},{"style":845},[7010],{"type":35,"value":853},{"type":30,"tag":832,"props":7012,"children":7013},{"style":845},[7014],{"type":35,"value":1035},{"type":30,"tag":832,"props":7016,"children":7017},{"class":834,"line":1145},[7018,7022,7026,7030,7035,7039,7043,7047,7051,7055],{"type":30,"tag":832,"props":7019,"children":7020},{"style":991},[7021],{"type":35,"value":994},{"type":30,"tag":832,"props":7023,"children":7024},{"style":1097},[7025],{"type":35,"value":1100},{"type":30,"tag":832,"props":7027,"children":7028},{"style":997},[7029],{"type":35,"value":1000},{"type":30,"tag":832,"props":7031,"children":7032},{"style":1003},[7033],{"type":35,"value":7034},"State",{"type":30,"tag":832,"props":7036,"children":7037},{"style":997},[7038],{"type":35,"value":1011},{"type":30,"tag":832,"props":7040,"children":7041},{"style":991},[7042],{"type":35,"value":1016},{"type":30,"tag":832,"props":7044,"children":7045},{"style":845},[7046],{"type":35,"value":1021},{"type":30,"tag":832,"props":7048,"children":7049},{"style":856},[7050],{"type":35,"value":547},{"type":30,"tag":832,"props":7052,"children":7053},{"style":845},[7054],{"type":35,"value":853},{"type":30,"tag":832,"props":7056,"children":7057},{"style":845},[7058],{"type":35,"value":1035},{"type":30,"tag":832,"props":7060,"children":7061},{"class":834,"line":1186},[7062],{"type":30,"tag":832,"props":7063,"children":7064},{"emptyLinePlaceholder":1190},[7065],{"type":35,"value":1193},{"type":30,"tag":832,"props":7067,"children":7068},{"class":834,"line":1196},[7069,7073,7077,7081,7085,7089,7093,7097],{"type":30,"tag":832,"props":7070,"children":7071},{"style":991},[7072],{"type":35,"value":5309},{"type":30,"tag":832,"props":7074,"children":7075},{"style":991},[7076],{"type":35,"value":6261},{"type":30,"tag":832,"props":7078,"children":7079},{"style":1588},[7080],{"type":35,"value":6266},{"type":30,"tag":832,"props":7082,"children":7083},{"style":997},[7084],{"type":35,"value":1805},{"type":30,"tag":832,"props":7086,"children":7087},{"style":1808},[7088],{"type":35,"value":6283},{"type":30,"tag":832,"props":7090,"children":7091},{"style":997},[7092],{"type":35,"value":1605},{"type":30,"tag":832,"props":7094,"children":7095},{"style":1097},[7096],{"type":35,"value":1820},{"type":30,"tag":832,"props":7098,"children":7099},{"style":997},[7100],{"type":35,"value":1304},{"type":30,"tag":832,"props":7102,"children":7103},{"class":834,"line":1230},[7104,7108,7113,7117,7122,7127,7132,7137,7141,7145],{"type":30,"tag":832,"props":7105,"children":7106},{"style":1276},[7107],{"type":35,"value":6303},{"type":30,"tag":832,"props":7109,"children":7110},{"style":1097},[7111],{"type":35,"value":7112}," ssrInstance",{"type":30,"tag":832,"props":7114,"children":7115},{"style":845},[7116],{"type":35,"value":1299},{"type":30,"tag":832,"props":7118,"children":7119},{"style":845},[7120],{"type":35,"value":7121}," new",{"type":30,"tag":832,"props":7123,"children":7124},{"style":1588},[7125],{"type":35,"value":7126}," Proxy",{"type":30,"tag":832,"props":7128,"children":7129},{"style":997},[7130],{"type":35,"value":7131},"({} ",{"type":30,"tag":832,"props":7133,"children":7134},{"style":845},[7135],{"type":35,"value":7136},"as",{"type":30,"tag":832,"props":7138,"children":7139},{"style":839},[7140],{"type":35,"value":5360},{"type":30,"tag":832,"props":7142,"children":7143},{"style":845},[7144],{"type":35,"value":1057},{"type":30,"tag":832,"props":7146,"children":7147},{"style":997},[7148],{"type":35,"value":1304},{"type":30,"tag":832,"props":7150,"children":7151},{"class":834,"line":1264},[7152,7157,7161,7166,7170,7175],{"type":30,"tag":832,"props":7153,"children":7154},{"style":1588},[7155],{"type":35,"value":7156},"    get",{"type":30,"tag":832,"props":7158,"children":7159},{"style":997},[7160],{"type":35,"value":1595},{"type":30,"tag":832,"props":7162,"children":7163},{"style":1808},[7164],{"type":35,"value":7165},"_target",{"type":30,"tag":832,"props":7167,"children":7168},{"style":845},[7169],{"type":35,"value":1057},{"type":30,"tag":832,"props":7171,"children":7172},{"style":1808},[7173],{"type":35,"value":7174}," prop",{"type":30,"tag":832,"props":7176,"children":7177},{"style":997},[7178],{"type":35,"value":1893},{"type":30,"tag":832,"props":7180,"children":7181},{"class":834,"line":1272},[7182,7187,7191,7196,7200,7204,7208,7212,7216,7220,7224,7228,7233,7238,7242,7247],{"type":30,"tag":832,"props":7183,"children":7184},{"style":1097},[7185],{"type":35,"value":7186},"      if",{"type":30,"tag":832,"props":7188,"children":7189},{"style":997},[7190],{"type":35,"value":1679},{"type":30,"tag":832,"props":7192,"children":7193},{"style":839},[7194],{"type":35,"value":7195},"prop",{"type":30,"tag":832,"props":7197,"children":7198},{"style":1097},[7199],{"type":35,"value":1855},{"type":30,"tag":832,"props":7201,"children":7202},{"style":845},[7203],{"type":35,"value":1021},{"type":30,"tag":832,"props":7205,"children":7206},{"style":856},[7207],{"type":35,"value":1656},{"type":30,"tag":832,"props":7209,"children":7210},{"style":845},[7211],{"type":35,"value":853},{"type":30,"tag":832,"props":7213,"children":7214},{"style":997},[7215],{"type":35,"value":4706},{"type":30,"tag":832,"props":7217,"children":7218},{"style":4146},[7219],{"type":35,"value":4711},{"type":30,"tag":832,"props":7221,"children":7222},{"style":997},[7223],{"type":35,"value":2634},{"type":30,"tag":832,"props":7225,"children":7226},{"style":845},[7227],{"type":35,"value":1289},{"type":30,"tag":832,"props":7229,"children":7230},{"style":839},[7231],{"type":35,"value":7232}," AccountInfo",{"type":30,"tag":832,"props":7234,"children":7235},{"style":997},[7236],{"type":35,"value":7237},"[] ",{"type":30,"tag":832,"props":7239,"children":7240},{"style":1097},[7241],{"type":35,"value":5416},{"type":30,"tag":832,"props":7243,"children":7244},{"style":997},[7245],{"type":35,"value":7246}," []",{"type":30,"tag":832,"props":7248,"children":7249},{"style":845},[7250],{"type":35,"value":1035},{"type":30,"tag":832,"props":7252,"children":7253},{"class":834,"line":1307},[7254,7258,7262,7266,7270,7274,7279,7283,7287,7291,7295,7299,7303,7307,7311,7315,7319],{"type":30,"tag":832,"props":7255,"children":7256},{"style":1097},[7257],{"type":35,"value":7186},{"type":30,"tag":832,"props":7259,"children":7260},{"style":997},[7261],{"type":35,"value":1679},{"type":30,"tag":832,"props":7263,"children":7264},{"style":839},[7265],{"type":35,"value":7195},{"type":30,"tag":832,"props":7267,"children":7268},{"style":1097},[7269],{"type":35,"value":1855},{"type":30,"tag":832,"props":7271,"children":7272},{"style":845},[7273],{"type":35,"value":1021},{"type":30,"tag":832,"props":7275,"children":7276},{"style":856},[7277],{"type":35,"value":7278},"getActiveAccount",{"type":30,"tag":832,"props":7280,"children":7281},{"style":845},[7282],{"type":35,"value":853},{"type":30,"tag":832,"props":7284,"children":7285},{"style":997},[7286],{"type":35,"value":4706},{"type":30,"tag":832,"props":7288,"children":7289},{"style":4146},[7290],{"type":35,"value":4711},{"type":30,"tag":832,"props":7292,"children":7293},{"style":997},[7294],{"type":35,"value":2634},{"type":30,"tag":832,"props":7296,"children":7297},{"style":845},[7298],{"type":35,"value":1289},{"type":30,"tag":832,"props":7300,"children":7301},{"style":839},[7302],{"type":35,"value":7232},{"type":30,"tag":832,"props":7304,"children":7305},{"style":845},[7306],{"type":35,"value":4606},{"type":30,"tag":832,"props":7308,"children":7309},{"style":1003},[7310],{"type":35,"value":3402},{"type":30,"tag":832,"props":7312,"children":7313},{"style":1097},[7314],{"type":35,"value":1820},{"type":30,"tag":832,"props":7316,"children":7317},{"style":1365},[7318],{"type":35,"value":3402},{"type":30,"tag":832,"props":7320,"children":7321},{"style":845},[7322],{"type":35,"value":1035},{"type":30,"tag":832,"props":7324,"children":7325},{"class":834,"line":1325},[7326,7331,7336],{"type":30,"tag":832,"props":7327,"children":7328},{"style":4146},[7329],{"type":35,"value":7330},"      return",{"type":30,"tag":832,"props":7332,"children":7333},{"style":997},[7334],{"type":35,"value":7335}," () ",{"type":30,"tag":832,"props":7337,"children":7338},{"style":1097},[7339],{"type":35,"value":7340},"=>\n",{"type":30,"tag":832,"props":7342,"children":7343},{"class":834,"line":1375},[7344,7349,7353,7358],{"type":30,"tag":832,"props":7345,"children":7346},{"style":1003},[7347],{"type":35,"value":7348},"        Promise",{"type":30,"tag":832,"props":7350,"children":7351},{"style":845},[7352],{"type":35,"value":641},{"type":30,"tag":832,"props":7354,"children":7355},{"style":1588},[7356],{"type":35,"value":7357},"reject",{"type":30,"tag":832,"props":7359,"children":7360},{"style":997},[7361],{"type":35,"value":3802},{"type":30,"tag":832,"props":7363,"children":7364},{"class":834,"line":1420},[7365,7370,7375,7379,7384,7389,7394,7399,7403,7407,7411,7415,7420,7424,7428],{"type":30,"tag":832,"props":7366,"children":7367},{"style":845},[7368],{"type":35,"value":7369},"          new",{"type":30,"tag":832,"props":7371,"children":7372},{"style":1588},[7373],{"type":35,"value":7374}," Error",{"type":30,"tag":832,"props":7376,"children":7377},{"style":997},[7378],{"type":35,"value":1595},{"type":30,"tag":832,"props":7380,"children":7381},{"style":845},[7382],{"type":35,"value":7383},"`",{"type":30,"tag":832,"props":7385,"children":7386},{"style":856},[7387],{"type":35,"value":7388},"MSAL \"",{"type":30,"tag":832,"props":7390,"children":7391},{"style":991},[7392],{"type":35,"value":7393},"${",{"type":30,"tag":832,"props":7395,"children":7396},{"style":1588},[7397],{"type":35,"value":7398},"String",{"type":30,"tag":832,"props":7400,"children":7401},{"style":997},[7402],{"type":35,"value":1595},{"type":30,"tag":832,"props":7404,"children":7405},{"style":839},[7406],{"type":35,"value":7195},{"type":30,"tag":832,"props":7408,"children":7409},{"style":997},[7410],{"type":35,"value":1605},{"type":30,"tag":832,"props":7412,"children":7413},{"style":991},[7414],{"type":35,"value":1556},{"type":30,"tag":832,"props":7416,"children":7417},{"style":856},[7418],{"type":35,"value":7419},"\" not available during SSR",{"type":30,"tag":832,"props":7421,"children":7422},{"style":845},[7423],{"type":35,"value":7383},{"type":30,"tag":832,"props":7425,"children":7426},{"style":997},[7427],{"type":35,"value":1605},{"type":30,"tag":832,"props":7429,"children":7430},{"style":845},[7431],{"type":35,"value":1372},{"type":30,"tag":832,"props":7433,"children":7434},{"class":834,"line":1449},[7435,7440],{"type":30,"tag":832,"props":7436,"children":7437},{"style":997},[7438],{"type":35,"value":7439},"        )",{"type":30,"tag":832,"props":7441,"children":7442},{"style":845},[7443],{"type":35,"value":1035},{"type":30,"tag":832,"props":7445,"children":7446},{"class":834,"line":1478},[7447,7451],{"type":30,"tag":832,"props":7448,"children":7449},{"style":997},[7450],{"type":35,"value":6533},{"type":30,"tag":832,"props":7452,"children":7453},{"style":845},[7454],{"type":35,"value":1372},{"type":30,"tag":832,"props":7456,"children":7457},{"class":834,"line":1491},[7458,7463,7467,7471],{"type":30,"tag":832,"props":7459,"children":7460},{"style":997},[7461],{"type":35,"value":7462},"  }) ",{"type":30,"tag":832,"props":7464,"children":7465},{"style":845},[7466],{"type":35,"value":7136},{"type":30,"tag":832,"props":7468,"children":7469},{"style":839},[7470],{"type":35,"value":5360},{"type":30,"tag":832,"props":7472,"children":7473},{"style":845},[7474],{"type":35,"value":1035},{"type":30,"tag":832,"props":7476,"children":7477},{"class":834,"line":1508},[7478],{"type":30,"tag":832,"props":7479,"children":7480},{"emptyLinePlaceholder":1190},[7481],{"type":35,"value":1193},{"type":30,"tag":832,"props":7483,"children":7484},{"class":834,"line":1538},[7485,7489,7493,7497,7501,7505,7509,7514,7518,7522,7526,7531,7535,7539,7543],{"type":30,"tag":832,"props":7486,"children":7487},{"style":839},[7488],{"type":35,"value":6784},{"type":30,"tag":832,"props":7490,"children":7491},{"style":845},[7492],{"type":35,"value":641},{"type":30,"tag":832,"props":7494,"children":7495},{"style":839},[7496],{"type":35,"value":6793},{"type":30,"tag":832,"props":7498,"children":7499},{"style":845},[7500],{"type":35,"value":641},{"type":30,"tag":832,"props":7502,"children":7503},{"style":839},[7504],{"type":35,"value":6401},{"type":30,"tag":832,"props":7506,"children":7507},{"style":845},[7508],{"type":35,"value":641},{"type":30,"tag":832,"props":7510,"children":7511},{"style":839},[7512],{"type":35,"value":7513},"globalProperties",{"type":30,"tag":832,"props":7515,"children":7516},{"style":845},[7517],{"type":35,"value":641},{"type":30,"tag":832,"props":7519,"children":7520},{"style":991},[7521],{"type":35,"value":6130},{"type":30,"tag":832,"props":7523,"children":7524},{"style":845},[7525],{"type":35,"value":1299},{"type":30,"tag":832,"props":7527,"children":7528},{"style":1588},[7529],{"type":35,"value":7530}," shallowReactive",{"type":30,"tag":832,"props":7532,"children":7533},{"style":845},[7534],{"type":35,"value":2441},{"type":30,"tag":832,"props":7536,"children":7537},{"style":839},[7538],{"type":35,"value":7034},{"type":30,"tag":832,"props":7540,"children":7541},{"style":845},[7542],{"type":35,"value":2948},{"type":30,"tag":832,"props":7544,"children":7545},{"style":997},[7546],{"type":35,"value":5642},{"type":30,"tag":832,"props":7548,"children":7549},{"class":834,"line":1550},[7550,7554,7558,7562],{"type":30,"tag":832,"props":7551,"children":7552},{"style":1311},[7553],{"type":35,"value":1945},{"type":30,"tag":832,"props":7555,"children":7556},{"style":845},[7557],{"type":35,"value":1289},{"type":30,"tag":832,"props":7559,"children":7560},{"style":839},[7561],{"type":35,"value":7112},{"type":30,"tag":832,"props":7563,"children":7564},{"style":845},[7565],{"type":35,"value":1372},{"type":30,"tag":832,"props":7567,"children":7568},{"class":834,"line":1563},[7569,7574,7578,7583,7587,7592],{"type":30,"tag":832,"props":7570,"children":7571},{"style":1311},[7572],{"type":35,"value":7573},"    inProgress",{"type":30,"tag":832,"props":7575,"children":7576},{"style":845},[7577],{"type":35,"value":1289},{"type":30,"tag":832,"props":7579,"children":7580},{"style":839},[7581],{"type":35,"value":7582}," InteractionStatus",{"type":30,"tag":832,"props":7584,"children":7585},{"style":845},[7586],{"type":35,"value":641},{"type":30,"tag":832,"props":7588,"children":7589},{"style":991},[7590],{"type":35,"value":7591},"None",{"type":30,"tag":832,"props":7593,"children":7594},{"style":845},[7595],{"type":35,"value":1372},{"type":30,"tag":832,"props":7597,"children":7598},{"class":834,"line":1571},[7599,7604,7608,7612],{"type":30,"tag":832,"props":7600,"children":7601},{"style":1311},[7602],{"type":35,"value":7603},"    accounts",{"type":30,"tag":832,"props":7605,"children":7606},{"style":845},[7607],{"type":35,"value":1289},{"type":30,"tag":832,"props":7609,"children":7610},{"style":997},[7611],{"type":35,"value":7246},{"type":30,"tag":832,"props":7613,"children":7614},{"style":845},[7615],{"type":35,"value":1372},{"type":30,"tag":832,"props":7617,"children":7618},{"class":834,"line":1612},[7619,7623],{"type":30,"tag":832,"props":7620,"children":7621},{"style":997},[7622],{"type":35,"value":5744},{"type":30,"tag":832,"props":7624,"children":7625},{"style":845},[7626],{"type":35,"value":1035},{"type":30,"tag":832,"props":7628,"children":7629},{"class":834,"line":1620},[7630,7634],{"type":30,"tag":832,"props":7631,"children":7632},{"style":997},[7633],{"type":35,"value":1996},{"type":30,"tag":832,"props":7635,"children":7636},{"style":845},[7637],{"type":35,"value":1035},{"type":30,"tag":31,"props":7639,"children":7640},{},[7641,7643,7648],{"type":35,"value":7642},"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":30,"tag":38,"props":7644,"children":7646},{"className":7645},[],[7647],{"type":35,"value":1527},{"type":35,"value":7649},". So the guard skips on the server and enforces after hydration:",{"type":30,"tag":822,"props":7651,"children":7653},{"className":970,"code":7652,"language":972,"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",[7654],{"type":30,"tag":38,"props":7655,"children":7656},{"__ignoreMap":7},[7657,7665,7693,7737,7744,7773,7837,7885,7921,7928],{"type":30,"tag":832,"props":7658,"children":7659},{"class":834,"line":835},[7660],{"type":30,"tag":832,"props":7661,"children":7662},{"style":982},[7663],{"type":35,"value":7664},"// app/middleware/auth.ts\n",{"type":30,"tag":832,"props":7666,"children":7667},{"class":834,"line":473},[7668,7672,7676,7681,7685,7689],{"type":30,"tag":832,"props":7669,"children":7670},{"style":991},[7671],{"type":35,"value":5309},{"type":30,"tag":832,"props":7673,"children":7674},{"style":991},[7675],{"type":35,"value":6261},{"type":30,"tag":832,"props":7677,"children":7678},{"style":1588},[7679],{"type":35,"value":7680}," defineNuxtRouteMiddleware",{"type":30,"tag":832,"props":7682,"children":7683},{"style":997},[7684],{"type":35,"value":3362},{"type":30,"tag":832,"props":7686,"children":7687},{"style":1097},[7688],{"type":35,"value":1820},{"type":30,"tag":832,"props":7690,"children":7691},{"style":997},[7692],{"type":35,"value":1304},{"type":30,"tag":832,"props":7694,"children":7695},{"class":834,"line":1038},[7696,7700,7704,7708,7712,7716,7720,7725,7729,7733],{"type":30,"tag":832,"props":7697,"children":7698},{"style":1097},[7699],{"type":35,"value":1833},{"type":30,"tag":832,"props":7701,"children":7702},{"style":997},[7703],{"type":35,"value":1679},{"type":30,"tag":832,"props":7705,"children":7706},{"style":991},[7707],{"type":35,"value":994},{"type":30,"tag":832,"props":7709,"children":7710},{"style":845},[7711],{"type":35,"value":641},{"type":30,"tag":832,"props":7713,"children":7714},{"style":991},[7715],{"type":35,"value":1349},{"type":30,"tag":832,"props":7717,"children":7718},{"style":845},[7719],{"type":35,"value":641},{"type":30,"tag":832,"props":7721,"children":7722},{"style":991},[7723],{"type":35,"value":7724},"server",{"type":30,"tag":832,"props":7726,"children":7727},{"style":997},[7728],{"type":35,"value":4706},{"type":30,"tag":832,"props":7730,"children":7731},{"style":4146},[7732],{"type":35,"value":4711},{"type":30,"tag":832,"props":7734,"children":7735},{"style":845},[7736],{"type":35,"value":1035},{"type":30,"tag":832,"props":7738,"children":7739},{"class":834,"line":1089},[7740],{"type":30,"tag":832,"props":7741,"children":7742},{"emptyLinePlaceholder":1190},[7743],{"type":35,"value":1193},{"type":30,"tag":832,"props":7745,"children":7746},{"class":834,"line":1145},[7747,7751,7756,7760,7765,7769],{"type":30,"tag":832,"props":7748,"children":7749},{"style":1276},[7750],{"type":35,"value":6303},{"type":30,"tag":832,"props":7752,"children":7753},{"style":1097},[7754],{"type":35,"value":7755}," nuxtApp",{"type":30,"tag":832,"props":7757,"children":7758},{"style":845},[7759],{"type":35,"value":1299},{"type":30,"tag":832,"props":7761,"children":7762},{"style":1588},[7763],{"type":35,"value":7764}," useNuxtApp",{"type":30,"tag":832,"props":7766,"children":7767},{"style":997},[7768],{"type":35,"value":1661},{"type":30,"tag":832,"props":7770,"children":7771},{"style":845},[7772],{"type":35,"value":1035},{"type":30,"tag":832,"props":7774,"children":7775},{"class":834,"line":1186},[7776,7780,7784,7788,7792,7796,7800,7804,7808,7812,7816,7820,7824,7829,7833],{"type":30,"tag":832,"props":7777,"children":7778},{"style":1276},[7779],{"type":35,"value":6303},{"type":30,"tag":832,"props":7781,"children":7782},{"style":1097},[7783],{"type":35,"value":1639},{"type":30,"tag":832,"props":7785,"children":7786},{"style":845},[7787],{"type":35,"value":1299},{"type":30,"tag":832,"props":7789,"children":7790},{"style":839},[7791],{"type":35,"value":7755},{"type":30,"tag":832,"props":7793,"children":7794},{"style":845},[7795],{"type":35,"value":641},{"type":30,"tag":832,"props":7797,"children":7798},{"style":839},[7799],{"type":35,"value":6793},{"type":30,"tag":832,"props":7801,"children":7802},{"style":845},[7803],{"type":35,"value":641},{"type":30,"tag":832,"props":7805,"children":7806},{"style":839},[7807],{"type":35,"value":6401},{"type":30,"tag":832,"props":7809,"children":7810},{"style":845},[7811],{"type":35,"value":641},{"type":30,"tag":832,"props":7813,"children":7814},{"style":839},[7815],{"type":35,"value":7513},{"type":30,"tag":832,"props":7817,"children":7818},{"style":845},[7819],{"type":35,"value":641},{"type":30,"tag":832,"props":7821,"children":7822},{"style":839},[7823],{"type":35,"value":6130},{"type":30,"tag":832,"props":7825,"children":7826},{"style":845},[7827],{"type":35,"value":7828},"?.",{"type":30,"tag":832,"props":7830,"children":7831},{"style":991},[7832],{"type":35,"value":1684},{"type":30,"tag":832,"props":7834,"children":7835},{"style":845},[7836],{"type":35,"value":1035},{"type":30,"tag":832,"props":7838,"children":7839},{"class":834,"line":1196},[7840,7844,7848,7852,7856,7861,7865,7869,7873,7877,7881],{"type":30,"tag":832,"props":7841,"children":7842},{"style":1097},[7843],{"type":35,"value":1833},{"type":30,"tag":832,"props":7845,"children":7846},{"style":997},[7847],{"type":35,"value":1679},{"type":30,"tag":832,"props":7849,"children":7850},{"style":1097},[7851],{"type":35,"value":2908},{"type":30,"tag":832,"props":7853,"children":7854},{"style":839},[7855],{"type":35,"value":1684},{"type":30,"tag":832,"props":7857,"children":7858},{"style":1097},[7859],{"type":35,"value":7860}," ||",{"type":30,"tag":832,"props":7862,"children":7863},{"style":839},[7864],{"type":35,"value":1639},{"type":30,"tag":832,"props":7866,"children":7867},{"style":845},[7868],{"type":35,"value":641},{"type":30,"tag":832,"props":7870,"children":7871},{"style":991},[7872],{"type":35,"value":1693},{"type":30,"tag":832,"props":7874,"children":7875},{"style":1097},[7876],{"type":35,"value":1855},{"type":30,"tag":832,"props":7878,"children":7879},{"style":1365},[7880],{"type":35,"value":1703},{"type":30,"tag":832,"props":7882,"children":7883},{"style":997},[7884],{"type":35,"value":1893},{"type":30,"tag":832,"props":7886,"children":7887},{"class":834,"line":1230},[7888,7892,7897,7901,7905,7909,7913,7917],{"type":30,"tag":832,"props":7889,"children":7890},{"style":4146},[7891],{"type":35,"value":5152},{"type":30,"tag":832,"props":7893,"children":7894},{"style":1588},[7895],{"type":35,"value":7896}," navigateTo",{"type":30,"tag":832,"props":7898,"children":7899},{"style":997},[7900],{"type":35,"value":1595},{"type":30,"tag":832,"props":7902,"children":7903},{"style":845},[7904],{"type":35,"value":853},{"type":30,"tag":832,"props":7906,"children":7907},{"style":856},[7908],{"type":35,"value":2780},{"type":30,"tag":832,"props":7910,"children":7911},{"style":845},[7912],{"type":35,"value":853},{"type":30,"tag":832,"props":7914,"children":7915},{"style":997},[7916],{"type":35,"value":1605},{"type":30,"tag":832,"props":7918,"children":7919},{"style":845},[7920],{"type":35,"value":1035},{"type":30,"tag":832,"props":7922,"children":7923},{"class":834,"line":1264},[7924],{"type":30,"tag":832,"props":7925,"children":7926},{"style":997},[7927],{"type":35,"value":1987},{"type":30,"tag":832,"props":7929,"children":7930},{"class":834,"line":1272},[7931,7935],{"type":30,"tag":832,"props":7932,"children":7933},{"style":997},[7934],{"type":35,"value":1996},{"type":30,"tag":832,"props":7936,"children":7937},{"style":845},[7938],{"type":35,"value":1035},{"type":30,"tag":31,"props":7940,"children":7941},{},[7942],{"type":35,"value":7943},"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":30,"tag":97,"props":7945,"children":7947},{"id":7946},"what-this-plugin-does-not-do",[7948],{"type":35,"value":7949},"What this plugin does not do",{"type":30,"tag":31,"props":7951,"children":7952},{},[7953,7955,7960,7962,7967,7969,7974],{"type":35,"value":7954},"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":30,"tag":38,"props":7956,"children":7958},{"className":7957},[],[7959],{"type":35,"value":516},{"type":35,"value":7961}," v4 closely rather than abstracting it, so MSAL's breaking changes reach your code, and its config object is MSAL's config object. ",{"type":30,"tag":38,"props":7963,"children":7965},{"className":7964},[],[7966],{"type":35,"value":4231},{"type":35,"value":7968}," covers the ",{"type":30,"tag":38,"props":7970,"children":7972},{"className":7971},[],[7973],{"type":35,"value":4999},{"type":35,"value":7975}," 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":30,"tag":97,"props":7977,"children":7979},{"id":7978},"why-not-use-msal-browser-directly",[7980],{"type":35,"value":7981},"Why not use msal-browser directly",{"type":30,"tag":31,"props":7983,"children":7984},{},[7985],{"type":35,"value":7986},"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":35,"value":7988},"\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":30,"tag":7990,"props":7991,"children":7992},"table",{},[7993,8024],{"type":30,"tag":7994,"props":7995,"children":7996},"thead",{},[7997],{"type":30,"tag":7998,"props":7999,"children":8000},"tr",{},[8001,8007,8019],{"type":30,"tag":8002,"props":8003,"children":8004},"th",{},[8005],{"type":35,"value":8006},"What you need",{"type":30,"tag":8002,"props":8008,"children":8009},{},[8010,8012,8017],{"type":35,"value":8011},"With ",{"type":30,"tag":38,"props":8013,"children":8015},{"className":8014},[],[8016],{"type":35,"value":516},{"type":35,"value":8018}," alone",{"type":30,"tag":8002,"props":8020,"children":8021},{},[8022],{"type":35,"value":8023},"With the plugin",{"type":30,"tag":8025,"props":8026,"children":8027},"tbody",{},[8028,8059,8087,8109,8139,8160,8182],{"type":30,"tag":7998,"props":8029,"children":8030},{},[8031,8037,8049],{"type":30,"tag":8032,"props":8033,"children":8034},"td",{},[8035],{"type":35,"value":8036},"Init before the first call",{"type":30,"tag":8032,"props":8038,"children":8039},{},[8040,8042,8047],{"type":35,"value":8041},"Await ",{"type":30,"tag":38,"props":8043,"children":8045},{"className":8044},[],[8046],{"type":35,"value":2244},{"type":35,"value":8048}," yourself before mount",{"type":30,"tag":8032,"props":8050,"children":8051},{},[8052,8057],{"type":30,"tag":38,"props":8053,"children":8055},{"className":8054},[],[8056],{"type":35,"value":2228},{"type":35,"value":8058}," runs it on first use",{"type":30,"tag":7998,"props":8060,"children":8061},{},[8062,8067,8077],{"type":30,"tag":8032,"props":8063,"children":8064},{},[8065],{"type":35,"value":8066},"Redirect return handling",{"type":30,"tag":8032,"props":8068,"children":8069},{},[8070,8072],{"type":35,"value":8071},"Call and catch ",{"type":30,"tag":38,"props":8073,"children":8075},{"className":8074},[],[8076],{"type":35,"value":2252},{"type":30,"tag":8032,"props":8078,"children":8079},{},[8080,8082],{"type":35,"value":8081},"Runs with ",{"type":30,"tag":38,"props":8083,"children":8085},{"className":8084},[],[8086],{"type":35,"value":2244},{"type":30,"tag":7998,"props":8088,"children":8089},{},[8090,8095,8100],{"type":30,"tag":8032,"props":8091,"children":8092},{},[8093],{"type":35,"value":8094},"Reactive account list",{"type":30,"tag":8032,"props":8096,"children":8097},{},[8098],{"type":35,"value":8099},"Your own ref, event callback, and array diff",{"type":30,"tag":8032,"props":8101,"children":8102},{},[8103,8108],{"type":30,"tag":38,"props":8104,"children":8106},{"className":8105},[],[8107],{"type":35,"value":1684},{"type":35,"value":4570},{"type":30,"tag":7998,"props":8110,"children":8111},{},[8112,8117,8130],{"type":30,"tag":8032,"props":8113,"children":8114},{},[8115],{"type":35,"value":8116},"Interaction status",{"type":30,"tag":8032,"props":8118,"children":8119},{},[8120,8122,8128],{"type":35,"value":8121},"Map events via ",{"type":30,"tag":38,"props":8123,"children":8125},{"className":8124},[],[8126],{"type":35,"value":8127},"EventMessageUtils",{"type":35,"value":8129}," yourself",{"type":30,"tag":8032,"props":8131,"children":8132},{},[8133,8138],{"type":30,"tag":38,"props":8134,"children":8136},{"className":8135},[],[8137],{"type":35,"value":2406},{"type":35,"value":4570},{"type":30,"tag":7998,"props":8140,"children":8141},{},[8142,8147,8152],{"type":30,"tag":8032,"props":8143,"children":8144},{},[8145],{"type":35,"value":8146},"Signed-in boolean",{"type":30,"tag":8032,"props":8148,"children":8149},{},[8150],{"type":35,"value":8151},"Derive it and keep it in sync",{"type":30,"tag":8032,"props":8153,"children":8154},{},[8155],{"type":30,"tag":38,"props":8156,"children":8158},{"className":8157},[],[8159],{"type":35,"value":6865},{"type":30,"tag":7998,"props":8161,"children":8162},{},[8163,8168,8173],{"type":30,"tag":8032,"props":8164,"children":8165},{},[8166],{"type":35,"value":8167},"Silent-then-interactive tokens",{"type":30,"tag":8032,"props":8169,"children":8170},{},[8171],{"type":35,"value":8172},"Try silent, catch, branch on interaction type",{"type":30,"tag":8032,"props":8174,"children":8175},{},[8176],{"type":30,"tag":38,"props":8177,"children":8179},{"className":8178},[],[8180],{"type":35,"value":8181},"useMsalAuthentication()",{"type":30,"tag":7998,"props":8183,"children":8184},{},[8185,8197,8202],{"type":30,"tag":8032,"props":8186,"children":8187},{},[8188,8190,8195],{"type":35,"value":8189},"Graph ",{"type":30,"tag":38,"props":8191,"children":8193},{"className":8192},[],[8194],{"type":35,"value":4999},{"type":35,"value":8196}," request",{"type":30,"tag":8032,"props":8198,"children":8199},{},[8200],{"type":35,"value":8201},"Write the bearer-header fetch",{"type":30,"tag":8032,"props":8203,"children":8204},{},[8205],{"type":30,"tag":38,"props":8206,"children":8208},{"className":8207},[],[8209],{"type":35,"value":8210},"callMsGraph(token)",{"type":30,"tag":31,"props":8212,"children":8213},{},[8214,8216,8221,8223,8228,8230,8235],{"type":35,"value":8215},"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":30,"tag":38,"props":8217,"children":8219},{"className":8218},[],[8220],{"type":35,"value":1791},{"type":35,"value":8222}," is the ",{"type":30,"tag":38,"props":8224,"children":8226},{"className":8225},[],[8227],{"type":35,"value":524},{"type":35,"value":8229}," itself, the config is MSAL's ",{"type":30,"tag":38,"props":8231,"children":8233},{"className":8232},[],[8234],{"type":35,"value":1109},{"type":35,"value":8236}," type, and every MSAL method stays reachable. So when something odd happens, the MSAL docs still apply.",{"type":30,"tag":31,"props":8238,"children":8239},{},[8240,8242,8249,8250,8257,8258,8264],{"type":35,"value":8241},"There are working versions of everything above in the repo: ",{"type":30,"tag":68,"props":8243,"children":8246},{"href":8244,"rel":8245},"https://github.com/DulanDev/vue3-msal/tree/main/samples/sample-with-pinia",[72],[8247],{"type":35,"value":8248},"Vue 3 with Pinia",{"type":35,"value":4041},{"type":30,"tag":68,"props":8251,"children":8254},{"href":8252,"rel":8253},"https://github.com/DulanDev/vue3-msal/tree/main/samples/sample-with-quasar",[72],[8255],{"type":35,"value":8256},"Quasar",{"type":35,"value":4049},{"type":30,"tag":68,"props":8259,"children":8261},{"href":6118,"rel":8260},[72],[8262],{"type":35,"value":8263},"Nuxt",{"type":35,"value":641},{"type":30,"tag":97,"props":8266,"children":8268},{"id":8267},"faqs",[8269],{"type":35,"value":8270},"FAQs",{"type":30,"tag":8272,"props":8273,"children":8275},"h3",{"id":8274},"why-do-i-get-uninitialized_public_client_application",[8276,8278,8284],{"type":35,"value":8277},"Why do I get ",{"type":30,"tag":38,"props":8279,"children":8281},{"className":8280},[],[8282],{"type":35,"value":8283},"uninitialized_public_client_application",{"type":35,"value":8285},"?",{"type":30,"tag":31,"props":8287,"children":8288},{},[8289,8291,8296,8298,8303,8305,8310,8312,8318],{"type":35,"value":8290},"Something called an MSAL API before ",{"type":30,"tag":38,"props":8292,"children":8294},{"className":8293},[],[8295],{"type":35,"value":2244},{"type":35,"value":8297}," resolved. It has been required since ",{"type":30,"tag":38,"props":8299,"children":8301},{"className":8300},[],[8302],{"type":35,"value":516},{"type":35,"value":8304}," v3, which is why tutorials written for v2 don't mention it. ",{"type":30,"tag":38,"props":8306,"children":8308},{"className":8307},[],[8309],{"type":35,"value":2228},{"type":35,"value":8311}," handles it in components. In a router guard, Nuxt plugin, or any code running before the first component setup, await ",{"type":30,"tag":38,"props":8313,"children":8315},{"className":8314},[],[8316],{"type":35,"value":8317},"instance.initialize()",{"type":35,"value":8319}," yourself.",{"type":30,"tag":8272,"props":8321,"children":8323},{"id":8322},"should-i-use-popup-or-redirect",[8324],{"type":35,"value":8325},"Should I use popup or redirect?",{"type":30,"tag":31,"props":8327,"children":8328},{},[8329],{"type":35,"value":8330},"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":30,"tag":8272,"props":8332,"children":8334},{"id":8333},"what-causes-interaction_in_progress",[8335,8337,8343],{"type":35,"value":8336},"What causes ",{"type":30,"tag":38,"props":8338,"children":8340},{"className":8339},[],[8341],{"type":35,"value":8342},"interaction_in_progress",{"type":35,"value":8285},{"type":30,"tag":31,"props":8345,"children":8346},{},[8347,8349,8354,8356,8361],{"type":35,"value":8348},"Two overlapping interactive calls, or a previous one that never finished and left its state behind. Guard on the ",{"type":30,"tag":38,"props":8350,"children":8352},{"className":8351},[],[8353],{"type":35,"value":2406},{"type":35,"value":8355}," ref from ",{"type":30,"tag":38,"props":8357,"children":8359},{"className":8358},[],[8360],{"type":35,"value":2228},{"type":35,"value":8362}," before starting a new interaction, and make sure the redirect promise from an earlier attempt was handled.",{"type":30,"tag":8272,"props":8364,"children":8366},{"id":8365},"is-localstorage-safe-for-tokens",[8367,8369,8374],{"type":35,"value":8368},"Is ",{"type":30,"tag":38,"props":8370,"children":8372},{"className":8371},[],[8373],{"type":35,"value":1527},{"type":35,"value":8375}," safe for tokens?",{"type":30,"tag":31,"props":8377,"children":8378},{},[8379,8381,8386],{"type":35,"value":8380},"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":30,"tag":38,"props":8382,"children":8384},{"className":8383},[],[8385],{"type":35,"value":2215},{"type":35,"value":8387}," narrows the window at the cost of the session.",{"type":30,"tag":8272,"props":8389,"children":8391},{"id":8390},"does-it-work-with-nuxt",[8392],{"type":35,"value":8393},"Does it work with Nuxt?",{"type":30,"tag":31,"props":8395,"children":8396},{},[8397],{"type":35,"value":8398},"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":30,"tag":8272,"props":8400,"children":8402},{"id":8401},"does-it-support-vue-2",[8403],{"type":35,"value":8404},"Does it support Vue 2?",{"type":30,"tag":31,"props":8406,"children":8407},{},[8408],{"type":35,"value":8409},"No. It requires Vue 3.5 or newer and is built on the Composition API.",{"type":30,"tag":8411,"props":8412,"children":8413},"style",{},[8414],{"type":35,"value":8415},"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":473,"depth":473,"links":8417},[8418,8419,8420,8421,8422,8423,8424,8425,8426,8427,8428,8429],{"id":564,"depth":473,"text":567},{"id":644,"depth":473,"text":647},{"id":929,"depth":473,"text":932},{"id":2286,"depth":473,"text":2289},{"id":3060,"depth":473,"text":3063},{"id":3585,"depth":473,"text":3588},{"id":4212,"depth":473,"text":4215},{"id":5012,"depth":473,"text":5015},{"id":6077,"depth":473,"text":6080},{"id":7946,"depth":473,"text":7949},{"id":7978,"depth":473,"text":7981},{"id":8267,"depth":473,"text":8270,"children":8430},[8431,8433,8434,8436,8438,8439],{"id":8274,"depth":1038,"text":8432},"Why do I get uninitialized_public_client_application?",{"id":8322,"depth":1038,"text":8325},{"id":8333,"depth":1038,"text":8435},"What causes interaction_in_progress?",{"id":8365,"depth":1038,"text":8437},"Is localStorage safe for tokens?",{"id":8390,"depth":1038,"text":8393},{"id":8401,"depth":1038,"text":8404},"content:blog:msal-authentication-in-vue-3.md","blog/msal-authentication-in-vue-3.md",{"_path":8443,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8444,"description":8445,"created_at":8446,"updated_at":490,"author":11,"categories":8447,"draft":6,"head":8450,"body":8456,"_type":480,"_id":14182,"_source":482,"_file":14183,"_extension":484},"/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",[8263,492,8448,8449],"SSR","Web Development",{"meta":8451},[8452,8454,8455],{"name":19,"content":8453},"Nuxt 4, useFetch, useAsyncData, useLazyAsyncData, $fetch, data fetching, SSR, Vue",{"name":22,"content":11},{"name":24,"content":25},{"type":27,"children":8457,"toc":14165},[8458,8494,8528,8533,8539,8541,8701,8734,8740,8752,8760,8772,8785,8790,8795,9255,9260,9265,9416,9429,9434,9845,9867,9872,9882,9887,10265,10284,10305,10597,10609,10675,10681,10713,10724,11137,11157,11178,11183,11189,11199,11204,11723,11741,11746,11901,11907,11920,11951,11962,12081,12086,12320,12326,12345,12347,12452,12483,13173,13185,13191,13211,13224,13235,13484,13496,13530,13536,13542,13562,13768,13781,13787,13851,13857,13862,13875,13895,13900,13904,13931,13951,13959,13978,13993,13998,14006,14011,14133,14141,14161],{"type":30,"tag":31,"props":8459,"children":8460},{},[8461,8463,8469,8471,8477,8479,8485,8487,8492],{"type":35,"value":8462},"Nuxt gives you four ways to load data and no obvious signal about which one to pick. I have watched a team ship ",{"type":30,"tag":38,"props":8464,"children":8466},{"className":8465},[],[8467],{"type":35,"value":8468},"useFetch",{"type":35,"value":8470}," inside an ",{"type":30,"tag":38,"props":8472,"children":8474},{"className":8473},[],[8475],{"type":35,"value":8476},"onMounted",{"type":35,"value":8478}," hook, watched another wrap ",{"type":30,"tag":38,"props":8480,"children":8482},{"className":8481},[],[8483],{"type":35,"value":8484},"$fetch",{"type":35,"value":8486}," in a ",{"type":30,"tag":38,"props":8488,"children":8490},{"className":8489},[],[8491],{"type":35,"value":4295},{"type":35,"value":8493}," 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":30,"tag":31,"props":8495,"children":8496},{},[8497,8499,8504,8505,8511,8513,8519,8521,8526],{"type":35,"value":8498},"The choice is narrower than it looks. ",{"type":30,"tag":38,"props":8500,"children":8502},{"className":8501},[],[8503],{"type":35,"value":8468},{"type":35,"value":617},{"type":30,"tag":38,"props":8506,"children":8508},{"className":8507},[],[8509],{"type":35,"value":8510},"useAsyncData",{"type":35,"value":8512}," are the same composable with different ergonomics, the ",{"type":30,"tag":38,"props":8514,"children":8516},{"className":8515},[],[8517],{"type":35,"value":8518},"Lazy",{"type":35,"value":8520}," variants are one preset option, and ",{"type":30,"tag":38,"props":8522,"children":8524},{"className":8523},[],[8525],{"type":35,"value":8484},{"type":35,"value":8527}," 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":30,"tag":31,"props":8529,"children":8530},{},[8531],{"type":35,"value":8532},"This is current as of Nuxt 4. Where Nuxt 4 changed behaviour that Nuxt 3 code depends on, I have said so inline.",{"type":30,"tag":97,"props":8534,"children":8536},{"id":8535},"the-short-answer",[8537],{"type":35,"value":8538},"The Short Answer",{"type":35,"value":8540},"\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":30,"tag":7990,"props":8542,"children":8543},{},[8544,8570],{"type":30,"tag":7994,"props":8545,"children":8546},{},[8547],{"type":30,"tag":7998,"props":8548,"children":8549},{},[8550,8555,8560,8565],{"type":30,"tag":8002,"props":8551,"children":8552},{},[8553],{"type":35,"value":8554},"Composable",{"type":30,"tag":8002,"props":8556,"children":8557},{},[8558],{"type":35,"value":8559},"Use it for",{"type":30,"tag":8002,"props":8561,"children":8562},{},[8563],{"type":35,"value":8564},"Blocks navigation",{"type":30,"tag":8002,"props":8566,"children":8567},{},[8568],{"type":35,"value":8569},"Key",{"type":30,"tag":8025,"props":8571,"children":8572},{},[8573,8599,8624,8651,8676],{"type":30,"tag":7998,"props":8574,"children":8575},{},[8576,8584,8589,8594],{"type":30,"tag":8032,"props":8577,"children":8578},{},[8579],{"type":30,"tag":38,"props":8580,"children":8582},{"className":8581},[],[8583],{"type":35,"value":8468},{"type":30,"tag":8032,"props":8585,"children":8586},{},[8587],{"type":35,"value":8588},"An HTTP endpoint, nothing custom",{"type":30,"tag":8032,"props":8590,"children":8591},{},[8592],{"type":35,"value":8593},"Yes",{"type":30,"tag":8032,"props":8595,"children":8596},{},[8597],{"type":35,"value":8598},"Auto, from URL and options",{"type":30,"tag":7998,"props":8600,"children":8601},{},[8602,8610,8615,8619],{"type":30,"tag":8032,"props":8603,"children":8604},{},[8605],{"type":30,"tag":38,"props":8606,"children":8608},{"className":8607},[],[8609],{"type":35,"value":8510},{"type":30,"tag":8032,"props":8611,"children":8612},{},[8613],{"type":35,"value":8614},"Any async function, multiple sources, an SDK",{"type":30,"tag":8032,"props":8616,"children":8617},{},[8618],{"type":35,"value":8593},{"type":30,"tag":8032,"props":8620,"children":8621},{},[8622],{"type":35,"value":8623},"You provide it",{"type":30,"tag":7998,"props":8625,"children":8626},{},[8627,8636,8641,8646],{"type":30,"tag":8032,"props":8628,"children":8629},{},[8630],{"type":30,"tag":38,"props":8631,"children":8633},{"className":8632},[],[8634],{"type":35,"value":8635},"useLazyFetch",{"type":30,"tag":8032,"props":8637,"children":8638},{},[8639],{"type":35,"value":8640},"An endpoint the page can render without",{"type":30,"tag":8032,"props":8642,"children":8643},{},[8644],{"type":35,"value":8645},"No",{"type":30,"tag":8032,"props":8647,"children":8648},{},[8649],{"type":35,"value":8650},"Auto",{"type":30,"tag":7998,"props":8652,"children":8653},{},[8654,8663,8668,8672],{"type":30,"tag":8032,"props":8655,"children":8656},{},[8657],{"type":30,"tag":38,"props":8658,"children":8660},{"className":8659},[],[8661],{"type":35,"value":8662},"useLazyAsyncData",{"type":30,"tag":8032,"props":8664,"children":8665},{},[8666],{"type":35,"value":8667},"Custom logic the page can render without",{"type":30,"tag":8032,"props":8669,"children":8670},{},[8671],{"type":35,"value":8645},{"type":30,"tag":8032,"props":8673,"children":8674},{},[8675],{"type":35,"value":8623},{"type":30,"tag":7998,"props":8677,"children":8678},{},[8679,8687,8692,8697],{"type":30,"tag":8032,"props":8680,"children":8681},{},[8682],{"type":30,"tag":38,"props":8683,"children":8685},{"className":8684},[],[8686],{"type":35,"value":8484},{"type":30,"tag":8032,"props":8688,"children":8689},{},[8690],{"type":35,"value":8691},"Event handlers, mutations, anything after a user acts",{"type":30,"tag":8032,"props":8693,"children":8694},{},[8695],{"type":35,"value":8696},"N/A",{"type":30,"tag":8032,"props":8698,"children":8699},{},[8700],{"type":35,"value":7591},{"type":30,"tag":31,"props":8702,"children":8703},{},[8704,8710,8712,8718,8720,8725,8727,8732],{"type":30,"tag":38,"props":8705,"children":8707},{"className":8706},[],[8708],{"type":35,"value":8709},"useFetch(url, opts)",{"type":35,"value":8711}," is close to ",{"type":30,"tag":38,"props":8713,"children":8715},{"className":8714},[],[8716],{"type":35,"value":8717},"useAsyncData(key, () => $fetch(url), opts)",{"type":35,"value":8719},". Use ",{"type":30,"tag":38,"props":8721,"children":8723},{"className":8722},[],[8724],{"type":35,"value":8468},{"type":35,"value":8726}," when that is all you need. Move to ",{"type":30,"tag":38,"props":8728,"children":8730},{"className":8729},[],[8731],{"type":35,"value":8510},{"type":35,"value":8733}," the moment the body of the handler is doing something other than a single request.",{"type":30,"tag":97,"props":8735,"children":8737},{"id":8736},"what-all-four-share",[8738],{"type":35,"value":8739},"What All Four Share",{"type":30,"tag":31,"props":8741,"children":8742},{},[8743,8745,8750],{"type":35,"value":8744},"Every composable except ",{"type":30,"tag":38,"props":8746,"children":8748},{"className":8747},[],[8749],{"type":35,"value":8484},{"type":35,"value":8751}," exists to solve one problem: the server already fetched this, so the browser should not fetch it again.",{"type":30,"tag":822,"props":8753,"children":8755},{"code":8754},"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",[8756],{"type":30,"tag":38,"props":8757,"children":8758},{"__ignoreMap":7},[8759],{"type":35,"value":8754},{"type":30,"tag":31,"props":8761,"children":8762},{},[8763,8765,8770],{"type":35,"value":8764},"That serialisation step is the whole value. ",{"type":30,"tag":38,"props":8766,"children":8768},{"className":8767},[],[8769],{"type":35,"value":8484},{"type":35,"value":8771}," 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":30,"tag":31,"props":8773,"children":8774},{},[8775,8777,8783],{"type":35,"value":8776},"The second thing they share is deduplication. Two components calling ",{"type":30,"tag":38,"props":8778,"children":8780},{"className":8779},[],[8781],{"type":35,"value":8782},"useFetch(\"/api/user\")",{"type":35,"value":8784}," on the same page produce one request.",{"type":30,"tag":97,"props":8786,"children":8788},{"id":8787},"usefetch",[8789],{"type":35,"value":8468},{"type":30,"tag":31,"props":8791,"children":8792},{},[8793],{"type":35,"value":8794},"The default choice for hitting an endpoint.",{"type":30,"tag":822,"props":8796,"children":8798},{"code":8797,"language":1026,"meta":7,"className":2427,"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",[8799],{"type":30,"tag":38,"props":8800,"children":8801},{"__ignoreMap":7},[8802,8821,8914,8929,8936,8951,9019,9088,9107,9224,9240],{"type":30,"tag":832,"props":8803,"children":8804},{"class":834,"line":835},[8805,8809,8813,8817],{"type":30,"tag":832,"props":8806,"children":8807},{"style":2438},[8808],{"type":35,"value":2441},{"type":30,"tag":832,"props":8810,"children":8811},{"style":2444},[8812],{"type":35,"value":2447},{"type":30,"tag":832,"props":8814,"children":8815},{"style":1097},[8816],{"type":35,"value":2452},{"type":30,"tag":832,"props":8818,"children":8819},{"style":2438},[8820],{"type":35,"value":2479},{"type":30,"tag":832,"props":8822,"children":8823},{"class":834,"line":473},[8824,8828,8832,8837,8841,8846,8850,8855,8859,8863,8867,8872,8876,8880,8884,8889,8893,8897,8902,8906,8910],{"type":30,"tag":832,"props":8825,"children":8826},{"style":1276},[8827],{"type":35,"value":1279},{"type":30,"tag":832,"props":8829,"children":8830},{"style":845},[8831],{"type":35,"value":2318},{"type":30,"tag":832,"props":8833,"children":8834},{"style":839},[8835],{"type":35,"value":8836}," data",{"type":30,"tag":832,"props":8838,"children":8839},{"style":845},[8840],{"type":35,"value":1289},{"type":30,"tag":832,"props":8842,"children":8843},{"style":1097},[8844],{"type":35,"value":8845}," posts",{"type":30,"tag":832,"props":8847,"children":8848},{"style":845},[8849],{"type":35,"value":1057},{"type":30,"tag":832,"props":8851,"children":8852},{"style":1097},[8853],{"type":35,"value":8854}," status",{"type":30,"tag":832,"props":8856,"children":8857},{"style":845},[8858],{"type":35,"value":1057},{"type":30,"tag":832,"props":8860,"children":8861},{"style":1097},[8862],{"type":35,"value":3767},{"type":30,"tag":832,"props":8864,"children":8865},{"style":845},[8866],{"type":35,"value":1057},{"type":30,"tag":832,"props":8868,"children":8869},{"style":1097},[8870],{"type":35,"value":8871}," refresh",{"type":30,"tag":832,"props":8873,"children":8874},{"style":845},[8875],{"type":35,"value":1011},{"type":30,"tag":832,"props":8877,"children":8878},{"style":845},[8879],{"type":35,"value":1299},{"type":30,"tag":832,"props":8881,"children":8882},{"style":4146},[8883],{"type":35,"value":4752},{"type":30,"tag":832,"props":8885,"children":8886},{"style":1588},[8887],{"type":35,"value":8888}," useFetch",{"type":30,"tag":832,"props":8890,"children":8891},{"style":997},[8892],{"type":35,"value":1595},{"type":30,"tag":832,"props":8894,"children":8895},{"style":845},[8896],{"type":35,"value":853},{"type":30,"tag":832,"props":8898,"children":8899},{"style":856},[8900],{"type":35,"value":8901},"/api/posts",{"type":30,"tag":832,"props":8903,"children":8904},{"style":845},[8905],{"type":35,"value":853},{"type":30,"tag":832,"props":8907,"children":8908},{"style":997},[8909],{"type":35,"value":1605},{"type":30,"tag":832,"props":8911,"children":8912},{"style":845},[8913],{"type":35,"value":1035},{"type":30,"tag":832,"props":8915,"children":8916},{"class":834,"line":1038},[8917,8921,8925],{"type":30,"tag":832,"props":8918,"children":8919},{"style":2438},[8920],{"type":35,"value":2846},{"type":30,"tag":832,"props":8922,"children":8923},{"style":2444},[8924],{"type":35,"value":2447},{"type":30,"tag":832,"props":8926,"children":8927},{"style":2438},[8928],{"type":35,"value":2479},{"type":30,"tag":832,"props":8930,"children":8931},{"class":834,"line":1089},[8932],{"type":30,"tag":832,"props":8933,"children":8934},{"emptyLinePlaceholder":1190},[8935],{"type":35,"value":1193},{"type":30,"tag":832,"props":8937,"children":8938},{"class":834,"line":1145},[8939,8943,8947],{"type":30,"tag":832,"props":8940,"children":8941},{"style":2438},[8942],{"type":35,"value":2441},{"type":30,"tag":832,"props":8944,"children":8945},{"style":2444},[8946],{"type":35,"value":2873},{"type":30,"tag":832,"props":8948,"children":8949},{"style":2438},[8950],{"type":35,"value":2479},{"type":30,"tag":832,"props":8952,"children":8953},{"class":834,"line":1186},[8954,8958,8962,8966,8970,8974,8979,8983,8988,8993,8998,9002,9007,9011,9015],{"type":30,"tag":832,"props":8955,"children":8956},{"style":2438},[8957],{"type":35,"value":2885},{"type":30,"tag":832,"props":8959,"children":8960},{"style":2444},[8961],{"type":35,"value":31},{"type":30,"tag":832,"props":8963,"children":8964},{"style":1097},[8965],{"type":35,"value":2895},{"type":30,"tag":832,"props":8967,"children":8968},{"style":845},[8969],{"type":35,"value":848},{"type":30,"tag":832,"props":8971,"children":8972},{"style":845},[8973],{"type":35,"value":853},{"type":30,"tag":832,"props":8975,"children":8976},{"style":839},[8977],{"type":35,"value":8978},"status",{"type":30,"tag":832,"props":8980,"children":8981},{"style":1097},[8982],{"type":35,"value":1855},{"type":30,"tag":832,"props":8984,"children":8985},{"style":845},[8986],{"type":35,"value":8987}," '",{"type":30,"tag":832,"props":8989,"children":8990},{"style":856},[8991],{"type":35,"value":8992},"pending",{"type":30,"tag":832,"props":8994,"children":8995},{"style":845},[8996],{"type":35,"value":8997},"'\"",{"type":30,"tag":832,"props":8999,"children":9000},{"style":2438},[9001],{"type":35,"value":2948},{"type":30,"tag":832,"props":9003,"children":9004},{"style":2951},[9005],{"type":35,"value":9006},"Loading posts",{"type":30,"tag":832,"props":9008,"children":9009},{"style":2438},[9010],{"type":35,"value":2846},{"type":30,"tag":832,"props":9012,"children":9013},{"style":2444},[9014],{"type":35,"value":31},{"type":30,"tag":832,"props":9016,"children":9017},{"style":2438},[9018],{"type":35,"value":2479},{"type":30,"tag":832,"props":9020,"children":9021},{"class":834,"line":1196},[9022,9026,9030,9035,9039,9043,9047,9051,9055,9059,9063,9067,9072,9076,9080,9084],{"type":30,"tag":832,"props":9023,"children":9024},{"style":2438},[9025],{"type":35,"value":2885},{"type":30,"tag":832,"props":9027,"children":9028},{"style":2444},[9029],{"type":35,"value":31},{"type":30,"tag":832,"props":9031,"children":9032},{"style":1097},[9033],{"type":35,"value":9034}," v-else-if",{"type":30,"tag":832,"props":9036,"children":9037},{"style":845},[9038],{"type":35,"value":848},{"type":30,"tag":832,"props":9040,"children":9041},{"style":845},[9042],{"type":35,"value":853},{"type":30,"tag":832,"props":9044,"children":9045},{"style":839},[9046],{"type":35,"value":4047},{"type":30,"tag":832,"props":9048,"children":9049},{"style":845},[9050],{"type":35,"value":853},{"type":30,"tag":832,"props":9052,"children":9053},{"style":2438},[9054],{"type":35,"value":2948},{"type":30,"tag":832,"props":9056,"children":9057},{"style":845},[9058],{"type":35,"value":3487},{"type":30,"tag":832,"props":9060,"children":9061},{"style":839},[9062],{"type":35,"value":3767},{"type":30,"tag":832,"props":9064,"children":9065},{"style":845},[9066],{"type":35,"value":641},{"type":30,"tag":832,"props":9068,"children":9069},{"style":991},[9070],{"type":35,"value":9071},"message",{"type":30,"tag":832,"props":9073,"children":9074},{"style":845},[9075],{"type":35,"value":3505},{"type":30,"tag":832,"props":9077,"children":9078},{"style":2438},[9079],{"type":35,"value":2846},{"type":30,"tag":832,"props":9081,"children":9082},{"style":2444},[9083],{"type":35,"value":31},{"type":30,"tag":832,"props":9085,"children":9086},{"style":2438},[9087],{"type":35,"value":2479},{"type":30,"tag":832,"props":9089,"children":9090},{"class":834,"line":1230},[9091,9095,9099,9103],{"type":30,"tag":832,"props":9092,"children":9093},{"style":2438},[9094],{"type":35,"value":2885},{"type":30,"tag":832,"props":9096,"children":9097},{"style":2444},[9098],{"type":35,"value":569},{"type":30,"tag":832,"props":9100,"children":9101},{"style":1097},[9102],{"type":35,"value":2982},{"type":30,"tag":832,"props":9104,"children":9105},{"style":2438},[9106],{"type":35,"value":2479},{"type":30,"tag":832,"props":9108,"children":9109},{"class":834,"line":1264},[9110,9115,9119,9124,9128,9132,9137,9142,9147,9151,9156,9161,9165,9169,9173,9177,9182,9186,9190,9194,9199,9203,9208,9212,9216,9220],{"type":30,"tag":832,"props":9111,"children":9112},{"style":2438},[9113],{"type":35,"value":9114},"    \u003C",{"type":30,"tag":832,"props":9116,"children":9117},{"style":2444},[9118],{"type":35,"value":573},{"type":30,"tag":832,"props":9120,"children":9121},{"style":1097},[9122],{"type":35,"value":9123}," v-for",{"type":30,"tag":832,"props":9125,"children":9126},{"style":845},[9127],{"type":35,"value":848},{"type":30,"tag":832,"props":9129,"children":9130},{"style":845},[9131],{"type":35,"value":853},{"type":30,"tag":832,"props":9133,"children":9134},{"style":839},[9135],{"type":35,"value":9136},"post",{"type":30,"tag":832,"props":9138,"children":9139},{"style":845},[9140],{"type":35,"value":9141}," in ",{"type":30,"tag":832,"props":9143,"children":9144},{"style":839},[9145],{"type":35,"value":9146},"posts",{"type":30,"tag":832,"props":9148,"children":9149},{"style":845},[9150],{"type":35,"value":853},{"type":30,"tag":832,"props":9152,"children":9153},{"style":845},[9154],{"type":35,"value":9155}," :",{"type":30,"tag":832,"props":9157,"children":9158},{"style":1097},[9159],{"type":35,"value":9160},"key",{"type":30,"tag":832,"props":9162,"children":9163},{"style":845},[9164],{"type":35,"value":848},{"type":30,"tag":832,"props":9166,"children":9167},{"style":845},[9168],{"type":35,"value":853},{"type":30,"tag":832,"props":9170,"children":9171},{"style":839},[9172],{"type":35,"value":9136},{"type":30,"tag":832,"props":9174,"children":9175},{"style":845},[9176],{"type":35,"value":641},{"type":30,"tag":832,"props":9178,"children":9179},{"style":991},[9180],{"type":35,"value":9181},"id",{"type":30,"tag":832,"props":9183,"children":9184},{"style":845},[9185],{"type":35,"value":853},{"type":30,"tag":832,"props":9187,"children":9188},{"style":2438},[9189],{"type":35,"value":2948},{"type":30,"tag":832,"props":9191,"children":9192},{"style":845},[9193],{"type":35,"value":3487},{"type":30,"tag":832,"props":9195,"children":9196},{"style":839},[9197],{"type":35,"value":9198}," post",{"type":30,"tag":832,"props":9200,"children":9201},{"style":845},[9202],{"type":35,"value":641},{"type":30,"tag":832,"props":9204,"children":9205},{"style":991},[9206],{"type":35,"value":9207},"title",{"type":30,"tag":832,"props":9209,"children":9210},{"style":845},[9211],{"type":35,"value":3505},{"type":30,"tag":832,"props":9213,"children":9214},{"style":2438},[9215],{"type":35,"value":2846},{"type":30,"tag":832,"props":9217,"children":9218},{"style":2444},[9219],{"type":35,"value":573},{"type":30,"tag":832,"props":9221,"children":9222},{"style":2438},[9223],{"type":35,"value":2479},{"type":30,"tag":832,"props":9225,"children":9226},{"class":834,"line":1272},[9227,9232,9236],{"type":30,"tag":832,"props":9228,"children":9229},{"style":2438},[9230],{"type":35,"value":9231},"  \u003C/",{"type":30,"tag":832,"props":9233,"children":9234},{"style":2444},[9235],{"type":35,"value":569},{"type":30,"tag":832,"props":9237,"children":9238},{"style":2438},[9239],{"type":35,"value":2479},{"type":30,"tag":832,"props":9241,"children":9242},{"class":834,"line":1307},[9243,9247,9251],{"type":30,"tag":832,"props":9244,"children":9245},{"style":2438},[9246],{"type":35,"value":2846},{"type":30,"tag":832,"props":9248,"children":9249},{"style":2444},[9250],{"type":35,"value":2873},{"type":30,"tag":832,"props":9252,"children":9253},{"style":2438},[9254],{"type":35,"value":2479},{"type":30,"tag":31,"props":9256,"children":9257},{},[9258],{"type":35,"value":9259},"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":30,"tag":31,"props":9261,"children":9262},{},[9263],{"type":35,"value":9264},"Reactive URLs re-run the handler when their dependencies change. Pass a getter, not a string:",{"type":30,"tag":822,"props":9266,"children":9270},{"code":9267,"language":9268,"meta":7,"className":9269,"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",[9271],{"type":30,"tag":38,"props":9272,"children":9273},{"__ignoreMap":7},[9274,9311,9318,9326],{"type":30,"tag":832,"props":9275,"children":9276},{"class":834,"line":835},[9277,9281,9286,9290,9294,9298,9303,9307],{"type":30,"tag":832,"props":9278,"children":9279},{"style":1276},[9280],{"type":35,"value":1279},{"type":30,"tag":832,"props":9282,"children":9283},{"style":1097},[9284],{"type":35,"value":9285}," page",{"type":30,"tag":832,"props":9287,"children":9288},{"style":845},[9289],{"type":35,"value":1299},{"type":30,"tag":832,"props":9291,"children":9292},{"style":1588},[9293],{"type":35,"value":4570},{"type":30,"tag":832,"props":9295,"children":9296},{"style":997},[9297],{"type":35,"value":1595},{"type":30,"tag":832,"props":9299,"children":9300},{"style":1365},[9301],{"type":35,"value":9302},"1",{"type":30,"tag":832,"props":9304,"children":9305},{"style":997},[9306],{"type":35,"value":1605},{"type":30,"tag":832,"props":9308,"children":9309},{"style":845},[9310],{"type":35,"value":1035},{"type":30,"tag":832,"props":9312,"children":9313},{"class":834,"line":473},[9314],{"type":30,"tag":832,"props":9315,"children":9316},{"emptyLinePlaceholder":1190},[9317],{"type":35,"value":1193},{"type":30,"tag":832,"props":9319,"children":9320},{"class":834,"line":1038},[9321],{"type":30,"tag":832,"props":9322,"children":9323},{"style":982},[9324],{"type":35,"value":9325},"// Refetches whenever page.value changes.\n",{"type":30,"tag":832,"props":9327,"children":9328},{"class":834,"line":1089},[9329,9333,9337,9341,9345,9349,9353,9357,9361,9365,9369,9373,9378,9383,9387,9392,9396,9400,9404,9408,9412],{"type":30,"tag":832,"props":9330,"children":9331},{"style":1276},[9332],{"type":35,"value":1279},{"type":30,"tag":832,"props":9334,"children":9335},{"style":845},[9336],{"type":35,"value":2318},{"type":30,"tag":832,"props":9338,"children":9339},{"style":839},[9340],{"type":35,"value":8836},{"type":30,"tag":832,"props":9342,"children":9343},{"style":845},[9344],{"type":35,"value":1289},{"type":30,"tag":832,"props":9346,"children":9347},{"style":1097},[9348],{"type":35,"value":8845},{"type":30,"tag":832,"props":9350,"children":9351},{"style":845},[9352],{"type":35,"value":1011},{"type":30,"tag":832,"props":9354,"children":9355},{"style":845},[9356],{"type":35,"value":1299},{"type":30,"tag":832,"props":9358,"children":9359},{"style":4146},[9360],{"type":35,"value":4752},{"type":30,"tag":832,"props":9362,"children":9363},{"style":1588},[9364],{"type":35,"value":8888},{"type":30,"tag":832,"props":9366,"children":9367},{"style":997},[9368],{"type":35,"value":3362},{"type":30,"tag":832,"props":9370,"children":9371},{"style":1097},[9372],{"type":35,"value":1820},{"type":30,"tag":832,"props":9374,"children":9375},{"style":845},[9376],{"type":35,"value":9377}," `",{"type":30,"tag":832,"props":9379,"children":9380},{"style":856},[9381],{"type":35,"value":9382},"/api/posts?page=",{"type":30,"tag":832,"props":9384,"children":9385},{"style":991},[9386],{"type":35,"value":7393},{"type":30,"tag":832,"props":9388,"children":9389},{"style":839},[9390],{"type":35,"value":9391},"page",{"type":30,"tag":832,"props":9393,"children":9394},{"style":845},[9395],{"type":35,"value":641},{"type":30,"tag":832,"props":9397,"children":9398},{"style":991},[9399],{"type":35,"value":3379},{"type":30,"tag":832,"props":9401,"children":9402},{"style":991},[9403],{"type":35,"value":1556},{"type":30,"tag":832,"props":9405,"children":9406},{"style":845},[9407],{"type":35,"value":7383},{"type":30,"tag":832,"props":9409,"children":9410},{"style":997},[9411],{"type":35,"value":1605},{"type":30,"tag":832,"props":9413,"children":9414},{"style":845},[9415],{"type":35,"value":1035},{"type":30,"tag":31,"props":9417,"children":9418},{},[9419,9421,9427],{"type":35,"value":9420},"A plain template literal is evaluated once and never updates. The getter form is the one that works, and ",{"type":30,"tag":38,"props":9422,"children":9424},{"className":9423},[],[9425],{"type":35,"value":9426},"watch: [page]",{"type":35,"value":9428}," is the alternative if the URL itself is static and something else should trigger the refetch.",{"type":30,"tag":31,"props":9430,"children":9431},{},[9432],{"type":35,"value":9433},"Request and response hooks handle auth headers and error normalisation:",{"type":30,"tag":822,"props":9435,"children":9437},{"code":9436,"language":9268,"meta":7,"className":9269,"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",[9438],{"type":30,"tag":38,"props":9439,"children":9440},{"__ignoreMap":7},[9441,9497,9526,9590,9624,9723,9734,9767,9823,9834],{"type":30,"tag":832,"props":9442,"children":9443},{"class":834,"line":835},[9444,9448,9452,9456,9460,9464,9468,9472,9476,9480,9485,9489,9493],{"type":30,"tag":832,"props":9445,"children":9446},{"style":1276},[9447],{"type":35,"value":1279},{"type":30,"tag":832,"props":9449,"children":9450},{"style":845},[9451],{"type":35,"value":2318},{"type":30,"tag":832,"props":9453,"children":9454},{"style":1097},[9455],{"type":35,"value":8836},{"type":30,"tag":832,"props":9457,"children":9458},{"style":845},[9459],{"type":35,"value":1011},{"type":30,"tag":832,"props":9461,"children":9462},{"style":845},[9463],{"type":35,"value":1299},{"type":30,"tag":832,"props":9465,"children":9466},{"style":4146},[9467],{"type":35,"value":4752},{"type":30,"tag":832,"props":9469,"children":9470},{"style":1588},[9471],{"type":35,"value":8888},{"type":30,"tag":832,"props":9473,"children":9474},{"style":997},[9475],{"type":35,"value":1595},{"type":30,"tag":832,"props":9477,"children":9478},{"style":845},[9479],{"type":35,"value":853},{"type":30,"tag":832,"props":9481,"children":9482},{"style":856},[9483],{"type":35,"value":9484},"/api/comments",{"type":30,"tag":832,"props":9486,"children":9487},{"style":845},[9488],{"type":35,"value":853},{"type":30,"tag":832,"props":9490,"children":9491},{"style":845},[9492],{"type":35,"value":1057},{"type":30,"tag":832,"props":9494,"children":9495},{"style":997},[9496],{"type":35,"value":1304},{"type":30,"tag":832,"props":9498,"children":9499},{"class":834,"line":473},[9500,9505,9509,9513,9518,9522],{"type":30,"tag":832,"props":9501,"children":9502},{"style":1311},[9503],{"type":35,"value":9504},"  method",{"type":30,"tag":832,"props":9506,"children":9507},{"style":845},[9508],{"type":35,"value":1289},{"type":30,"tag":832,"props":9510,"children":9511},{"style":845},[9512],{"type":35,"value":1021},{"type":30,"tag":832,"props":9514,"children":9515},{"style":856},[9516],{"type":35,"value":9517},"POST",{"type":30,"tag":832,"props":9519,"children":9520},{"style":845},[9521],{"type":35,"value":853},{"type":30,"tag":832,"props":9523,"children":9524},{"style":845},[9525],{"type":35,"value":1372},{"type":30,"tag":832,"props":9527,"children":9528},{"class":834,"line":1038},[9529,9534,9538,9542,9547,9551,9556,9560,9565,9569,9573,9578,9582,9586],{"type":30,"tag":832,"props":9530,"children":9531},{"style":1311},[9532],{"type":35,"value":9533},"  body",{"type":30,"tag":832,"props":9535,"children":9536},{"style":845},[9537],{"type":35,"value":1289},{"type":30,"tag":832,"props":9539,"children":9540},{"style":997},[9541],{"type":35,"value":2318},{"type":30,"tag":832,"props":9543,"children":9544},{"style":1311},[9545],{"type":35,"value":9546}," postId",{"type":30,"tag":832,"props":9548,"children":9549},{"style":845},[9550],{"type":35,"value":1289},{"type":30,"tag":832,"props":9552,"children":9553},{"style":1365},[9554],{"type":35,"value":9555}," 1",{"type":30,"tag":832,"props":9557,"children":9558},{"style":845},[9559],{"type":35,"value":1057},{"type":30,"tag":832,"props":9561,"children":9562},{"style":1311},[9563],{"type":35,"value":9564}," comment",{"type":30,"tag":832,"props":9566,"children":9567},{"style":845},[9568],{"type":35,"value":1289},{"type":30,"tag":832,"props":9570,"children":9571},{"style":845},[9572],{"type":35,"value":1021},{"type":30,"tag":832,"props":9574,"children":9575},{"style":856},[9576],{"type":35,"value":9577},"Useful, thanks.",{"type":30,"tag":832,"props":9579,"children":9580},{"style":845},[9581],{"type":35,"value":853},{"type":30,"tag":832,"props":9583,"children":9584},{"style":997},[9585],{"type":35,"value":1011},{"type":30,"tag":832,"props":9587,"children":9588},{"style":845},[9589],{"type":35,"value":1372},{"type":30,"tag":832,"props":9591,"children":9592},{"class":834,"line":1089},[9593,9598,9602,9607,9612,9616,9620],{"type":30,"tag":832,"props":9594,"children":9595},{"style":1588},[9596],{"type":35,"value":9597},"  onRequest",{"type":30,"tag":832,"props":9599,"children":9600},{"style":997},[9601],{"type":35,"value":1595},{"type":30,"tag":832,"props":9603,"children":9604},{"style":845},[9605],{"type":35,"value":9606},"{",{"type":30,"tag":832,"props":9608,"children":9609},{"style":1808},[9610],{"type":35,"value":9611}," options",{"type":30,"tag":832,"props":9613,"children":9614},{"style":845},[9615],{"type":35,"value":1011},{"type":30,"tag":832,"props":9617,"children":9618},{"style":997},[9619],{"type":35,"value":1605},{"type":30,"tag":832,"props":9621,"children":9622},{"style":997},[9623],{"type":35,"value":1304},{"type":30,"tag":832,"props":9625,"children":9626},{"class":834,"line":1145},[9627,9632,9636,9641,9645,9649,9655,9660,9664,9668,9672,9677,9681,9685,9690,9694,9699,9703,9707,9711,9715,9719],{"type":30,"tag":832,"props":9628,"children":9629},{"style":839},[9630],{"type":35,"value":9631},"    options",{"type":30,"tag":832,"props":9633,"children":9634},{"style":845},[9635],{"type":35,"value":641},{"type":30,"tag":832,"props":9637,"children":9638},{"style":991},[9639],{"type":35,"value":9640},"headers",{"type":30,"tag":832,"props":9642,"children":9643},{"style":845},[9644],{"type":35,"value":1299},{"type":30,"tag":832,"props":9646,"children":9647},{"style":997},[9648],{"type":35,"value":1000},{"type":30,"tag":832,"props":9650,"children":9652},{"style":9651},"--shiki-default:#F7768E;--shiki-default-font-weight:bold",[9653],{"type":35,"value":9654},"...",{"type":30,"tag":832,"props":9656,"children":9657},{"style":839},[9658],{"type":35,"value":9659},"options",{"type":30,"tag":832,"props":9661,"children":9662},{"style":845},[9663],{"type":35,"value":641},{"type":30,"tag":832,"props":9665,"children":9666},{"style":991},[9667],{"type":35,"value":9640},{"type":30,"tag":832,"props":9669,"children":9670},{"style":845},[9671],{"type":35,"value":1057},{"type":30,"tag":832,"props":9673,"children":9674},{"style":1311},[9675],{"type":35,"value":9676}," authorization",{"type":30,"tag":832,"props":9678,"children":9679},{"style":845},[9680],{"type":35,"value":1289},{"type":30,"tag":832,"props":9682,"children":9683},{"style":845},[9684],{"type":35,"value":9377},{"type":30,"tag":832,"props":9686,"children":9687},{"style":856},[9688],{"type":35,"value":9689},"Bearer ",{"type":30,"tag":832,"props":9691,"children":9692},{"style":991},[9693],{"type":35,"value":7393},{"type":30,"tag":832,"props":9695,"children":9696},{"style":839},[9697],{"type":35,"value":9698},"token",{"type":30,"tag":832,"props":9700,"children":9701},{"style":845},[9702],{"type":35,"value":641},{"type":30,"tag":832,"props":9704,"children":9705},{"style":991},[9706],{"type":35,"value":3379},{"type":30,"tag":832,"props":9708,"children":9709},{"style":991},[9710],{"type":35,"value":1556},{"type":30,"tag":832,"props":9712,"children":9713},{"style":845},[9714],{"type":35,"value":7383},{"type":30,"tag":832,"props":9716,"children":9717},{"style":997},[9718],{"type":35,"value":1011},{"type":30,"tag":832,"props":9720,"children":9721},{"style":845},[9722],{"type":35,"value":1035},{"type":30,"tag":832,"props":9724,"children":9725},{"class":834,"line":1186},[9726,9730],{"type":30,"tag":832,"props":9727,"children":9728},{"style":997},[9729],{"type":35,"value":1484},{"type":30,"tag":832,"props":9731,"children":9732},{"style":845},[9733],{"type":35,"value":1372},{"type":30,"tag":832,"props":9735,"children":9736},{"class":834,"line":1196},[9737,9742,9746,9750,9755,9759,9763],{"type":30,"tag":832,"props":9738,"children":9739},{"style":1588},[9740],{"type":35,"value":9741},"  onResponseError",{"type":30,"tag":832,"props":9743,"children":9744},{"style":997},[9745],{"type":35,"value":1595},{"type":30,"tag":832,"props":9747,"children":9748},{"style":845},[9749],{"type":35,"value":9606},{"type":30,"tag":832,"props":9751,"children":9752},{"style":1808},[9753],{"type":35,"value":9754}," response",{"type":30,"tag":832,"props":9756,"children":9757},{"style":845},[9758],{"type":35,"value":1011},{"type":30,"tag":832,"props":9760,"children":9761},{"style":997},[9762],{"type":35,"value":1605},{"type":30,"tag":832,"props":9764,"children":9765},{"style":997},[9766],{"type":35,"value":1304},{"type":30,"tag":832,"props":9768,"children":9769},{"class":834,"line":1230},[9770,9774,9778,9782,9786,9790,9795,9799,9803,9807,9811,9815,9819],{"type":30,"tag":832,"props":9771,"children":9772},{"style":839},[9773],{"type":35,"value":3954},{"type":30,"tag":832,"props":9775,"children":9776},{"style":845},[9777],{"type":35,"value":641},{"type":30,"tag":832,"props":9779,"children":9780},{"style":1588},[9781],{"type":35,"value":4047},{"type":30,"tag":832,"props":9783,"children":9784},{"style":997},[9785],{"type":35,"value":1595},{"type":30,"tag":832,"props":9787,"children":9788},{"style":845},[9789],{"type":35,"value":853},{"type":30,"tag":832,"props":9791,"children":9792},{"style":856},[9793],{"type":35,"value":9794},"Comment failed",{"type":30,"tag":832,"props":9796,"children":9797},{"style":845},[9798],{"type":35,"value":853},{"type":30,"tag":832,"props":9800,"children":9801},{"style":845},[9802],{"type":35,"value":1057},{"type":30,"tag":832,"props":9804,"children":9805},{"style":839},[9806],{"type":35,"value":9754},{"type":30,"tag":832,"props":9808,"children":9809},{"style":845},[9810],{"type":35,"value":641},{"type":30,"tag":832,"props":9812,"children":9813},{"style":991},[9814],{"type":35,"value":8978},{"type":30,"tag":832,"props":9816,"children":9817},{"style":997},[9818],{"type":35,"value":1605},{"type":30,"tag":832,"props":9820,"children":9821},{"style":845},[9822],{"type":35,"value":1035},{"type":30,"tag":832,"props":9824,"children":9825},{"class":834,"line":1264},[9826,9830],{"type":30,"tag":832,"props":9827,"children":9828},{"style":997},[9829],{"type":35,"value":1484},{"type":30,"tag":832,"props":9831,"children":9832},{"style":845},[9833],{"type":35,"value":1372},{"type":30,"tag":832,"props":9835,"children":9836},{"class":834,"line":1272},[9837,9841],{"type":30,"tag":832,"props":9838,"children":9839},{"style":997},[9840],{"type":35,"value":1996},{"type":30,"tag":832,"props":9842,"children":9843},{"style":845},[9844],{"type":35,"value":1035},{"type":30,"tag":919,"props":9846,"children":9847},{},[9848],{"type":30,"tag":31,"props":9849,"children":9850},{},[9851,9853,9858,9860,9865],{"type":35,"value":9852},"That example is the wrong shape on purpose in one respect: a POST that creates a comment belongs in a click handler with ",{"type":30,"tag":38,"props":9854,"children":9856},{"className":9855},[],[9857],{"type":35,"value":8484},{"type":35,"value":9859},", not in a composable that runs on page load. See the ",{"type":30,"tag":38,"props":9861,"children":9863},{"className":9862},[],[9864],{"type":35,"value":8484},{"type":35,"value":9866}," section below.",{"type":30,"tag":97,"props":9868,"children":9870},{"id":9869},"useasyncdata",[9871],{"type":35,"value":8510},{"type":30,"tag":31,"props":9873,"children":9874},{},[9875,9880],{"type":30,"tag":38,"props":9876,"children":9878},{"className":9877},[],[9879],{"type":35,"value":8510},{"type":35,"value":9881}," takes a key and any async function. Reach for it when the handler is doing real work.",{"type":30,"tag":31,"props":9883,"children":9884},{},[9885],{"type":35,"value":9886},"Two endpoints in parallel:",{"type":30,"tag":822,"props":9888,"children":9890},{"code":9889,"language":9268,"meta":7,"className":9269,"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",[9891],{"type":30,"tag":38,"props":9892,"children":9893},{"__ignoreMap":7},[9894,9972,10028,10061,10093,10105,10112,10124,10215,10243,10254],{"type":30,"tag":832,"props":9895,"children":9896},{"class":834,"line":835},[9897,9901,9905,9909,9913,9918,9922,9926,9930,9935,9939,9943,9948,9952,9956,9960,9964,9968],{"type":30,"tag":832,"props":9898,"children":9899},{"style":1276},[9900],{"type":35,"value":1279},{"type":30,"tag":832,"props":9902,"children":9903},{"style":845},[9904],{"type":35,"value":2318},{"type":30,"tag":832,"props":9906,"children":9907},{"style":839},[9908],{"type":35,"value":8836},{"type":30,"tag":832,"props":9910,"children":9911},{"style":845},[9912],{"type":35,"value":1289},{"type":30,"tag":832,"props":9914,"children":9915},{"style":1097},[9916],{"type":35,"value":9917}," dashboard",{"type":30,"tag":832,"props":9919,"children":9920},{"style":845},[9921],{"type":35,"value":1011},{"type":30,"tag":832,"props":9923,"children":9924},{"style":845},[9925],{"type":35,"value":1299},{"type":30,"tag":832,"props":9927,"children":9928},{"style":4146},[9929],{"type":35,"value":4752},{"type":30,"tag":832,"props":9931,"children":9932},{"style":1588},[9933],{"type":35,"value":9934}," useAsyncData",{"type":30,"tag":832,"props":9936,"children":9937},{"style":997},[9938],{"type":35,"value":1595},{"type":30,"tag":832,"props":9940,"children":9941},{"style":845},[9942],{"type":35,"value":853},{"type":30,"tag":832,"props":9944,"children":9945},{"style":856},[9946],{"type":35,"value":9947},"dashboard",{"type":30,"tag":832,"props":9949,"children":9950},{"style":845},[9951],{"type":35,"value":853},{"type":30,"tag":832,"props":9953,"children":9954},{"style":845},[9955],{"type":35,"value":1057},{"type":30,"tag":832,"props":9957,"children":9958},{"style":1276},[9959],{"type":35,"value":4662},{"type":30,"tag":832,"props":9961,"children":9962},{"style":997},[9963],{"type":35,"value":2634},{"type":30,"tag":832,"props":9965,"children":9966},{"style":1097},[9967],{"type":35,"value":1820},{"type":30,"tag":832,"props":9969,"children":9970},{"style":997},[9971],{"type":35,"value":1304},{"type":30,"tag":832,"props":9973,"children":9974},{"class":834,"line":473},[9975,9979,9983,9988,9992,9997,10001,10005,10009,10014,10018,10023],{"type":30,"tag":832,"props":9976,"children":9977},{"style":1276},[9978],{"type":35,"value":6303},{"type":30,"tag":832,"props":9980,"children":9981},{"style":845},[9982],{"type":35,"value":3845},{"type":30,"tag":832,"props":9984,"children":9985},{"style":1097},[9986],{"type":35,"value":9987},"orders",{"type":30,"tag":832,"props":9989,"children":9990},{"style":845},[9991],{"type":35,"value":1057},{"type":30,"tag":832,"props":9993,"children":9994},{"style":1097},[9995],{"type":35,"value":9996}," customers",{"type":30,"tag":832,"props":9998,"children":9999},{"style":845},[10000],{"type":35,"value":3392},{"type":30,"tag":832,"props":10002,"children":10003},{"style":845},[10004],{"type":35,"value":1299},{"type":30,"tag":832,"props":10006,"children":10007},{"style":4146},[10008],{"type":35,"value":4752},{"type":30,"tag":832,"props":10010,"children":10011},{"style":1003},[10012],{"type":35,"value":10013}," Promise",{"type":30,"tag":832,"props":10015,"children":10016},{"style":845},[10017],{"type":35,"value":641},{"type":30,"tag":832,"props":10019,"children":10020},{"style":1588},[10021],{"type":35,"value":10022},"all",{"type":30,"tag":832,"props":10024,"children":10025},{"style":997},[10026],{"type":35,"value":10027},"([\n",{"type":30,"tag":832,"props":10029,"children":10030},{"class":834,"line":1038},[10031,10036,10040,10044,10049,10053,10057],{"type":30,"tag":832,"props":10032,"children":10033},{"style":1588},[10034],{"type":35,"value":10035},"    $fetch",{"type":30,"tag":832,"props":10037,"children":10038},{"style":997},[10039],{"type":35,"value":1595},{"type":30,"tag":832,"props":10041,"children":10042},{"style":845},[10043],{"type":35,"value":853},{"type":30,"tag":832,"props":10045,"children":10046},{"style":856},[10047],{"type":35,"value":10048},"/api/orders",{"type":30,"tag":832,"props":10050,"children":10051},{"style":845},[10052],{"type":35,"value":853},{"type":30,"tag":832,"props":10054,"children":10055},{"style":997},[10056],{"type":35,"value":1605},{"type":30,"tag":832,"props":10058,"children":10059},{"style":845},[10060],{"type":35,"value":1372},{"type":30,"tag":832,"props":10062,"children":10063},{"class":834,"line":1089},[10064,10068,10072,10076,10081,10085,10089],{"type":30,"tag":832,"props":10065,"children":10066},{"style":1588},[10067],{"type":35,"value":10035},{"type":30,"tag":832,"props":10069,"children":10070},{"style":997},[10071],{"type":35,"value":1595},{"type":30,"tag":832,"props":10073,"children":10074},{"style":845},[10075],{"type":35,"value":853},{"type":30,"tag":832,"props":10077,"children":10078},{"style":856},[10079],{"type":35,"value":10080},"/api/customers",{"type":30,"tag":832,"props":10082,"children":10083},{"style":845},[10084],{"type":35,"value":853},{"type":30,"tag":832,"props":10086,"children":10087},{"style":997},[10088],{"type":35,"value":1605},{"type":30,"tag":832,"props":10090,"children":10091},{"style":845},[10092],{"type":35,"value":1372},{"type":30,"tag":832,"props":10094,"children":10095},{"class":834,"line":1145},[10096,10101],{"type":30,"tag":832,"props":10097,"children":10098},{"style":997},[10099],{"type":35,"value":10100},"  ])",{"type":30,"tag":832,"props":10102,"children":10103},{"style":845},[10104],{"type":35,"value":1035},{"type":30,"tag":832,"props":10106,"children":10107},{"class":834,"line":1186},[10108],{"type":30,"tag":832,"props":10109,"children":10110},{"emptyLinePlaceholder":1190},[10111],{"type":35,"value":1193},{"type":30,"tag":832,"props":10113,"children":10114},{"class":834,"line":1196},[10115,10120],{"type":30,"tag":832,"props":10116,"children":10117},{"style":4146},[10118],{"type":35,"value":10119},"  return",{"type":30,"tag":832,"props":10121,"children":10122},{"style":997},[10123],{"type":35,"value":1304},{"type":30,"tag":832,"props":10125,"children":10126},{"class":834,"line":1230},[10127,10132,10136,10141,10145,10150,10154,10159,10163,10168,10172,10176,10181,10186,10190,10194,10199,10203,10207,10211],{"type":30,"tag":832,"props":10128,"children":10129},{"style":1311},[10130],{"type":35,"value":10131},"    revenue",{"type":30,"tag":832,"props":10133,"children":10134},{"style":845},[10135],{"type":35,"value":1289},{"type":30,"tag":832,"props":10137,"children":10138},{"style":839},[10139],{"type":35,"value":10140}," orders",{"type":30,"tag":832,"props":10142,"children":10143},{"style":845},[10144],{"type":35,"value":641},{"type":30,"tag":832,"props":10146,"children":10147},{"style":1588},[10148],{"type":35,"value":10149},"reduce",{"type":30,"tag":832,"props":10151,"children":10152},{"style":997},[10153],{"type":35,"value":1805},{"type":30,"tag":832,"props":10155,"children":10156},{"style":1808},[10157],{"type":35,"value":10158},"sum",{"type":30,"tag":832,"props":10160,"children":10161},{"style":845},[10162],{"type":35,"value":1057},{"type":30,"tag":832,"props":10164,"children":10165},{"style":1808},[10166],{"type":35,"value":10167}," order",{"type":30,"tag":832,"props":10169,"children":10170},{"style":997},[10171],{"type":35,"value":4706},{"type":30,"tag":832,"props":10173,"children":10174},{"style":1097},[10175],{"type":35,"value":5416},{"type":30,"tag":832,"props":10177,"children":10178},{"style":839},[10179],{"type":35,"value":10180}," sum",{"type":30,"tag":832,"props":10182,"children":10183},{"style":845},[10184],{"type":35,"value":10185}," +",{"type":30,"tag":832,"props":10187,"children":10188},{"style":839},[10189],{"type":35,"value":10167},{"type":30,"tag":832,"props":10191,"children":10192},{"style":845},[10193],{"type":35,"value":641},{"type":30,"tag":832,"props":10195,"children":10196},{"style":991},[10197],{"type":35,"value":10198},"total",{"type":30,"tag":832,"props":10200,"children":10201},{"style":845},[10202],{"type":35,"value":1057},{"type":30,"tag":832,"props":10204,"children":10205},{"style":1365},[10206],{"type":35,"value":1703},{"type":30,"tag":832,"props":10208,"children":10209},{"style":997},[10210],{"type":35,"value":1605},{"type":30,"tag":832,"props":10212,"children":10213},{"style":845},[10214],{"type":35,"value":1372},{"type":30,"tag":832,"props":10216,"children":10217},{"class":834,"line":1264},[10218,10223,10227,10231,10235,10239],{"type":30,"tag":832,"props":10219,"children":10220},{"style":1311},[10221],{"type":35,"value":10222},"    customerCount",{"type":30,"tag":832,"props":10224,"children":10225},{"style":845},[10226],{"type":35,"value":1289},{"type":30,"tag":832,"props":10228,"children":10229},{"style":839},[10230],{"type":35,"value":9996},{"type":30,"tag":832,"props":10232,"children":10233},{"style":845},[10234],{"type":35,"value":641},{"type":30,"tag":832,"props":10236,"children":10237},{"style":991},[10238],{"type":35,"value":1693},{"type":30,"tag":832,"props":10240,"children":10241},{"style":845},[10242],{"type":35,"value":1372},{"type":30,"tag":832,"props":10244,"children":10245},{"class":834,"line":1272},[10246,10250],{"type":30,"tag":832,"props":10247,"children":10248},{"style":997},[10249],{"type":35,"value":1484},{"type":30,"tag":832,"props":10251,"children":10252},{"style":845},[10253],{"type":35,"value":1035},{"type":30,"tag":832,"props":10255,"children":10256},{"class":834,"line":1307},[10257,10261],{"type":30,"tag":832,"props":10258,"children":10259},{"style":997},[10260],{"type":35,"value":1996},{"type":30,"tag":832,"props":10262,"children":10263},{"style":845},[10264],{"type":35,"value":1035},{"type":30,"tag":31,"props":10266,"children":10267},{},[10268,10270,10275,10277,10282],{"type":35,"value":10269},"One key, one payload entry, one hydration. Doing this as two ",{"type":30,"tag":38,"props":10271,"children":10273},{"className":10272},[],[10274],{"type":35,"value":8468},{"type":35,"value":10276}," calls also works, but you then shape the result in a ",{"type":30,"tag":38,"props":10278,"children":10280},{"className":10279},[],[10281],{"type":35,"value":3231},{"type":35,"value":10283}," and ship both raw responses in the payload instead of the two numbers you needed.",{"type":30,"tag":31,"props":10285,"children":10286},{},[10287,10289,10295,10297,10303],{"type":35,"value":10288},"Trimming the payload is worth being deliberate about. ",{"type":30,"tag":38,"props":10290,"children":10292},{"className":10291},[],[10293],{"type":35,"value":10294},"transform",{"type":35,"value":10296}," runs before serialisation, ",{"type":30,"tag":38,"props":10298,"children":10300},{"className":10299},[],[10301],{"type":35,"value":10302},"pick",{"type":35,"value":10304}," is the shorthand for keeping named keys, and both cut what gets embedded in the HTML:",{"type":30,"tag":822,"props":10306,"children":10308},{"code":10307,"language":9268,"meta":7,"className":9269,"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",[10309],{"type":30,"tag":38,"props":10310,"children":10311},{"__ignoreMap":7},[10312,10356,10377,10419,10427,10455,10485,10579,10586],{"type":30,"tag":832,"props":10313,"children":10314},{"class":834,"line":835},[10315,10319,10323,10327,10331,10336,10340,10344,10348,10352],{"type":30,"tag":832,"props":10316,"children":10317},{"style":1276},[10318],{"type":35,"value":1279},{"type":30,"tag":832,"props":10320,"children":10321},{"style":845},[10322],{"type":35,"value":2318},{"type":30,"tag":832,"props":10324,"children":10325},{"style":839},[10326],{"type":35,"value":8836},{"type":30,"tag":832,"props":10328,"children":10329},{"style":845},[10330],{"type":35,"value":1289},{"type":30,"tag":832,"props":10332,"children":10333},{"style":1097},[10334],{"type":35,"value":10335}," articles",{"type":30,"tag":832,"props":10337,"children":10338},{"style":845},[10339],{"type":35,"value":1011},{"type":30,"tag":832,"props":10341,"children":10342},{"style":845},[10343],{"type":35,"value":1299},{"type":30,"tag":832,"props":10345,"children":10346},{"style":4146},[10347],{"type":35,"value":4752},{"type":30,"tag":832,"props":10349,"children":10350},{"style":1588},[10351],{"type":35,"value":9934},{"type":30,"tag":832,"props":10353,"children":10354},{"style":997},[10355],{"type":35,"value":3802},{"type":30,"tag":832,"props":10357,"children":10358},{"class":834,"line":473},[10359,10364,10369,10373],{"type":30,"tag":832,"props":10360,"children":10361},{"style":845},[10362],{"type":35,"value":10363},"  \"",{"type":30,"tag":832,"props":10365,"children":10366},{"style":856},[10367],{"type":35,"value":10368},"articles",{"type":30,"tag":832,"props":10370,"children":10371},{"style":845},[10372],{"type":35,"value":853},{"type":30,"tag":832,"props":10374,"children":10375},{"style":845},[10376],{"type":35,"value":1372},{"type":30,"tag":832,"props":10378,"children":10379},{"class":834,"line":1038},[10380,10385,10389,10394,10398,10402,10407,10411,10415],{"type":30,"tag":832,"props":10381,"children":10382},{"style":997},[10383],{"type":35,"value":10384},"  ()",{"type":30,"tag":832,"props":10386,"children":10387},{"style":1097},[10388],{"type":35,"value":1820},{"type":30,"tag":832,"props":10390,"children":10391},{"style":1588},[10392],{"type":35,"value":10393}," $fetch",{"type":30,"tag":832,"props":10395,"children":10396},{"style":997},[10397],{"type":35,"value":1595},{"type":30,"tag":832,"props":10399,"children":10400},{"style":845},[10401],{"type":35,"value":853},{"type":30,"tag":832,"props":10403,"children":10404},{"style":856},[10405],{"type":35,"value":10406},"/api/articles",{"type":30,"tag":832,"props":10408,"children":10409},{"style":845},[10410],{"type":35,"value":853},{"type":30,"tag":832,"props":10412,"children":10413},{"style":997},[10414],{"type":35,"value":1605},{"type":30,"tag":832,"props":10416,"children":10417},{"style":845},[10418],{"type":35,"value":1372},{"type":30,"tag":832,"props":10420,"children":10421},{"class":834,"line":1089},[10422],{"type":30,"tag":832,"props":10423,"children":10424},{"style":997},[10425],{"type":35,"value":10426},"  {\n",{"type":30,"tag":832,"props":10428,"children":10429},{"class":834,"line":1145},[10430,10435,10439,10443,10447,10451],{"type":30,"tag":832,"props":10431,"children":10432},{"style":1588},[10433],{"type":35,"value":10434},"    default",{"type":30,"tag":832,"props":10436,"children":10437},{"style":845},[10438],{"type":35,"value":1289},{"type":30,"tag":832,"props":10440,"children":10441},{"style":997},[10442],{"type":35,"value":2634},{"type":30,"tag":832,"props":10444,"children":10445},{"style":1097},[10446],{"type":35,"value":1820},{"type":30,"tag":832,"props":10448,"children":10449},{"style":997},[10450],{"type":35,"value":7246},{"type":30,"tag":832,"props":10452,"children":10453},{"style":845},[10454],{"type":35,"value":1372},{"type":30,"tag":832,"props":10456,"children":10457},{"class":834,"line":1186},[10458,10463,10467,10471,10476,10480],{"type":30,"tag":832,"props":10459,"children":10460},{"style":1588},[10461],{"type":35,"value":10462},"    transform",{"type":30,"tag":832,"props":10464,"children":10465},{"style":845},[10466],{"type":35,"value":1289},{"type":30,"tag":832,"props":10468,"children":10469},{"style":997},[10470],{"type":35,"value":1679},{"type":30,"tag":832,"props":10472,"children":10473},{"style":1808},[10474],{"type":35,"value":10475},"list",{"type":30,"tag":832,"props":10477,"children":10478},{"style":997},[10479],{"type":35,"value":1605},{"type":30,"tag":832,"props":10481,"children":10482},{"style":1097},[10483],{"type":35,"value":10484}," =>\n",{"type":30,"tag":832,"props":10486,"children":10487},{"class":834,"line":1196},[10488,10493,10497,10502,10506,10510,10515,10519,10524,10528,10533,10537,10541,10545,10550,10554,10558,10562,10566,10570,10575],{"type":30,"tag":832,"props":10489,"children":10490},{"style":839},[10491],{"type":35,"value":10492},"      list",{"type":30,"tag":832,"props":10494,"children":10495},{"style":845},[10496],{"type":35,"value":641},{"type":30,"tag":832,"props":10498,"children":10499},{"style":1588},[10500],{"type":35,"value":10501},"map",{"type":30,"tag":832,"props":10503,"children":10504},{"style":997},[10505],{"type":35,"value":1805},{"type":30,"tag":832,"props":10507,"children":10508},{"style":845},[10509],{"type":35,"value":9606},{"type":30,"tag":832,"props":10511,"children":10512},{"style":1808},[10513],{"type":35,"value":10514}," id",{"type":30,"tag":832,"props":10516,"children":10517},{"style":845},[10518],{"type":35,"value":1057},{"type":30,"tag":832,"props":10520,"children":10521},{"style":1808},[10522],{"type":35,"value":10523}," title",{"type":30,"tag":832,"props":10525,"children":10526},{"style":845},[10527],{"type":35,"value":1057},{"type":30,"tag":832,"props":10529,"children":10530},{"style":1808},[10531],{"type":35,"value":10532}," publishedAt",{"type":30,"tag":832,"props":10534,"children":10535},{"style":845},[10536],{"type":35,"value":1011},{"type":30,"tag":832,"props":10538,"children":10539},{"style":997},[10540],{"type":35,"value":1605},{"type":30,"tag":832,"props":10542,"children":10543},{"style":1097},[10544],{"type":35,"value":1820},{"type":30,"tag":832,"props":10546,"children":10547},{"style":997},[10548],{"type":35,"value":10549}," ({",{"type":30,"tag":832,"props":10551,"children":10552},{"style":839},[10553],{"type":35,"value":10514},{"type":30,"tag":832,"props":10555,"children":10556},{"style":845},[10557],{"type":35,"value":1057},{"type":30,"tag":832,"props":10559,"children":10560},{"style":839},[10561],{"type":35,"value":10523},{"type":30,"tag":832,"props":10563,"children":10564},{"style":845},[10565],{"type":35,"value":1057},{"type":30,"tag":832,"props":10567,"children":10568},{"style":839},[10569],{"type":35,"value":10532},{"type":30,"tag":832,"props":10571,"children":10572},{"style":997},[10573],{"type":35,"value":10574}," }))",{"type":30,"tag":832,"props":10576,"children":10577},{"style":845},[10578],{"type":35,"value":1372},{"type":30,"tag":832,"props":10580,"children":10581},{"class":834,"line":1230},[10582],{"type":30,"tag":832,"props":10583,"children":10584},{"style":997},[10585],{"type":35,"value":1987},{"type":30,"tag":832,"props":10587,"children":10588},{"class":834,"line":1264},[10589,10593],{"type":30,"tag":832,"props":10590,"children":10591},{"style":997},[10592],{"type":35,"value":1605},{"type":30,"tag":832,"props":10594,"children":10595},{"style":845},[10596],{"type":35,"value":1035},{"type":30,"tag":31,"props":10598,"children":10599},{},[10600,10602,10607],{"type":35,"value":10601},"An endpoint returning 50 articles with full body text can put several hundred kilobytes into the document. ",{"type":30,"tag":38,"props":10603,"children":10605},{"className":10604},[],[10606],{"type":35,"value":10294},{"type":35,"value":10608}," down to the three fields the list renders and the payload shrinks to the size of the list.",{"type":30,"tag":31,"props":10610,"children":10611},{},[10612,10618,10620,10626,10628,10634,10636,10642,10644,10650,10652,10658,10660,10665,10667,10673],{"type":30,"tag":38,"props":10613,"children":10615},{"className":10614},[],[10616],{"type":35,"value":10617},"default",{"type":35,"value":10619}," matters more than it looks. Without it, ",{"type":30,"tag":38,"props":10621,"children":10623},{"className":10622},[],[10624],{"type":35,"value":10625},"data",{"type":35,"value":10627}," is ",{"type":30,"tag":38,"props":10629,"children":10631},{"className":10630},[],[10632],{"type":35,"value":10633},"undefined",{"type":35,"value":10635}," until the first resolve. ",{"type":30,"tag":38,"props":10637,"children":10639},{"className":10638},[],[10640],{"type":35,"value":10641},"v-for",{"type":35,"value":10643}," tolerates that and renders nothing, but any expression that reaches into the value does not: ",{"type":30,"tag":38,"props":10645,"children":10647},{"className":10646},[],[10648],{"type":35,"value":10649},"articles.length",{"type":35,"value":10651}," in a heading, or ",{"type":30,"tag":38,"props":10653,"children":10655},{"className":10654},[],[10656],{"type":35,"value":10657},"articles[0].title",{"type":35,"value":10659}," in a preview, throws on the first render. Supplying ",{"type":30,"tag":38,"props":10661,"children":10663},{"className":10662},[],[10664],{"type":35,"value":10617},{"type":35,"value":10666}," gives the template the right shape from the first tick and saves you a ",{"type":30,"tag":38,"props":10668,"children":10670},{"className":10669},[],[10671],{"type":35,"value":10672},"v-if",{"type":35,"value":10674}," on every consumer.",{"type":30,"tag":97,"props":10676,"children":10678},{"id":10677},"uselazyasyncdata-and-uselazyfetch",[10679],{"type":35,"value":10680},"useLazyAsyncData and useLazyFetch",{"type":30,"tag":31,"props":10682,"children":10683},{},[10684,10686,10692,10693,10699,10700,10705,10707,10712],{"type":35,"value":10685},"These are not separate implementations. ",{"type":30,"tag":38,"props":10687,"children":10689},{"className":10688},[],[10690],{"type":35,"value":10691},"useLazyAsyncData(key, handler)",{"type":35,"value":10627},{"type":30,"tag":38,"props":10694,"children":10696},{"className":10695},[],[10697],{"type":35,"value":10698},"useAsyncData(key, handler, { lazy: true })",{"type":35,"value":4049},{"type":30,"tag":38,"props":10701,"children":10703},{"className":10702},[],[10704],{"type":35,"value":8635},{"type":35,"value":10706}," stands in the same relation to ",{"type":30,"tag":38,"props":10708,"children":10710},{"className":10709},[],[10711],{"type":35,"value":8468},{"type":35,"value":641},{"type":30,"tag":31,"props":10714,"children":10715},{},[10716,10722],{"type":30,"tag":38,"props":10717,"children":10719},{"className":10718},[],[10720],{"type":35,"value":10721},"lazy: true",{"type":35,"value":10723}," 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":30,"tag":822,"props":10725,"children":10727},{"code":10726,"language":1026,"meta":7,"className":2427,"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",[10728],{"type":30,"tag":38,"props":10729,"children":10730},{"__ignoreMap":7},[10731,10750,10820,10835,10842,10857,10873,10937,10981,11091,11107,11122],{"type":30,"tag":832,"props":10732,"children":10733},{"class":834,"line":835},[10734,10738,10742,10746],{"type":30,"tag":832,"props":10735,"children":10736},{"style":2438},[10737],{"type":35,"value":2441},{"type":30,"tag":832,"props":10739,"children":10740},{"style":2444},[10741],{"type":35,"value":2447},{"type":30,"tag":832,"props":10743,"children":10744},{"style":1097},[10745],{"type":35,"value":2452},{"type":30,"tag":832,"props":10747,"children":10748},{"style":2438},[10749],{"type":35,"value":2479},{"type":30,"tag":832,"props":10751,"children":10752},{"class":834,"line":473},[10753,10757,10761,10765,10769,10774,10778,10782,10786,10790,10795,10799,10803,10808,10812,10816],{"type":30,"tag":832,"props":10754,"children":10755},{"style":1276},[10756],{"type":35,"value":1279},{"type":30,"tag":832,"props":10758,"children":10759},{"style":845},[10760],{"type":35,"value":2318},{"type":30,"tag":832,"props":10762,"children":10763},{"style":839},[10764],{"type":35,"value":8836},{"type":30,"tag":832,"props":10766,"children":10767},{"style":845},[10768],{"type":35,"value":1289},{"type":30,"tag":832,"props":10770,"children":10771},{"style":1097},[10772],{"type":35,"value":10773}," related",{"type":30,"tag":832,"props":10775,"children":10776},{"style":845},[10777],{"type":35,"value":1057},{"type":30,"tag":832,"props":10779,"children":10780},{"style":1097},[10781],{"type":35,"value":8854},{"type":30,"tag":832,"props":10783,"children":10784},{"style":845},[10785],{"type":35,"value":1011},{"type":30,"tag":832,"props":10787,"children":10788},{"style":845},[10789],{"type":35,"value":1299},{"type":30,"tag":832,"props":10791,"children":10792},{"style":1588},[10793],{"type":35,"value":10794}," useLazyFetch",{"type":30,"tag":832,"props":10796,"children":10797},{"style":997},[10798],{"type":35,"value":1595},{"type":30,"tag":832,"props":10800,"children":10801},{"style":845},[10802],{"type":35,"value":853},{"type":30,"tag":832,"props":10804,"children":10805},{"style":856},[10806],{"type":35,"value":10807},"/api/articles/related",{"type":30,"tag":832,"props":10809,"children":10810},{"style":845},[10811],{"type":35,"value":853},{"type":30,"tag":832,"props":10813,"children":10814},{"style":997},[10815],{"type":35,"value":1605},{"type":30,"tag":832,"props":10817,"children":10818},{"style":845},[10819],{"type":35,"value":1035},{"type":30,"tag":832,"props":10821,"children":10822},{"class":834,"line":1038},[10823,10827,10831],{"type":30,"tag":832,"props":10824,"children":10825},{"style":2438},[10826],{"type":35,"value":2846},{"type":30,"tag":832,"props":10828,"children":10829},{"style":2444},[10830],{"type":35,"value":2447},{"type":30,"tag":832,"props":10832,"children":10833},{"style":2438},[10834],{"type":35,"value":2479},{"type":30,"tag":832,"props":10836,"children":10837},{"class":834,"line":1089},[10838],{"type":30,"tag":832,"props":10839,"children":10840},{"emptyLinePlaceholder":1190},[10841],{"type":35,"value":1193},{"type":30,"tag":832,"props":10843,"children":10844},{"class":834,"line":1145},[10845,10849,10853],{"type":30,"tag":832,"props":10846,"children":10847},{"style":2438},[10848],{"type":35,"value":2441},{"type":30,"tag":832,"props":10850,"children":10851},{"style":2444},[10852],{"type":35,"value":2873},{"type":30,"tag":832,"props":10854,"children":10855},{"style":2438},[10856],{"type":35,"value":2479},{"type":30,"tag":832,"props":10858,"children":10859},{"class":834,"line":1186},[10860,10864,10869],{"type":30,"tag":832,"props":10861,"children":10862},{"style":2438},[10863],{"type":35,"value":2885},{"type":30,"tag":832,"props":10865,"children":10866},{"style":2444},[10867],{"type":35,"value":10868},"aside",{"type":30,"tag":832,"props":10870,"children":10871},{"style":2438},[10872],{"type":35,"value":2479},{"type":30,"tag":832,"props":10874,"children":10875},{"class":834,"line":1196},[10876,10880,10884,10888,10892,10896,10900,10904,10908,10912,10916,10920,10925,10929,10933],{"type":30,"tag":832,"props":10877,"children":10878},{"style":2438},[10879],{"type":35,"value":9114},{"type":30,"tag":832,"props":10881,"children":10882},{"style":2444},[10883],{"type":35,"value":31},{"type":30,"tag":832,"props":10885,"children":10886},{"style":1097},[10887],{"type":35,"value":2895},{"type":30,"tag":832,"props":10889,"children":10890},{"style":845},[10891],{"type":35,"value":848},{"type":30,"tag":832,"props":10893,"children":10894},{"style":845},[10895],{"type":35,"value":853},{"type":30,"tag":832,"props":10897,"children":10898},{"style":839},[10899],{"type":35,"value":8978},{"type":30,"tag":832,"props":10901,"children":10902},{"style":1097},[10903],{"type":35,"value":1855},{"type":30,"tag":832,"props":10905,"children":10906},{"style":845},[10907],{"type":35,"value":8987},{"type":30,"tag":832,"props":10909,"children":10910},{"style":856},[10911],{"type":35,"value":8992},{"type":30,"tag":832,"props":10913,"children":10914},{"style":845},[10915],{"type":35,"value":8997},{"type":30,"tag":832,"props":10917,"children":10918},{"style":2438},[10919],{"type":35,"value":2948},{"type":30,"tag":832,"props":10921,"children":10922},{"style":2951},[10923],{"type":35,"value":10924},"Finding related articles",{"type":30,"tag":832,"props":10926,"children":10927},{"style":2438},[10928],{"type":35,"value":2846},{"type":30,"tag":832,"props":10930,"children":10931},{"style":2444},[10932],{"type":35,"value":31},{"type":30,"tag":832,"props":10934,"children":10935},{"style":2438},[10936],{"type":35,"value":2479},{"type":30,"tag":832,"props":10938,"children":10939},{"class":834,"line":1230},[10940,10944,10948,10952,10956,10960,10965,10969,10973,10977],{"type":30,"tag":832,"props":10941,"children":10942},{"style":2438},[10943],{"type":35,"value":9114},{"type":30,"tag":832,"props":10945,"children":10946},{"style":2444},[10947],{"type":35,"value":569},{"type":30,"tag":832,"props":10949,"children":10950},{"style":1097},[10951],{"type":35,"value":9034},{"type":30,"tag":832,"props":10953,"children":10954},{"style":845},[10955],{"type":35,"value":848},{"type":30,"tag":832,"props":10957,"children":10958},{"style":845},[10959],{"type":35,"value":853},{"type":30,"tag":832,"props":10961,"children":10962},{"style":839},[10963],{"type":35,"value":10964},"related",{"type":30,"tag":832,"props":10966,"children":10967},{"style":845},[10968],{"type":35,"value":7828},{"type":30,"tag":832,"props":10970,"children":10971},{"style":991},[10972],{"type":35,"value":1693},{"type":30,"tag":832,"props":10974,"children":10975},{"style":845},[10976],{"type":35,"value":853},{"type":30,"tag":832,"props":10978,"children":10979},{"style":2438},[10980],{"type":35,"value":2479},{"type":30,"tag":832,"props":10982,"children":10983},{"class":834,"line":1264},[10984,10989,10993,10997,11001,11005,11010,11014,11018,11022,11026,11030,11034,11038,11042,11046,11050,11054,11058,11062,11067,11071,11075,11079,11083,11087],{"type":30,"tag":832,"props":10985,"children":10986},{"style":2438},[10987],{"type":35,"value":10988},"      \u003C",{"type":30,"tag":832,"props":10990,"children":10991},{"style":2444},[10992],{"type":35,"value":573},{"type":30,"tag":832,"props":10994,"children":10995},{"style":1097},[10996],{"type":35,"value":9123},{"type":30,"tag":832,"props":10998,"children":10999},{"style":845},[11000],{"type":35,"value":848},{"type":30,"tag":832,"props":11002,"children":11003},{"style":845},[11004],{"type":35,"value":853},{"type":30,"tag":832,"props":11006,"children":11007},{"style":839},[11008],{"type":35,"value":11009},"article",{"type":30,"tag":832,"props":11011,"children":11012},{"style":845},[11013],{"type":35,"value":9141},{"type":30,"tag":832,"props":11015,"children":11016},{"style":839},[11017],{"type":35,"value":10964},{"type":30,"tag":832,"props":11019,"children":11020},{"style":845},[11021],{"type":35,"value":853},{"type":30,"tag":832,"props":11023,"children":11024},{"style":845},[11025],{"type":35,"value":9155},{"type":30,"tag":832,"props":11027,"children":11028},{"style":1097},[11029],{"type":35,"value":9160},{"type":30,"tag":832,"props":11031,"children":11032},{"style":845},[11033],{"type":35,"value":848},{"type":30,"tag":832,"props":11035,"children":11036},{"style":845},[11037],{"type":35,"value":853},{"type":30,"tag":832,"props":11039,"children":11040},{"style":839},[11041],{"type":35,"value":11009},{"type":30,"tag":832,"props":11043,"children":11044},{"style":845},[11045],{"type":35,"value":641},{"type":30,"tag":832,"props":11047,"children":11048},{"style":991},[11049],{"type":35,"value":9181},{"type":30,"tag":832,"props":11051,"children":11052},{"style":845},[11053],{"type":35,"value":853},{"type":30,"tag":832,"props":11055,"children":11056},{"style":2438},[11057],{"type":35,"value":2948},{"type":30,"tag":832,"props":11059,"children":11060},{"style":845},[11061],{"type":35,"value":3487},{"type":30,"tag":832,"props":11063,"children":11064},{"style":839},[11065],{"type":35,"value":11066}," article",{"type":30,"tag":832,"props":11068,"children":11069},{"style":845},[11070],{"type":35,"value":641},{"type":30,"tag":832,"props":11072,"children":11073},{"style":991},[11074],{"type":35,"value":9207},{"type":30,"tag":832,"props":11076,"children":11077},{"style":845},[11078],{"type":35,"value":3505},{"type":30,"tag":832,"props":11080,"children":11081},{"style":2438},[11082],{"type":35,"value":2846},{"type":30,"tag":832,"props":11084,"children":11085},{"style":2444},[11086],{"type":35,"value":573},{"type":30,"tag":832,"props":11088,"children":11089},{"style":2438},[11090],{"type":35,"value":2479},{"type":30,"tag":832,"props":11092,"children":11093},{"class":834,"line":1272},[11094,11099,11103],{"type":30,"tag":832,"props":11095,"children":11096},{"style":2438},[11097],{"type":35,"value":11098},"    \u003C/",{"type":30,"tag":832,"props":11100,"children":11101},{"style":2444},[11102],{"type":35,"value":569},{"type":30,"tag":832,"props":11104,"children":11105},{"style":2438},[11106],{"type":35,"value":2479},{"type":30,"tag":832,"props":11108,"children":11109},{"class":834,"line":1307},[11110,11114,11118],{"type":30,"tag":832,"props":11111,"children":11112},{"style":2438},[11113],{"type":35,"value":9231},{"type":30,"tag":832,"props":11115,"children":11116},{"style":2444},[11117],{"type":35,"value":10868},{"type":30,"tag":832,"props":11119,"children":11120},{"style":2438},[11121],{"type":35,"value":2479},{"type":30,"tag":832,"props":11123,"children":11124},{"class":834,"line":1325},[11125,11129,11133],{"type":30,"tag":832,"props":11126,"children":11127},{"style":2438},[11128],{"type":35,"value":2846},{"type":30,"tag":832,"props":11130,"children":11131},{"style":2444},[11132],{"type":35,"value":2873},{"type":30,"tag":832,"props":11134,"children":11135},{"style":2438},[11136],{"type":35,"value":2479},{"type":30,"tag":31,"props":11138,"children":11139},{},[11140,11142,11147,11149,11155],{"type":35,"value":11141},"Note the missing ",{"type":30,"tag":38,"props":11143,"children":11145},{"className":11144},[],[11146],{"type":35,"value":4149},{"type":35,"value":11148}," and the ",{"type":30,"tag":38,"props":11150,"children":11152},{"className":11151},[],[11153],{"type":35,"value":11154},"related?.length",{"type":35,"value":11156},". Both are load-bearing.",{"type":30,"tag":919,"props":11158,"children":11159},{},[11160],{"type":30,"tag":31,"props":11161,"children":11162},{},[11163,11165,11170,11171,11176],{"type":35,"value":11164},"Because navigation does not wait, ",{"type":30,"tag":38,"props":11166,"children":11168},{"className":11167},[],[11169],{"type":35,"value":10625},{"type":35,"value":10627},{"type":30,"tag":38,"props":11172,"children":11174},{"className":11173},[],[11175],{"type":35,"value":10633},{"type":35,"value":11177}," 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":30,"tag":31,"props":11179,"children":11180},{},[11181],{"type":35,"value":11182},"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":30,"tag":97,"props":11184,"children":11186},{"id":11185},"fetch-on-its-own",[11187],{"type":35,"value":11188},"$fetch On Its Own",{"type":30,"tag":31,"props":11190,"children":11191},{},[11192,11197],{"type":30,"tag":38,"props":11193,"children":11195},{"className":11194},[],[11196],{"type":35,"value":8484},{"type":35,"value":11198}," is the plain HTTP client. No key, no payload, no deduplication, no navigation blocking. It runs when you call it.",{"type":30,"tag":31,"props":11200,"children":11201},{},[11202],{"type":35,"value":11203},"That makes it correct for everything the user triggers:",{"type":30,"tag":822,"props":11205,"children":11207},{"code":11206,"language":1026,"meta":7,"className":2427,"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",[11208],{"type":30,"tag":38,"props":11209,"children":11210},{"__ignoreMap":7},[11211,11230,11267,11304,11340,11347,11371,11399,11410,11446,11474,11519,11530,11567,11590,11650,11666,11694,11701,11708],{"type":30,"tag":832,"props":11212,"children":11213},{"class":834,"line":835},[11214,11218,11222,11226],{"type":30,"tag":832,"props":11215,"children":11216},{"style":2438},[11217],{"type":35,"value":2441},{"type":30,"tag":832,"props":11219,"children":11220},{"style":2444},[11221],{"type":35,"value":2447},{"type":30,"tag":832,"props":11223,"children":11224},{"style":1097},[11225],{"type":35,"value":2452},{"type":30,"tag":832,"props":11227,"children":11228},{"style":2438},[11229],{"type":35,"value":2479},{"type":30,"tag":832,"props":11231,"children":11232},{"class":834,"line":473},[11233,11237,11242,11246,11250,11254,11259,11263],{"type":30,"tag":832,"props":11234,"children":11235},{"style":1276},[11236],{"type":35,"value":1279},{"type":30,"tag":832,"props":11238,"children":11239},{"style":1097},[11240],{"type":35,"value":11241}," email",{"type":30,"tag":832,"props":11243,"children":11244},{"style":845},[11245],{"type":35,"value":1299},{"type":30,"tag":832,"props":11247,"children":11248},{"style":1588},[11249],{"type":35,"value":4570},{"type":30,"tag":832,"props":11251,"children":11252},{"style":997},[11253],{"type":35,"value":1595},{"type":30,"tag":832,"props":11255,"children":11256},{"style":845},[11257],{"type":35,"value":11258},"\"\"",{"type":30,"tag":832,"props":11260,"children":11261},{"style":997},[11262],{"type":35,"value":1605},{"type":30,"tag":832,"props":11264,"children":11265},{"style":845},[11266],{"type":35,"value":1035},{"type":30,"tag":832,"props":11268,"children":11269},{"class":834,"line":1038},[11270,11274,11279,11283,11287,11291,11296,11300],{"type":30,"tag":832,"props":11271,"children":11272},{"style":1276},[11273],{"type":35,"value":1279},{"type":30,"tag":832,"props":11275,"children":11276},{"style":1097},[11277],{"type":35,"value":11278}," submitting",{"type":30,"tag":832,"props":11280,"children":11281},{"style":845},[11282],{"type":35,"value":1299},{"type":30,"tag":832,"props":11284,"children":11285},{"style":1588},[11286],{"type":35,"value":4570},{"type":30,"tag":832,"props":11288,"children":11289},{"style":997},[11290],{"type":35,"value":1595},{"type":30,"tag":832,"props":11292,"children":11293},{"style":1365},[11294],{"type":35,"value":11295},"false",{"type":30,"tag":832,"props":11297,"children":11298},{"style":997},[11299],{"type":35,"value":1605},{"type":30,"tag":832,"props":11301,"children":11302},{"style":845},[11303],{"type":35,"value":1035},{"type":30,"tag":832,"props":11305,"children":11306},{"class":834,"line":1089},[11307,11311,11316,11320,11324,11328,11332,11336],{"type":30,"tag":832,"props":11308,"children":11309},{"style":1276},[11310],{"type":35,"value":1279},{"type":30,"tag":832,"props":11312,"children":11313},{"style":1097},[11314],{"type":35,"value":11315}," message",{"type":30,"tag":832,"props":11317,"children":11318},{"style":845},[11319],{"type":35,"value":1299},{"type":30,"tag":832,"props":11321,"children":11322},{"style":1588},[11323],{"type":35,"value":4570},{"type":30,"tag":832,"props":11325,"children":11326},{"style":997},[11327],{"type":35,"value":1595},{"type":30,"tag":832,"props":11329,"children":11330},{"style":845},[11331],{"type":35,"value":11258},{"type":30,"tag":832,"props":11333,"children":11334},{"style":997},[11335],{"type":35,"value":1605},{"type":30,"tag":832,"props":11337,"children":11338},{"style":845},[11339],{"type":35,"value":1035},{"type":30,"tag":832,"props":11341,"children":11342},{"class":834,"line":1145},[11343],{"type":30,"tag":832,"props":11344,"children":11345},{"emptyLinePlaceholder":1190},[11346],{"type":35,"value":1193},{"type":30,"tag":832,"props":11348,"children":11349},{"class":834,"line":1186},[11350,11354,11358,11363,11367],{"type":30,"tag":832,"props":11351,"children":11352},{"style":1276},[11353],{"type":35,"value":5399},{"type":30,"tag":832,"props":11355,"children":11356},{"style":1097},[11357],{"type":35,"value":5314},{"type":30,"tag":832,"props":11359,"children":11360},{"style":1588},[11361],{"type":35,"value":11362}," subscribe",{"type":30,"tag":832,"props":11364,"children":11365},{"style":997},[11366],{"type":35,"value":1661},{"type":30,"tag":832,"props":11368,"children":11369},{"style":997},[11370],{"type":35,"value":1304},{"type":30,"tag":832,"props":11372,"children":11373},{"class":834,"line":1196},[11374,11379,11383,11387,11391,11395],{"type":30,"tag":832,"props":11375,"children":11376},{"style":839},[11377],{"type":35,"value":11378},"  submitting",{"type":30,"tag":832,"props":11380,"children":11381},{"style":845},[11382],{"type":35,"value":641},{"type":30,"tag":832,"props":11384,"children":11385},{"style":991},[11386],{"type":35,"value":3379},{"type":30,"tag":832,"props":11388,"children":11389},{"style":845},[11390],{"type":35,"value":1299},{"type":30,"tag":832,"props":11392,"children":11393},{"style":1365},[11394],{"type":35,"value":5469},{"type":30,"tag":832,"props":11396,"children":11397},{"style":845},[11398],{"type":35,"value":1035},{"type":30,"tag":832,"props":11400,"children":11401},{"class":834,"line":1230},[11402,11406],{"type":30,"tag":832,"props":11403,"children":11404},{"style":1097},[11405],{"type":35,"value":4723},{"type":30,"tag":832,"props":11407,"children":11408},{"style":997},[11409],{"type":35,"value":1304},{"type":30,"tag":832,"props":11411,"children":11412},{"class":834,"line":1264},[11413,11417,11421,11425,11429,11434,11438,11442],{"type":30,"tag":832,"props":11414,"children":11415},{"style":4146},[11416],{"type":35,"value":5496},{"type":30,"tag":832,"props":11418,"children":11419},{"style":1588},[11420],{"type":35,"value":10393},{"type":30,"tag":832,"props":11422,"children":11423},{"style":997},[11424],{"type":35,"value":1595},{"type":30,"tag":832,"props":11426,"children":11427},{"style":845},[11428],{"type":35,"value":853},{"type":30,"tag":832,"props":11430,"children":11431},{"style":856},[11432],{"type":35,"value":11433},"/api/subscribe",{"type":30,"tag":832,"props":11435,"children":11436},{"style":845},[11437],{"type":35,"value":853},{"type":30,"tag":832,"props":11439,"children":11440},{"style":845},[11441],{"type":35,"value":1057},{"type":30,"tag":832,"props":11443,"children":11444},{"style":997},[11445],{"type":35,"value":1304},{"type":30,"tag":832,"props":11447,"children":11448},{"class":834,"line":1272},[11449,11454,11458,11462,11466,11470],{"type":30,"tag":832,"props":11450,"children":11451},{"style":1311},[11452],{"type":35,"value":11453},"      method",{"type":30,"tag":832,"props":11455,"children":11456},{"style":845},[11457],{"type":35,"value":1289},{"type":30,"tag":832,"props":11459,"children":11460},{"style":845},[11461],{"type":35,"value":1021},{"type":30,"tag":832,"props":11463,"children":11464},{"style":856},[11465],{"type":35,"value":9517},{"type":30,"tag":832,"props":11467,"children":11468},{"style":845},[11469],{"type":35,"value":853},{"type":30,"tag":832,"props":11471,"children":11472},{"style":845},[11473],{"type":35,"value":1372},{"type":30,"tag":832,"props":11475,"children":11476},{"class":834,"line":1307},[11477,11482,11486,11490,11495,11499,11503,11507,11511,11515],{"type":30,"tag":832,"props":11478,"children":11479},{"style":1311},[11480],{"type":35,"value":11481},"      body",{"type":30,"tag":832,"props":11483,"children":11484},{"style":845},[11485],{"type":35,"value":1289},{"type":30,"tag":832,"props":11487,"children":11488},{"style":997},[11489],{"type":35,"value":1000},{"type":30,"tag":832,"props":11491,"children":11492},{"style":1311},[11493],{"type":35,"value":11494},"email",{"type":30,"tag":832,"props":11496,"children":11497},{"style":845},[11498],{"type":35,"value":1289},{"type":30,"tag":832,"props":11500,"children":11501},{"style":839},[11502],{"type":35,"value":11241},{"type":30,"tag":832,"props":11504,"children":11505},{"style":845},[11506],{"type":35,"value":641},{"type":30,"tag":832,"props":11508,"children":11509},{"style":991},[11510],{"type":35,"value":3379},{"type":30,"tag":832,"props":11512,"children":11513},{"style":997},[11514],{"type":35,"value":1011},{"type":30,"tag":832,"props":11516,"children":11517},{"style":845},[11518],{"type":35,"value":1372},{"type":30,"tag":832,"props":11520,"children":11521},{"class":834,"line":1325},[11522,11526],{"type":30,"tag":832,"props":11523,"children":11524},{"style":997},[11525],{"type":35,"value":5716},{"type":30,"tag":832,"props":11527,"children":11528},{"style":845},[11529],{"type":35,"value":1035},{"type":30,"tag":832,"props":11531,"children":11532},{"class":834,"line":1375},[11533,11538,11542,11546,11550,11554,11559,11563],{"type":30,"tag":832,"props":11534,"children":11535},{"style":839},[11536],{"type":35,"value":11537},"    message",{"type":30,"tag":832,"props":11539,"children":11540},{"style":845},[11541],{"type":35,"value":641},{"type":30,"tag":832,"props":11543,"children":11544},{"style":991},[11545],{"type":35,"value":3379},{"type":30,"tag":832,"props":11547,"children":11548},{"style":845},[11549],{"type":35,"value":1299},{"type":30,"tag":832,"props":11551,"children":11552},{"style":845},[11553],{"type":35,"value":1021},{"type":30,"tag":832,"props":11555,"children":11556},{"style":856},[11557],{"type":35,"value":11558},"Check your inbox.",{"type":30,"tag":832,"props":11560,"children":11561},{"style":845},[11562],{"type":35,"value":853},{"type":30,"tag":832,"props":11564,"children":11565},{"style":845},[11566],{"type":35,"value":1035},{"type":30,"tag":832,"props":11568,"children":11569},{"class":834,"line":1420},[11570,11574,11578,11582,11586],{"type":30,"tag":832,"props":11571,"children":11572},{"style":997},[11573],{"type":35,"value":4788},{"type":30,"tag":832,"props":11575,"children":11576},{"style":1097},[11577],{"type":35,"value":4793},{"type":30,"tag":832,"props":11579,"children":11580},{"style":997},[11581],{"type":35,"value":1679},{"type":30,"tag":832,"props":11583,"children":11584},{"style":839},[11585],{"type":35,"value":4047},{"type":30,"tag":832,"props":11587,"children":11588},{"style":997},[11589],{"type":35,"value":1893},{"type":30,"tag":832,"props":11591,"children":11592},{"class":834,"line":1449},[11593,11597,11601,11605,11609,11613,11617,11621,11625,11629,11633,11637,11642,11646],{"type":30,"tag":832,"props":11594,"children":11595},{"style":839},[11596],{"type":35,"value":11537},{"type":30,"tag":832,"props":11598,"children":11599},{"style":845},[11600],{"type":35,"value":641},{"type":30,"tag":832,"props":11602,"children":11603},{"style":991},[11604],{"type":35,"value":3379},{"type":30,"tag":832,"props":11606,"children":11607},{"style":845},[11608],{"type":35,"value":1299},{"type":30,"tag":832,"props":11610,"children":11611},{"style":839},[11612],{"type":35,"value":3767},{"type":30,"tag":832,"props":11614,"children":11615},{"style":845},[11616],{"type":35,"value":641},{"type":30,"tag":832,"props":11618,"children":11619},{"style":839},[11620],{"type":35,"value":10625},{"type":30,"tag":832,"props":11622,"children":11623},{"style":845},[11624],{"type":35,"value":7828},{"type":30,"tag":832,"props":11626,"children":11627},{"style":991},[11628],{"type":35,"value":9071},{"type":30,"tag":832,"props":11630,"children":11631},{"style":1097},[11632],{"type":35,"value":3397},{"type":30,"tag":832,"props":11634,"children":11635},{"style":845},[11636],{"type":35,"value":1021},{"type":30,"tag":832,"props":11638,"children":11639},{"style":856},[11640],{"type":35,"value":11641},"Something went wrong.",{"type":30,"tag":832,"props":11643,"children":11644},{"style":845},[11645],{"type":35,"value":853},{"type":30,"tag":832,"props":11647,"children":11648},{"style":845},[11649],{"type":35,"value":1035},{"type":30,"tag":832,"props":11651,"children":11652},{"class":834,"line":1478},[11653,11657,11662],{"type":30,"tag":832,"props":11654,"children":11655},{"style":997},[11656],{"type":35,"value":4788},{"type":30,"tag":832,"props":11658,"children":11659},{"style":1097},[11660],{"type":35,"value":11661},"finally",{"type":30,"tag":832,"props":11663,"children":11664},{"style":997},[11665],{"type":35,"value":1304},{"type":30,"tag":832,"props":11667,"children":11668},{"class":834,"line":1491},[11669,11674,11678,11682,11686,11690],{"type":30,"tag":832,"props":11670,"children":11671},{"style":839},[11672],{"type":35,"value":11673},"    submitting",{"type":30,"tag":832,"props":11675,"children":11676},{"style":845},[11677],{"type":35,"value":641},{"type":30,"tag":832,"props":11679,"children":11680},{"style":991},[11681],{"type":35,"value":3379},{"type":30,"tag":832,"props":11683,"children":11684},{"style":845},[11685],{"type":35,"value":1299},{"type":30,"tag":832,"props":11687,"children":11688},{"style":1365},[11689],{"type":35,"value":5732},{"type":30,"tag":832,"props":11691,"children":11692},{"style":845},[11693],{"type":35,"value":1035},{"type":30,"tag":832,"props":11695,"children":11696},{"class":834,"line":1508},[11697],{"type":30,"tag":832,"props":11698,"children":11699},{"style":997},[11700],{"type":35,"value":1987},{"type":30,"tag":832,"props":11702,"children":11703},{"class":834,"line":1538},[11704],{"type":30,"tag":832,"props":11705,"children":11706},{"style":997},[11707],{"type":35,"value":1765},{"type":30,"tag":832,"props":11709,"children":11710},{"class":834,"line":1550},[11711,11715,11719],{"type":30,"tag":832,"props":11712,"children":11713},{"style":2438},[11714],{"type":35,"value":2846},{"type":30,"tag":832,"props":11716,"children":11717},{"style":2444},[11718],{"type":35,"value":2447},{"type":30,"tag":832,"props":11720,"children":11721},{"style":2438},[11722],{"type":35,"value":2479},{"type":30,"tag":31,"props":11724,"children":11725},{},[11726,11728,11733,11735,11740],{"type":35,"value":11727},"Wrapping that in ",{"type":30,"tag":38,"props":11729,"children":11731},{"className":11730},[],[11732],{"type":35,"value":8468},{"type":35,"value":11734}," would run it during SSR, on page load, before the user typed anything. Mutations belong in ",{"type":30,"tag":38,"props":11736,"children":11738},{"className":11737},[],[11739],{"type":35,"value":8484},{"type":35,"value":641},{"type":30,"tag":31,"props":11742,"children":11743},{},[11744],{"type":35,"value":11745},"After a mutation changes data that a composable is holding, sync it:",{"type":30,"tag":822,"props":11747,"children":11749},{"code":11748,"language":9268,"meta":7,"className":9269,"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",[11750],{"type":30,"tag":38,"props":11751,"children":11752},{"__ignoreMap":7},[11753,11835,11860],{"type":30,"tag":832,"props":11754,"children":11755},{"class":834,"line":835},[11756,11760,11764,11768,11772,11776,11780,11784,11788,11793,11797,11801,11805,11809,11813,11818,11822,11827,11831],{"type":30,"tag":832,"props":11757,"children":11758},{"style":4146},[11759],{"type":35,"value":4149},{"type":30,"tag":832,"props":11761,"children":11762},{"style":1588},[11763],{"type":35,"value":10393},{"type":30,"tag":832,"props":11765,"children":11766},{"style":997},[11767],{"type":35,"value":1595},{"type":30,"tag":832,"props":11769,"children":11770},{"style":845},[11771],{"type":35,"value":853},{"type":30,"tag":832,"props":11773,"children":11774},{"style":856},[11775],{"type":35,"value":10406},{"type":30,"tag":832,"props":11777,"children":11778},{"style":845},[11779],{"type":35,"value":853},{"type":30,"tag":832,"props":11781,"children":11782},{"style":845},[11783],{"type":35,"value":1057},{"type":30,"tag":832,"props":11785,"children":11786},{"style":997},[11787],{"type":35,"value":2318},{"type":30,"tag":832,"props":11789,"children":11790},{"style":1311},[11791],{"type":35,"value":11792}," method",{"type":30,"tag":832,"props":11794,"children":11795},{"style":845},[11796],{"type":35,"value":1289},{"type":30,"tag":832,"props":11798,"children":11799},{"style":845},[11800],{"type":35,"value":1021},{"type":30,"tag":832,"props":11802,"children":11803},{"style":856},[11804],{"type":35,"value":9517},{"type":30,"tag":832,"props":11806,"children":11807},{"style":845},[11808],{"type":35,"value":853},{"type":30,"tag":832,"props":11810,"children":11811},{"style":845},[11812],{"type":35,"value":1057},{"type":30,"tag":832,"props":11814,"children":11815},{"style":1311},[11816],{"type":35,"value":11817}," body",{"type":30,"tag":832,"props":11819,"children":11820},{"style":845},[11821],{"type":35,"value":1289},{"type":30,"tag":832,"props":11823,"children":11824},{"style":839},[11825],{"type":35,"value":11826}," draft",{"type":30,"tag":832,"props":11828,"children":11829},{"style":997},[11830],{"type":35,"value":2789},{"type":30,"tag":832,"props":11832,"children":11833},{"style":845},[11834],{"type":35,"value":1035},{"type":30,"tag":832,"props":11836,"children":11837},{"class":834,"line":473},[11838,11842,11846,11850,11855],{"type":30,"tag":832,"props":11839,"children":11840},{"style":4146},[11841],{"type":35,"value":4149},{"type":30,"tag":832,"props":11843,"children":11844},{"style":1588},[11845],{"type":35,"value":8871},{"type":30,"tag":832,"props":11847,"children":11848},{"style":997},[11849],{"type":35,"value":1661},{"type":30,"tag":832,"props":11851,"children":11852},{"style":845},[11853],{"type":35,"value":11854},";",{"type":30,"tag":832,"props":11856,"children":11857},{"style":982},[11858],{"type":35,"value":11859},"                    // the handle from this component\n",{"type":30,"tag":832,"props":11861,"children":11862},{"class":834,"line":1038},[11863,11867,11872,11876,11880,11884,11888,11892,11896],{"type":30,"tag":832,"props":11864,"children":11865},{"style":4146},[11866],{"type":35,"value":4149},{"type":30,"tag":832,"props":11868,"children":11869},{"style":1588},[11870],{"type":35,"value":11871}," refreshNuxtData",{"type":30,"tag":832,"props":11873,"children":11874},{"style":997},[11875],{"type":35,"value":1595},{"type":30,"tag":832,"props":11877,"children":11878},{"style":845},[11879],{"type":35,"value":853},{"type":30,"tag":832,"props":11881,"children":11882},{"style":856},[11883],{"type":35,"value":10368},{"type":30,"tag":832,"props":11885,"children":11886},{"style":845},[11887],{"type":35,"value":853},{"type":30,"tag":832,"props":11889,"children":11890},{"style":997},[11891],{"type":35,"value":1605},{"type":30,"tag":832,"props":11893,"children":11894},{"style":845},[11895],{"type":35,"value":11854},{"type":30,"tag":832,"props":11897,"children":11898},{"style":982},[11899],{"type":35,"value":11900},"  // by key, from anywhere\n",{"type":30,"tag":97,"props":11902,"children":11904},{"id":11903},"server-false-is-not-a-security-boundary",[11905],{"type":35,"value":11906},"server: false Is Not a Security Boundary",{"type":30,"tag":31,"props":11908,"children":11909},{},[11910,11912,11918],{"type":35,"value":11911},"An earlier version of this article listed ",{"type":30,"tag":38,"props":11913,"children":11915},{"className":11914},[],[11916],{"type":35,"value":11917},"{ server: true }",{"type":35,"value":11919}," 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":30,"tag":31,"props":11921,"children":11922},{},[11923,11929,11931,11937,11939],{"type":30,"tag":38,"props":11924,"children":11926},{"className":11925},[],[11927],{"type":35,"value":11928},"server: true",{"type":35,"value":11930}," 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":30,"tag":38,"props":11932,"children":11934},{"className":11933},[],[11935],{"type":35,"value":11936},"__NUXT__",{"type":35,"value":11938}," payload, which is plain text in the HTML document. ",{"type":30,"tag":159,"props":11940,"children":11941},{},[11942,11944,11949],{"type":35,"value":11943},"Anything a composable returns is readable by the user, whichever way ",{"type":30,"tag":38,"props":11945,"children":11947},{"className":11946},[],[11948],{"type":35,"value":7724},{"type":35,"value":11950}," is set.",{"type":30,"tag":31,"props":11952,"children":11953},{},[11954,11960],{"type":30,"tag":38,"props":11955,"children":11957},{"className":11956},[],[11958],{"type":35,"value":11959},"server: false",{"type":35,"value":11961}," is the option that changes behaviour, and it changes it in the opposite direction: skip this during SSR, run it only after hydration.",{"type":30,"tag":822,"props":11963,"children":11965},{"code":11964,"language":9268,"meta":7,"className":9269,"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",[11966],{"type":30,"tag":38,"props":11967,"children":11968},{"__ignoreMap":7},[11969,11977,11985,12050,12070],{"type":30,"tag":832,"props":11970,"children":11971},{"class":834,"line":835},[11972],{"type":30,"tag":832,"props":11973,"children":11974},{"style":982},[11975],{"type":35,"value":11976},"// Runs in the browser only. Never part of the SSR payload.\n",{"type":30,"tag":832,"props":11978,"children":11979},{"class":834,"line":473},[11980],{"type":30,"tag":832,"props":11981,"children":11982},{"style":982},[11983],{"type":35,"value":11984},"// Correct for data that is per-user and uncacheable, not for data that is secret.\n",{"type":30,"tag":832,"props":11986,"children":11987},{"class":834,"line":1038},[11988,11992,11996,12000,12004,12009,12013,12017,12021,12025,12029,12033,12038,12042,12046],{"type":30,"tag":832,"props":11989,"children":11990},{"style":1276},[11991],{"type":35,"value":1279},{"type":30,"tag":832,"props":11993,"children":11994},{"style":845},[11995],{"type":35,"value":2318},{"type":30,"tag":832,"props":11997,"children":11998},{"style":839},[11999],{"type":35,"value":8836},{"type":30,"tag":832,"props":12001,"children":12002},{"style":845},[12003],{"type":35,"value":1289},{"type":30,"tag":832,"props":12005,"children":12006},{"style":1097},[12007],{"type":35,"value":12008}," notifications",{"type":30,"tag":832,"props":12010,"children":12011},{"style":845},[12012],{"type":35,"value":1011},{"type":30,"tag":832,"props":12014,"children":12015},{"style":845},[12016],{"type":35,"value":1299},{"type":30,"tag":832,"props":12018,"children":12019},{"style":4146},[12020],{"type":35,"value":4752},{"type":30,"tag":832,"props":12022,"children":12023},{"style":1588},[12024],{"type":35,"value":8888},{"type":30,"tag":832,"props":12026,"children":12027},{"style":997},[12028],{"type":35,"value":1595},{"type":30,"tag":832,"props":12030,"children":12031},{"style":845},[12032],{"type":35,"value":853},{"type":30,"tag":832,"props":12034,"children":12035},{"style":856},[12036],{"type":35,"value":12037},"/api/notifications",{"type":30,"tag":832,"props":12039,"children":12040},{"style":845},[12041],{"type":35,"value":853},{"type":30,"tag":832,"props":12043,"children":12044},{"style":845},[12045],{"type":35,"value":1057},{"type":30,"tag":832,"props":12047,"children":12048},{"style":997},[12049],{"type":35,"value":1304},{"type":30,"tag":832,"props":12051,"children":12052},{"class":834,"line":1089},[12053,12058,12062,12066],{"type":30,"tag":832,"props":12054,"children":12055},{"style":1311},[12056],{"type":35,"value":12057},"  server",{"type":30,"tag":832,"props":12059,"children":12060},{"style":845},[12061],{"type":35,"value":1289},{"type":30,"tag":832,"props":12063,"children":12064},{"style":1365},[12065],{"type":35,"value":5732},{"type":30,"tag":832,"props":12067,"children":12068},{"style":845},[12069],{"type":35,"value":1372},{"type":30,"tag":832,"props":12071,"children":12072},{"class":834,"line":1145},[12073,12077],{"type":30,"tag":832,"props":12074,"children":12075},{"style":997},[12076],{"type":35,"value":1996},{"type":30,"tag":832,"props":12078,"children":12079},{"style":845},[12080],{"type":35,"value":1035},{"type":30,"tag":31,"props":12082,"children":12083},{},[12084],{"type":35,"value":12085},"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":30,"tag":822,"props":12087,"children":12090},{"code":12088,"language":2470,"meta":7,"className":12089,"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",[12091],{"type":30,"tag":38,"props":12092,"children":12093},{"__ignoreMap":7},[12094,12102,12146,12187,12194,12202,12213,12241,12269,12298,12309],{"type":30,"tag":832,"props":12095,"children":12096},{"class":834,"line":835},[12097],{"type":30,"tag":832,"props":12098,"children":12099},{"style":982},[12100],{"type":35,"value":12101},"// server/api/profile.get.ts\n",{"type":30,"tag":832,"props":12103,"children":12104},{"class":834,"line":473},[12105,12109,12113,12118,12122,12126,12130,12134,12138,12142],{"type":30,"tag":832,"props":12106,"children":12107},{"style":991},[12108],{"type":35,"value":5309},{"type":30,"tag":832,"props":12110,"children":12111},{"style":991},[12112],{"type":35,"value":6261},{"type":30,"tag":832,"props":12114,"children":12115},{"style":1588},[12116],{"type":35,"value":12117}," defineEventHandler",{"type":30,"tag":832,"props":12119,"children":12120},{"style":997},[12121],{"type":35,"value":1595},{"type":30,"tag":832,"props":12123,"children":12124},{"style":1276},[12125],{"type":35,"value":5399},{"type":30,"tag":832,"props":12127,"children":12128},{"style":997},[12129],{"type":35,"value":1679},{"type":30,"tag":832,"props":12131,"children":12132},{"style":1808},[12133],{"type":35,"value":1811},{"type":30,"tag":832,"props":12135,"children":12136},{"style":997},[12137],{"type":35,"value":1605},{"type":30,"tag":832,"props":12139,"children":12140},{"style":1097},[12141],{"type":35,"value":1820},{"type":30,"tag":832,"props":12143,"children":12144},{"style":997},[12145],{"type":35,"value":1304},{"type":30,"tag":832,"props":12147,"children":12148},{"class":834,"line":1038},[12149,12153,12158,12162,12166,12171,12175,12179,12183],{"type":30,"tag":832,"props":12150,"children":12151},{"style":1276},[12152],{"type":35,"value":6303},{"type":30,"tag":832,"props":12154,"children":12155},{"style":1097},[12156],{"type":35,"value":12157}," user",{"type":30,"tag":832,"props":12159,"children":12160},{"style":845},[12161],{"type":35,"value":1299},{"type":30,"tag":832,"props":12163,"children":12164},{"style":4146},[12165],{"type":35,"value":4752},{"type":30,"tag":832,"props":12167,"children":12168},{"style":1588},[12169],{"type":35,"value":12170}," getUserFromSession",{"type":30,"tag":832,"props":12172,"children":12173},{"style":997},[12174],{"type":35,"value":1595},{"type":30,"tag":832,"props":12176,"children":12177},{"style":839},[12178],{"type":35,"value":1811},{"type":30,"tag":832,"props":12180,"children":12181},{"style":997},[12182],{"type":35,"value":1605},{"type":30,"tag":832,"props":12184,"children":12185},{"style":845},[12186],{"type":35,"value":1035},{"type":30,"tag":832,"props":12188,"children":12189},{"class":834,"line":1089},[12190],{"type":30,"tag":832,"props":12191,"children":12192},{"emptyLinePlaceholder":1190},[12193],{"type":35,"value":1193},{"type":30,"tag":832,"props":12195,"children":12196},{"class":834,"line":1145},[12197],{"type":30,"tag":832,"props":12198,"children":12199},{"style":982},[12200],{"type":35,"value":12201},"  // stripeCustomerId and internalNotes stay on this side.\n",{"type":30,"tag":832,"props":12203,"children":12204},{"class":834,"line":1186},[12205,12209],{"type":30,"tag":832,"props":12206,"children":12207},{"style":4146},[12208],{"type":35,"value":10119},{"type":30,"tag":832,"props":12210,"children":12211},{"style":997},[12212],{"type":35,"value":1304},{"type":30,"tag":832,"props":12214,"children":12215},{"class":834,"line":1196},[12216,12221,12225,12229,12233,12237],{"type":30,"tag":832,"props":12217,"children":12218},{"style":1311},[12219],{"type":35,"value":12220},"    name",{"type":30,"tag":832,"props":12222,"children":12223},{"style":845},[12224],{"type":35,"value":1289},{"type":30,"tag":832,"props":12226,"children":12227},{"style":839},[12228],{"type":35,"value":12157},{"type":30,"tag":832,"props":12230,"children":12231},{"style":845},[12232],{"type":35,"value":641},{"type":30,"tag":832,"props":12234,"children":12235},{"style":991},[12236],{"type":35,"value":3500},{"type":30,"tag":832,"props":12238,"children":12239},{"style":845},[12240],{"type":35,"value":1372},{"type":30,"tag":832,"props":12242,"children":12243},{"class":834,"line":1230},[12244,12249,12253,12257,12261,12265],{"type":30,"tag":832,"props":12245,"children":12246},{"style":1311},[12247],{"type":35,"value":12248},"    email",{"type":30,"tag":832,"props":12250,"children":12251},{"style":845},[12252],{"type":35,"value":1289},{"type":30,"tag":832,"props":12254,"children":12255},{"style":839},[12256],{"type":35,"value":12157},{"type":30,"tag":832,"props":12258,"children":12259},{"style":845},[12260],{"type":35,"value":641},{"type":30,"tag":832,"props":12262,"children":12263},{"style":991},[12264],{"type":35,"value":11494},{"type":30,"tag":832,"props":12266,"children":12267},{"style":845},[12268],{"type":35,"value":1372},{"type":30,"tag":832,"props":12270,"children":12271},{"class":834,"line":1264},[12272,12277,12281,12285,12289,12294],{"type":30,"tag":832,"props":12273,"children":12274},{"style":1311},[12275],{"type":35,"value":12276},"    plan",{"type":30,"tag":832,"props":12278,"children":12279},{"style":845},[12280],{"type":35,"value":1289},{"type":30,"tag":832,"props":12282,"children":12283},{"style":839},[12284],{"type":35,"value":12157},{"type":30,"tag":832,"props":12286,"children":12287},{"style":845},[12288],{"type":35,"value":641},{"type":30,"tag":832,"props":12290,"children":12291},{"style":991},[12292],{"type":35,"value":12293},"plan",{"type":30,"tag":832,"props":12295,"children":12296},{"style":845},[12297],{"type":35,"value":1372},{"type":30,"tag":832,"props":12299,"children":12300},{"class":834,"line":1272},[12301,12305],{"type":30,"tag":832,"props":12302,"children":12303},{"style":997},[12304],{"type":35,"value":1484},{"type":30,"tag":832,"props":12306,"children":12307},{"style":845},[12308],{"type":35,"value":1035},{"type":30,"tag":832,"props":12310,"children":12311},{"class":834,"line":1307},[12312,12316],{"type":30,"tag":832,"props":12313,"children":12314},{"style":997},[12315],{"type":35,"value":1996},{"type":30,"tag":832,"props":12317,"children":12318},{"style":845},[12319],{"type":35,"value":1035},{"type":30,"tag":97,"props":12321,"children":12323},{"id":12322},"status-not-pending",[12324],{"type":35,"value":12325},"status, Not pending",{"type":30,"tag":31,"props":12327,"children":12328},{},[12329,12331,12336,12338,12343],{"type":35,"value":12330},"Both are returned and ",{"type":30,"tag":38,"props":12332,"children":12334},{"className":12333},[],[12335],{"type":35,"value":8992},{"type":35,"value":12337}," is still documented, so nothing is broken if you use it. ",{"type":30,"tag":38,"props":12339,"children":12341},{"className":12340},[],[12342],{"type":35,"value":8978},{"type":35,"value":12344}," is more precise:",{"type":35,"value":12346},"\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":30,"tag":7990,"props":12348,"children":12349},{},[12350,12369],{"type":30,"tag":7994,"props":12351,"children":12352},{},[12353],{"type":30,"tag":7998,"props":12354,"children":12355},{},[12356,12364],{"type":30,"tag":8002,"props":12357,"children":12358},{},[12359],{"type":30,"tag":38,"props":12360,"children":12362},{"className":12361},[],[12363],{"type":35,"value":8978},{"type":30,"tag":8002,"props":12365,"children":12366},{},[12367],{"type":35,"value":12368},"Meaning",{"type":30,"tag":8025,"props":12370,"children":12371},{},[12372,12403,12419,12436],{"type":30,"tag":7998,"props":12373,"children":12374},{},[12375,12384],{"type":30,"tag":8032,"props":12376,"children":12377},{},[12378],{"type":30,"tag":38,"props":12379,"children":12381},{"className":12380},[],[12382],{"type":35,"value":12383},"idle",{"type":30,"tag":8032,"props":12385,"children":12386},{},[12387,12389,12395,12397],{"type":35,"value":12388},"Not started. You passed ",{"type":30,"tag":38,"props":12390,"children":12392},{"className":12391},[],[12393],{"type":35,"value":12394},"immediate: false",{"type":35,"value":12396}," and have not called ",{"type":30,"tag":38,"props":12398,"children":12400},{"className":12399},[],[12401],{"type":35,"value":12402},"execute()",{"type":30,"tag":7998,"props":12404,"children":12405},{},[12406,12414],{"type":30,"tag":8032,"props":12407,"children":12408},{},[12409],{"type":30,"tag":38,"props":12410,"children":12412},{"className":12411},[],[12413],{"type":35,"value":8992},{"type":30,"tag":8032,"props":12415,"children":12416},{},[12417],{"type":35,"value":12418},"In flight",{"type":30,"tag":7998,"props":12420,"children":12421},{},[12422,12431],{"type":30,"tag":8032,"props":12423,"children":12424},{},[12425],{"type":30,"tag":38,"props":12426,"children":12428},{"className":12427},[],[12429],{"type":35,"value":12430},"success",{"type":30,"tag":8032,"props":12432,"children":12433},{},[12434],{"type":35,"value":12435},"Resolved",{"type":30,"tag":7998,"props":12437,"children":12438},{},[12439,12447],{"type":30,"tag":8032,"props":12440,"children":12441},{},[12442],{"type":30,"tag":38,"props":12443,"children":12445},{"className":12444},[],[12446],{"type":35,"value":4047},{"type":30,"tag":8032,"props":12448,"children":12449},{},[12450],{"type":35,"value":12451},"Rejected",{"type":30,"tag":31,"props":12453,"children":12454},{},[12455,12457,12462,12463,12468,12470,12475,12477,12482],{"type":35,"value":12456},"The distinction that matters is ",{"type":30,"tag":38,"props":12458,"children":12460},{"className":12459},[],[12461],{"type":35,"value":12383},{"type":35,"value":4985},{"type":30,"tag":38,"props":12464,"children":12466},{"className":12465},[],[12467],{"type":35,"value":8992},{"type":35,"value":12469},". A boolean cannot tell them apart, so a template driven by ",{"type":30,"tag":38,"props":12471,"children":12473},{"className":12472},[],[12474],{"type":35,"value":8992},{"type":35,"value":12476}," renders a spinner for a request that has not been made and never will be until something calls ",{"type":30,"tag":38,"props":12478,"children":12480},{"className":12479},[],[12481],{"type":35,"value":12402},{"type":35,"value":641},{"type":30,"tag":822,"props":12484,"children":12486},{"code":12485,"language":1026,"meta":7,"className":2427,"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",[12487],{"type":30,"tag":38,"props":12488,"children":12489},{"__ignoreMap":7},[12490,12509,12545,12552,12634,12671,12691,12702,12717,12724,12739,12817,12824,12888,12952,13016,13035,13143,13158],{"type":30,"tag":832,"props":12491,"children":12492},{"class":834,"line":835},[12493,12497,12501,12505],{"type":30,"tag":832,"props":12494,"children":12495},{"style":2438},[12496],{"type":35,"value":2441},{"type":30,"tag":832,"props":12498,"children":12499},{"style":2444},[12500],{"type":35,"value":2447},{"type":30,"tag":832,"props":12502,"children":12503},{"style":1097},[12504],{"type":35,"value":2452},{"type":30,"tag":832,"props":12506,"children":12507},{"style":2438},[12508],{"type":35,"value":2479},{"type":30,"tag":832,"props":12510,"children":12511},{"class":834,"line":473},[12512,12516,12521,12525,12529,12533,12537,12541],{"type":30,"tag":832,"props":12513,"children":12514},{"style":1276},[12515],{"type":35,"value":1279},{"type":30,"tag":832,"props":12517,"children":12518},{"style":1097},[12519],{"type":35,"value":12520}," query",{"type":30,"tag":832,"props":12522,"children":12523},{"style":845},[12524],{"type":35,"value":1299},{"type":30,"tag":832,"props":12526,"children":12527},{"style":1588},[12528],{"type":35,"value":4570},{"type":30,"tag":832,"props":12530,"children":12531},{"style":997},[12532],{"type":35,"value":1595},{"type":30,"tag":832,"props":12534,"children":12535},{"style":845},[12536],{"type":35,"value":11258},{"type":30,"tag":832,"props":12538,"children":12539},{"style":997},[12540],{"type":35,"value":1605},{"type":30,"tag":832,"props":12542,"children":12543},{"style":845},[12544],{"type":35,"value":1035},{"type":30,"tag":832,"props":12546,"children":12547},{"class":834,"line":1038},[12548],{"type":30,"tag":832,"props":12549,"children":12550},{"emptyLinePlaceholder":1190},[12551],{"type":35,"value":1193},{"type":30,"tag":832,"props":12553,"children":12554},{"class":834,"line":1089},[12555,12559,12563,12567,12571,12576,12580,12584,12588,12593,12597,12601,12605,12609,12613,12617,12622,12626,12630],{"type":30,"tag":832,"props":12556,"children":12557},{"style":1276},[12558],{"type":35,"value":1279},{"type":30,"tag":832,"props":12560,"children":12561},{"style":845},[12562],{"type":35,"value":2318},{"type":30,"tag":832,"props":12564,"children":12565},{"style":839},[12566],{"type":35,"value":8836},{"type":30,"tag":832,"props":12568,"children":12569},{"style":845},[12570],{"type":35,"value":1289},{"type":30,"tag":832,"props":12572,"children":12573},{"style":1097},[12574],{"type":35,"value":12575}," results",{"type":30,"tag":832,"props":12577,"children":12578},{"style":845},[12579],{"type":35,"value":1057},{"type":30,"tag":832,"props":12581,"children":12582},{"style":1097},[12583],{"type":35,"value":8854},{"type":30,"tag":832,"props":12585,"children":12586},{"style":845},[12587],{"type":35,"value":1057},{"type":30,"tag":832,"props":12589,"children":12590},{"style":1097},[12591],{"type":35,"value":12592}," execute",{"type":30,"tag":832,"props":12594,"children":12595},{"style":845},[12596],{"type":35,"value":1011},{"type":30,"tag":832,"props":12598,"children":12599},{"style":845},[12600],{"type":35,"value":1299},{"type":30,"tag":832,"props":12602,"children":12603},{"style":4146},[12604],{"type":35,"value":4752},{"type":30,"tag":832,"props":12606,"children":12607},{"style":1588},[12608],{"type":35,"value":8888},{"type":30,"tag":832,"props":12610,"children":12611},{"style":997},[12612],{"type":35,"value":1595},{"type":30,"tag":832,"props":12614,"children":12615},{"style":845},[12616],{"type":35,"value":853},{"type":30,"tag":832,"props":12618,"children":12619},{"style":856},[12620],{"type":35,"value":12621},"/api/search",{"type":30,"tag":832,"props":12623,"children":12624},{"style":845},[12625],{"type":35,"value":853},{"type":30,"tag":832,"props":12627,"children":12628},{"style":845},[12629],{"type":35,"value":1057},{"type":30,"tag":832,"props":12631,"children":12632},{"style":997},[12633],{"type":35,"value":1304},{"type":30,"tag":832,"props":12635,"children":12636},{"class":834,"line":1145},[12637,12642,12646,12650,12655,12659,12663,12667],{"type":30,"tag":832,"props":12638,"children":12639},{"style":1311},[12640],{"type":35,"value":12641},"  query",{"type":30,"tag":832,"props":12643,"children":12644},{"style":845},[12645],{"type":35,"value":1289},{"type":30,"tag":832,"props":12647,"children":12648},{"style":997},[12649],{"type":35,"value":2318},{"type":30,"tag":832,"props":12651,"children":12652},{"style":1311},[12653],{"type":35,"value":12654}," q",{"type":30,"tag":832,"props":12656,"children":12657},{"style":845},[12658],{"type":35,"value":1289},{"type":30,"tag":832,"props":12660,"children":12661},{"style":839},[12662],{"type":35,"value":12520},{"type":30,"tag":832,"props":12664,"children":12665},{"style":997},[12666],{"type":35,"value":1011},{"type":30,"tag":832,"props":12668,"children":12669},{"style":845},[12670],{"type":35,"value":1372},{"type":30,"tag":832,"props":12672,"children":12673},{"class":834,"line":1186},[12674,12679,12683,12687],{"type":30,"tag":832,"props":12675,"children":12676},{"style":1311},[12677],{"type":35,"value":12678},"  immediate",{"type":30,"tag":832,"props":12680,"children":12681},{"style":845},[12682],{"type":35,"value":1289},{"type":30,"tag":832,"props":12684,"children":12685},{"style":1365},[12686],{"type":35,"value":5732},{"type":30,"tag":832,"props":12688,"children":12689},{"style":845},[12690],{"type":35,"value":1372},{"type":30,"tag":832,"props":12692,"children":12693},{"class":834,"line":1196},[12694,12698],{"type":30,"tag":832,"props":12695,"children":12696},{"style":997},[12697],{"type":35,"value":1996},{"type":30,"tag":832,"props":12699,"children":12700},{"style":845},[12701],{"type":35,"value":1035},{"type":30,"tag":832,"props":12703,"children":12704},{"class":834,"line":1230},[12705,12709,12713],{"type":30,"tag":832,"props":12706,"children":12707},{"style":2438},[12708],{"type":35,"value":2846},{"type":30,"tag":832,"props":12710,"children":12711},{"style":2444},[12712],{"type":35,"value":2447},{"type":30,"tag":832,"props":12714,"children":12715},{"style":2438},[12716],{"type":35,"value":2479},{"type":30,"tag":832,"props":12718,"children":12719},{"class":834,"line":1264},[12720],{"type":30,"tag":832,"props":12721,"children":12722},{"emptyLinePlaceholder":1190},[12723],{"type":35,"value":1193},{"type":30,"tag":832,"props":12725,"children":12726},{"class":834,"line":1272},[12727,12731,12735],{"type":30,"tag":832,"props":12728,"children":12729},{"style":2438},[12730],{"type":35,"value":2441},{"type":30,"tag":832,"props":12732,"children":12733},{"style":2444},[12734],{"type":35,"value":2873},{"type":30,"tag":832,"props":12736,"children":12737},{"style":2438},[12738],{"type":35,"value":2479},{"type":30,"tag":832,"props":12740,"children":12741},{"class":834,"line":1307},[12742,12746,12751,12756,12760,12764,12769,12773,12777,12782,12786,12791,12795,12799,12804,12808,12812],{"type":30,"tag":832,"props":12743,"children":12744},{"style":2438},[12745],{"type":35,"value":2885},{"type":30,"tag":832,"props":12747,"children":12748},{"style":2444},[12749],{"type":35,"value":12750},"input",{"type":30,"tag":832,"props":12752,"children":12753},{"style":1097},[12754],{"type":35,"value":12755}," v-model",{"type":30,"tag":832,"props":12757,"children":12758},{"style":845},[12759],{"type":35,"value":848},{"type":30,"tag":832,"props":12761,"children":12762},{"style":845},[12763],{"type":35,"value":853},{"type":30,"tag":832,"props":12765,"children":12766},{"style":839},[12767],{"type":35,"value":12768},"query",{"type":30,"tag":832,"props":12770,"children":12771},{"style":845},[12772],{"type":35,"value":853},{"type":30,"tag":832,"props":12774,"children":12775},{"style":845},[12776],{"type":35,"value":2922},{"type":30,"tag":832,"props":12778,"children":12779},{"style":1097},[12780],{"type":35,"value":12781},"keyup",{"type":30,"tag":832,"props":12783,"children":12784},{"style":845},[12785],{"type":35,"value":641},{"type":30,"tag":832,"props":12787,"children":12788},{"style":1097},[12789],{"type":35,"value":12790},"enter",{"type":30,"tag":832,"props":12792,"children":12793},{"style":845},[12794],{"type":35,"value":848},{"type":30,"tag":832,"props":12796,"children":12797},{"style":845},[12798],{"type":35,"value":853},{"type":30,"tag":832,"props":12800,"children":12801},{"style":1588},[12802],{"type":35,"value":12803},"execute",{"type":30,"tag":832,"props":12805,"children":12806},{"style":997},[12807],{"type":35,"value":1661},{"type":30,"tag":832,"props":12809,"children":12810},{"style":845},[12811],{"type":35,"value":853},{"type":30,"tag":832,"props":12813,"children":12814},{"style":2438},[12815],{"type":35,"value":12816}," />\n",{"type":30,"tag":832,"props":12818,"children":12819},{"class":834,"line":1325},[12820],{"type":30,"tag":832,"props":12821,"children":12822},{"emptyLinePlaceholder":1190},[12823],{"type":35,"value":1193},{"type":30,"tag":832,"props":12825,"children":12826},{"class":834,"line":1375},[12827,12831,12835,12839,12843,12847,12851,12855,12859,12863,12867,12871,12876,12880,12884],{"type":30,"tag":832,"props":12828,"children":12829},{"style":2438},[12830],{"type":35,"value":2885},{"type":30,"tag":832,"props":12832,"children":12833},{"style":2444},[12834],{"type":35,"value":31},{"type":30,"tag":832,"props":12836,"children":12837},{"style":1097},[12838],{"type":35,"value":2895},{"type":30,"tag":832,"props":12840,"children":12841},{"style":845},[12842],{"type":35,"value":848},{"type":30,"tag":832,"props":12844,"children":12845},{"style":845},[12846],{"type":35,"value":853},{"type":30,"tag":832,"props":12848,"children":12849},{"style":839},[12850],{"type":35,"value":8978},{"type":30,"tag":832,"props":12852,"children":12853},{"style":1097},[12854],{"type":35,"value":1855},{"type":30,"tag":832,"props":12856,"children":12857},{"style":845},[12858],{"type":35,"value":8987},{"type":30,"tag":832,"props":12860,"children":12861},{"style":856},[12862],{"type":35,"value":12383},{"type":30,"tag":832,"props":12864,"children":12865},{"style":845},[12866],{"type":35,"value":8997},{"type":30,"tag":832,"props":12868,"children":12869},{"style":2438},[12870],{"type":35,"value":2948},{"type":30,"tag":832,"props":12872,"children":12873},{"style":2951},[12874],{"type":35,"value":12875},"Type a query and press enter",{"type":30,"tag":832,"props":12877,"children":12878},{"style":2438},[12879],{"type":35,"value":2846},{"type":30,"tag":832,"props":12881,"children":12882},{"style":2444},[12883],{"type":35,"value":31},{"type":30,"tag":832,"props":12885,"children":12886},{"style":2438},[12887],{"type":35,"value":2479},{"type":30,"tag":832,"props":12889,"children":12890},{"class":834,"line":1420},[12891,12895,12899,12903,12907,12911,12915,12919,12923,12927,12931,12935,12940,12944,12948],{"type":30,"tag":832,"props":12892,"children":12893},{"style":2438},[12894],{"type":35,"value":2885},{"type":30,"tag":832,"props":12896,"children":12897},{"style":2444},[12898],{"type":35,"value":31},{"type":30,"tag":832,"props":12900,"children":12901},{"style":1097},[12902],{"type":35,"value":9034},{"type":30,"tag":832,"props":12904,"children":12905},{"style":845},[12906],{"type":35,"value":848},{"type":30,"tag":832,"props":12908,"children":12909},{"style":845},[12910],{"type":35,"value":853},{"type":30,"tag":832,"props":12912,"children":12913},{"style":839},[12914],{"type":35,"value":8978},{"type":30,"tag":832,"props":12916,"children":12917},{"style":1097},[12918],{"type":35,"value":1855},{"type":30,"tag":832,"props":12920,"children":12921},{"style":845},[12922],{"type":35,"value":8987},{"type":30,"tag":832,"props":12924,"children":12925},{"style":856},[12926],{"type":35,"value":8992},{"type":30,"tag":832,"props":12928,"children":12929},{"style":845},[12930],{"type":35,"value":8997},{"type":30,"tag":832,"props":12932,"children":12933},{"style":2438},[12934],{"type":35,"value":2948},{"type":30,"tag":832,"props":12936,"children":12937},{"style":2951},[12938],{"type":35,"value":12939},"Searching",{"type":30,"tag":832,"props":12941,"children":12942},{"style":2438},[12943],{"type":35,"value":2846},{"type":30,"tag":832,"props":12945,"children":12946},{"style":2444},[12947],{"type":35,"value":31},{"type":30,"tag":832,"props":12949,"children":12950},{"style":2438},[12951],{"type":35,"value":2479},{"type":30,"tag":832,"props":12953,"children":12954},{"class":834,"line":1449},[12955,12959,12963,12967,12971,12975,12979,12983,12987,12991,12995,12999,13004,13008,13012],{"type":30,"tag":832,"props":12956,"children":12957},{"style":2438},[12958],{"type":35,"value":2885},{"type":30,"tag":832,"props":12960,"children":12961},{"style":2444},[12962],{"type":35,"value":31},{"type":30,"tag":832,"props":12964,"children":12965},{"style":1097},[12966],{"type":35,"value":9034},{"type":30,"tag":832,"props":12968,"children":12969},{"style":845},[12970],{"type":35,"value":848},{"type":30,"tag":832,"props":12972,"children":12973},{"style":845},[12974],{"type":35,"value":853},{"type":30,"tag":832,"props":12976,"children":12977},{"style":839},[12978],{"type":35,"value":8978},{"type":30,"tag":832,"props":12980,"children":12981},{"style":1097},[12982],{"type":35,"value":1855},{"type":30,"tag":832,"props":12984,"children":12985},{"style":845},[12986],{"type":35,"value":8987},{"type":30,"tag":832,"props":12988,"children":12989},{"style":856},[12990],{"type":35,"value":4047},{"type":30,"tag":832,"props":12992,"children":12993},{"style":845},[12994],{"type":35,"value":8997},{"type":30,"tag":832,"props":12996,"children":12997},{"style":2438},[12998],{"type":35,"value":2948},{"type":30,"tag":832,"props":13000,"children":13001},{"style":2951},[13002],{"type":35,"value":13003},"Search is unavailable",{"type":30,"tag":832,"props":13005,"children":13006},{"style":2438},[13007],{"type":35,"value":2846},{"type":30,"tag":832,"props":13009,"children":13010},{"style":2444},[13011],{"type":35,"value":31},{"type":30,"tag":832,"props":13013,"children":13014},{"style":2438},[13015],{"type":35,"value":2479},{"type":30,"tag":832,"props":13017,"children":13018},{"class":834,"line":1478},[13019,13023,13027,13031],{"type":30,"tag":832,"props":13020,"children":13021},{"style":2438},[13022],{"type":35,"value":2885},{"type":30,"tag":832,"props":13024,"children":13025},{"style":2444},[13026],{"type":35,"value":569},{"type":30,"tag":832,"props":13028,"children":13029},{"style":1097},[13030],{"type":35,"value":2982},{"type":30,"tag":832,"props":13032,"children":13033},{"style":2438},[13034],{"type":35,"value":2479},{"type":30,"tag":832,"props":13036,"children":13037},{"class":834,"line":1491},[13038,13042,13046,13050,13054,13058,13062,13066,13071,13075,13079,13083,13087,13091,13095,13099,13103,13107,13111,13115,13119,13123,13127,13131,13135,13139],{"type":30,"tag":832,"props":13039,"children":13040},{"style":2438},[13041],{"type":35,"value":9114},{"type":30,"tag":832,"props":13043,"children":13044},{"style":2444},[13045],{"type":35,"value":573},{"type":30,"tag":832,"props":13047,"children":13048},{"style":1097},[13049],{"type":35,"value":9123},{"type":30,"tag":832,"props":13051,"children":13052},{"style":845},[13053],{"type":35,"value":848},{"type":30,"tag":832,"props":13055,"children":13056},{"style":845},[13057],{"type":35,"value":853},{"type":30,"tag":832,"props":13059,"children":13060},{"style":839},[13061],{"type":35,"value":3903},{"type":30,"tag":832,"props":13063,"children":13064},{"style":845},[13065],{"type":35,"value":9141},{"type":30,"tag":832,"props":13067,"children":13068},{"style":839},[13069],{"type":35,"value":13070},"results",{"type":30,"tag":832,"props":13072,"children":13073},{"style":845},[13074],{"type":35,"value":853},{"type":30,"tag":832,"props":13076,"children":13077},{"style":845},[13078],{"type":35,"value":9155},{"type":30,"tag":832,"props":13080,"children":13081},{"style":1097},[13082],{"type":35,"value":9160},{"type":30,"tag":832,"props":13084,"children":13085},{"style":845},[13086],{"type":35,"value":848},{"type":30,"tag":832,"props":13088,"children":13089},{"style":845},[13090],{"type":35,"value":853},{"type":30,"tag":832,"props":13092,"children":13093},{"style":839},[13094],{"type":35,"value":3903},{"type":30,"tag":832,"props":13096,"children":13097},{"style":845},[13098],{"type":35,"value":641},{"type":30,"tag":832,"props":13100,"children":13101},{"style":991},[13102],{"type":35,"value":9181},{"type":30,"tag":832,"props":13104,"children":13105},{"style":845},[13106],{"type":35,"value":853},{"type":30,"tag":832,"props":13108,"children":13109},{"style":2438},[13110],{"type":35,"value":2948},{"type":30,"tag":832,"props":13112,"children":13113},{"style":845},[13114],{"type":35,"value":3487},{"type":30,"tag":832,"props":13116,"children":13117},{"style":839},[13118],{"type":35,"value":3758},{"type":30,"tag":832,"props":13120,"children":13121},{"style":845},[13122],{"type":35,"value":641},{"type":30,"tag":832,"props":13124,"children":13125},{"style":991},[13126],{"type":35,"value":9207},{"type":30,"tag":832,"props":13128,"children":13129},{"style":845},[13130],{"type":35,"value":3505},{"type":30,"tag":832,"props":13132,"children":13133},{"style":2438},[13134],{"type":35,"value":2846},{"type":30,"tag":832,"props":13136,"children":13137},{"style":2444},[13138],{"type":35,"value":573},{"type":30,"tag":832,"props":13140,"children":13141},{"style":2438},[13142],{"type":35,"value":2479},{"type":30,"tag":832,"props":13144,"children":13145},{"class":834,"line":1508},[13146,13150,13154],{"type":30,"tag":832,"props":13147,"children":13148},{"style":2438},[13149],{"type":35,"value":9231},{"type":30,"tag":832,"props":13151,"children":13152},{"style":2444},[13153],{"type":35,"value":569},{"type":30,"tag":832,"props":13155,"children":13156},{"style":2438},[13157],{"type":35,"value":2479},{"type":30,"tag":832,"props":13159,"children":13160},{"class":834,"line":1538},[13161,13165,13169],{"type":30,"tag":832,"props":13162,"children":13163},{"style":2438},[13164],{"type":35,"value":2846},{"type":30,"tag":832,"props":13166,"children":13167},{"style":2444},[13168],{"type":35,"value":2873},{"type":30,"tag":832,"props":13170,"children":13171},{"style":2438},[13172],{"type":35,"value":2479},{"type":30,"tag":31,"props":13174,"children":13175},{},[13176,13178,13183],{"type":35,"value":13177},"Four states, four branches. The ",{"type":30,"tag":38,"props":13179,"children":13181},{"className":13180},[],[13182],{"type":35,"value":12383},{"type":35,"value":13184}," branch is the one that a boolean loses.",{"type":30,"tag":97,"props":13186,"children":13188},{"id":13187},"keys-caching-and-the-nuxt-4-sharing-rule",[13189],{"type":35,"value":13190},"Keys, Caching, and the Nuxt 4 Sharing Rule",{"type":30,"tag":31,"props":13192,"children":13193},{},[13194,13196,13201,13203,13209],{"type":35,"value":13195},"The first argument to ",{"type":30,"tag":38,"props":13197,"children":13199},{"className":13198},[],[13200],{"type":35,"value":8510},{"type":35,"value":13202}," is the cache key. There is no separate ",{"type":30,"tag":38,"props":13204,"children":13206},{"className":13205},[],[13207],{"type":35,"value":13208},"cacheKey",{"type":35,"value":13210}," option, and there never was.",{"type":30,"tag":31,"props":13212,"children":13213},{},[13214,13216,13222],{"type":35,"value":13215},"Keys are how the payload is looked up on hydration, how ",{"type":30,"tag":38,"props":13217,"children":13219},{"className":13218},[],[13220],{"type":35,"value":13221},"refreshNuxtData(key)",{"type":35,"value":13223}," finds the right entry, and how two components asking for the same thing get one request.",{"type":30,"tag":31,"props":13225,"children":13226},{},[13227,13233],{"type":30,"tag":38,"props":13228,"children":13230},{"className":13229},[],[13231],{"type":35,"value":13232},"getCachedData",{"type":35,"value":13234}," gives you control over reuse across navigations:",{"type":30,"tag":822,"props":13236,"children":13238},{"code":13237,"language":9268,"meta":7,"className":9269,"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",[13239],{"type":30,"tag":38,"props":13240,"children":13241},{"__ignoreMap":7},[13242,13286,13306,13346,13353,13389,13466,13473],{"type":30,"tag":832,"props":13243,"children":13244},{"class":834,"line":835},[13245,13249,13253,13257,13261,13266,13270,13274,13278,13282],{"type":30,"tag":832,"props":13246,"children":13247},{"style":1276},[13248],{"type":35,"value":1279},{"type":30,"tag":832,"props":13250,"children":13251},{"style":845},[13252],{"type":35,"value":2318},{"type":30,"tag":832,"props":13254,"children":13255},{"style":839},[13256],{"type":35,"value":8836},{"type":30,"tag":832,"props":13258,"children":13259},{"style":845},[13260],{"type":35,"value":1289},{"type":30,"tag":832,"props":13262,"children":13263},{"style":1097},[13264],{"type":35,"value":13265}," settings",{"type":30,"tag":832,"props":13267,"children":13268},{"style":845},[13269],{"type":35,"value":1011},{"type":30,"tag":832,"props":13271,"children":13272},{"style":845},[13273],{"type":35,"value":1299},{"type":30,"tag":832,"props":13275,"children":13276},{"style":4146},[13277],{"type":35,"value":4752},{"type":30,"tag":832,"props":13279,"children":13280},{"style":1588},[13281],{"type":35,"value":9934},{"type":30,"tag":832,"props":13283,"children":13284},{"style":997},[13285],{"type":35,"value":3802},{"type":30,"tag":832,"props":13287,"children":13288},{"class":834,"line":473},[13289,13293,13298,13302],{"type":30,"tag":832,"props":13290,"children":13291},{"style":845},[13292],{"type":35,"value":10363},{"type":30,"tag":832,"props":13294,"children":13295},{"style":856},[13296],{"type":35,"value":13297},"settings",{"type":30,"tag":832,"props":13299,"children":13300},{"style":845},[13301],{"type":35,"value":853},{"type":30,"tag":832,"props":13303,"children":13304},{"style":845},[13305],{"type":35,"value":1372},{"type":30,"tag":832,"props":13307,"children":13308},{"class":834,"line":1038},[13309,13313,13317,13321,13325,13329,13334,13338,13342],{"type":30,"tag":832,"props":13310,"children":13311},{"style":997},[13312],{"type":35,"value":10384},{"type":30,"tag":832,"props":13314,"children":13315},{"style":1097},[13316],{"type":35,"value":1820},{"type":30,"tag":832,"props":13318,"children":13319},{"style":1588},[13320],{"type":35,"value":10393},{"type":30,"tag":832,"props":13322,"children":13323},{"style":997},[13324],{"type":35,"value":1595},{"type":30,"tag":832,"props":13326,"children":13327},{"style":845},[13328],{"type":35,"value":853},{"type":30,"tag":832,"props":13330,"children":13331},{"style":856},[13332],{"type":35,"value":13333},"/api/settings",{"type":30,"tag":832,"props":13335,"children":13336},{"style":845},[13337],{"type":35,"value":853},{"type":30,"tag":832,"props":13339,"children":13340},{"style":997},[13341],{"type":35,"value":1605},{"type":30,"tag":832,"props":13343,"children":13344},{"style":845},[13345],{"type":35,"value":1372},{"type":30,"tag":832,"props":13347,"children":13348},{"class":834,"line":1089},[13349],{"type":30,"tag":832,"props":13350,"children":13351},{"style":997},[13352],{"type":35,"value":10426},{"type":30,"tag":832,"props":13354,"children":13355},{"class":834,"line":1145},[13356,13361,13365,13369,13373,13377,13381,13385],{"type":30,"tag":832,"props":13357,"children":13358},{"style":1588},[13359],{"type":35,"value":13360},"    getCachedData",{"type":30,"tag":832,"props":13362,"children":13363},{"style":845},[13364],{"type":35,"value":1289},{"type":30,"tag":832,"props":13366,"children":13367},{"style":997},[13368],{"type":35,"value":1679},{"type":30,"tag":832,"props":13370,"children":13371},{"style":1808},[13372],{"type":35,"value":9160},{"type":30,"tag":832,"props":13374,"children":13375},{"style":845},[13376],{"type":35,"value":1057},{"type":30,"tag":832,"props":13378,"children":13379},{"style":1808},[13380],{"type":35,"value":7755},{"type":30,"tag":832,"props":13382,"children":13383},{"style":997},[13384],{"type":35,"value":1605},{"type":30,"tag":832,"props":13386,"children":13387},{"style":1097},[13388],{"type":35,"value":10484},{"type":30,"tag":832,"props":13390,"children":13391},{"class":834,"line":1186},[13392,13397,13401,13405,13409,13413,13417,13421,13425,13429,13433,13437,13442,13446,13450,13454,13458,13462],{"type":30,"tag":832,"props":13393,"children":13394},{"style":839},[13395],{"type":35,"value":13396},"      nuxtApp",{"type":30,"tag":832,"props":13398,"children":13399},{"style":845},[13400],{"type":35,"value":641},{"type":30,"tag":832,"props":13402,"children":13403},{"style":839},[13404],{"type":35,"value":1888},{"type":30,"tag":832,"props":13406,"children":13407},{"style":845},[13408],{"type":35,"value":641},{"type":30,"tag":832,"props":13410,"children":13411},{"style":991},[13412],{"type":35,"value":10625},{"type":30,"tag":832,"props":13414,"children":13415},{"style":997},[13416],{"type":35,"value":1742},{"type":30,"tag":832,"props":13418,"children":13419},{"style":991},[13420],{"type":35,"value":9160},{"type":30,"tag":832,"props":13422,"children":13423},{"style":997},[13424],{"type":35,"value":3392},{"type":30,"tag":832,"props":13426,"children":13427},{"style":1097},[13428],{"type":35,"value":3397},{"type":30,"tag":832,"props":13430,"children":13431},{"style":839},[13432],{"type":35,"value":7755},{"type":30,"tag":832,"props":13434,"children":13435},{"style":845},[13436],{"type":35,"value":641},{"type":30,"tag":832,"props":13438,"children":13439},{"style":839},[13440],{"type":35,"value":13441},"static",{"type":30,"tag":832,"props":13443,"children":13444},{"style":845},[13445],{"type":35,"value":641},{"type":30,"tag":832,"props":13447,"children":13448},{"style":991},[13449],{"type":35,"value":10625},{"type":30,"tag":832,"props":13451,"children":13452},{"style":997},[13453],{"type":35,"value":1742},{"type":30,"tag":832,"props":13455,"children":13456},{"style":991},[13457],{"type":35,"value":9160},{"type":30,"tag":832,"props":13459,"children":13460},{"style":997},[13461],{"type":35,"value":3392},{"type":30,"tag":832,"props":13463,"children":13464},{"style":845},[13465],{"type":35,"value":1372},{"type":30,"tag":832,"props":13467,"children":13468},{"class":834,"line":1196},[13469],{"type":30,"tag":832,"props":13470,"children":13471},{"style":997},[13472],{"type":35,"value":1987},{"type":30,"tag":832,"props":13474,"children":13475},{"class":834,"line":1230},[13476,13480],{"type":30,"tag":832,"props":13477,"children":13478},{"style":997},[13479],{"type":35,"value":1605},{"type":30,"tag":832,"props":13481,"children":13482},{"style":845},[13483],{"type":35,"value":1035},{"type":30,"tag":31,"props":13485,"children":13486},{},[13487,13489,13494],{"type":35,"value":13488},"Return a value and the handler is skipped. Return ",{"type":30,"tag":38,"props":13490,"children":13492},{"className":13491},[],[13493],{"type":35,"value":10633},{"type":35,"value":13495}," and it runs. That is the hook for \"fetch this once per session\" without a store.",{"type":30,"tag":31,"props":13497,"children":13498},{},[13499,13505,13507,13513,13515,13521,13523,13528],{"type":30,"tag":38,"props":13500,"children":13502},{"className":13501},[],[13503],{"type":35,"value":13504},"dedupe",{"type":35,"value":13506}," decides what happens when a second call fires while the first is still open. The default is ",{"type":30,"tag":38,"props":13508,"children":13510},{"className":13509},[],[13511],{"type":35,"value":13512},"'cancel'",{"type":35,"value":13514},", which drops the in-flight request and starts over. ",{"type":30,"tag":38,"props":13516,"children":13518},{"className":13517},[],[13519],{"type":35,"value":13520},"'defer'",{"type":35,"value":13522}," keeps the first one and ignores the new call. For a search box, ",{"type":30,"tag":38,"props":13524,"children":13526},{"className":13525},[],[13527],{"type":35,"value":13512},{"type":35,"value":13529}," is right, because the newest query is the only one anyone wants.",{"type":30,"tag":97,"props":13531,"children":13533},{"id":13532},"two-nuxt-4-changes-that-break-nuxt-3-code",[13534],{"type":35,"value":13535},"Two Nuxt 4 Changes That Break Nuxt 3 Code",{"type":30,"tag":8272,"props":13537,"children":13539},{"id":13538},"data-is-a-shallowref-now",[13540],{"type":35,"value":13541},"data Is a shallowRef Now",{"type":30,"tag":31,"props":13543,"children":13544},{},[13545,13547,13553,13555,13560],{"type":35,"value":13546},"In Nuxt 3 the default was deep reactivity. In Nuxt 4, ",{"type":30,"tag":38,"props":13548,"children":13550},{"className":13549},[],[13551],{"type":35,"value":13552},"deep",{"type":35,"value":13554}," defaults to ",{"type":30,"tag":38,"props":13556,"children":13558},{"className":13557},[],[13559],{"type":35,"value":11295},{"type":35,"value":13561},", so mutating a property inside the returned object updates the object but triggers nothing:",{"type":30,"tag":822,"props":13563,"children":13565},{"code":13564,"language":9268,"meta":7,"className":9269,"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",[13566],{"type":30,"tag":38,"props":13567,"children":13568},{"__ignoreMap":7},[13569,13633,13640,13690],{"type":30,"tag":832,"props":13570,"children":13571},{"class":834,"line":835},[13572,13576,13580,13584,13588,13592,13596,13600,13604,13608,13612,13616,13621,13625,13629],{"type":30,"tag":832,"props":13573,"children":13574},{"style":1276},[13575],{"type":35,"value":1279},{"type":30,"tag":832,"props":13577,"children":13578},{"style":845},[13579],{"type":35,"value":2318},{"type":30,"tag":832,"props":13581,"children":13582},{"style":839},[13583],{"type":35,"value":8836},{"type":30,"tag":832,"props":13585,"children":13586},{"style":845},[13587],{"type":35,"value":1289},{"type":30,"tag":832,"props":13589,"children":13590},{"style":1097},[13591],{"type":35,"value":12157},{"type":30,"tag":832,"props":13593,"children":13594},{"style":845},[13595],{"type":35,"value":1011},{"type":30,"tag":832,"props":13597,"children":13598},{"style":845},[13599],{"type":35,"value":1299},{"type":30,"tag":832,"props":13601,"children":13602},{"style":4146},[13603],{"type":35,"value":4752},{"type":30,"tag":832,"props":13605,"children":13606},{"style":1588},[13607],{"type":35,"value":8888},{"type":30,"tag":832,"props":13609,"children":13610},{"style":997},[13611],{"type":35,"value":1595},{"type":30,"tag":832,"props":13613,"children":13614},{"style":845},[13615],{"type":35,"value":853},{"type":30,"tag":832,"props":13617,"children":13618},{"style":856},[13619],{"type":35,"value":13620},"/api/user",{"type":30,"tag":832,"props":13622,"children":13623},{"style":845},[13624],{"type":35,"value":853},{"type":30,"tag":832,"props":13626,"children":13627},{"style":997},[13628],{"type":35,"value":1605},{"type":30,"tag":832,"props":13630,"children":13631},{"style":845},[13632],{"type":35,"value":1035},{"type":30,"tag":832,"props":13634,"children":13635},{"class":834,"line":473},[13636],{"type":30,"tag":832,"props":13637,"children":13638},{"emptyLinePlaceholder":1190},[13639],{"type":35,"value":1193},{"type":30,"tag":832,"props":13641,"children":13642},{"class":834,"line":1038},[13643,13648,13652,13656,13660,13664,13668,13672,13677,13681,13685],{"type":30,"tag":832,"props":13644,"children":13645},{"style":839},[13646],{"type":35,"value":13647},"user",{"type":30,"tag":832,"props":13649,"children":13650},{"style":845},[13651],{"type":35,"value":641},{"type":30,"tag":832,"props":13653,"children":13654},{"style":839},[13655],{"type":35,"value":3379},{"type":30,"tag":832,"props":13657,"children":13658},{"style":845},[13659],{"type":35,"value":641},{"type":30,"tag":832,"props":13661,"children":13662},{"style":991},[13663],{"type":35,"value":3500},{"type":30,"tag":832,"props":13665,"children":13666},{"style":845},[13667],{"type":35,"value":1299},{"type":30,"tag":832,"props":13669,"children":13670},{"style":845},[13671],{"type":35,"value":1021},{"type":30,"tag":832,"props":13673,"children":13674},{"style":856},[13675],{"type":35,"value":13676},"Dulan",{"type":30,"tag":832,"props":13678,"children":13679},{"style":845},[13680],{"type":35,"value":853},{"type":30,"tag":832,"props":13682,"children":13683},{"style":845},[13684],{"type":35,"value":11854},{"type":30,"tag":832,"props":13686,"children":13687},{"style":982},[13688],{"type":35,"value":13689},"        // no re-render in Nuxt 4\n",{"type":30,"tag":832,"props":13691,"children":13692},{"class":834,"line":1089},[13693,13697,13701,13705,13709,13713,13718,13722,13726,13730,13734,13739,13743,13747,13751,13755,13759,13763],{"type":30,"tag":832,"props":13694,"children":13695},{"style":839},[13696],{"type":35,"value":13647},{"type":30,"tag":832,"props":13698,"children":13699},{"style":845},[13700],{"type":35,"value":641},{"type":30,"tag":832,"props":13702,"children":13703},{"style":991},[13704],{"type":35,"value":3379},{"type":30,"tag":832,"props":13706,"children":13707},{"style":845},[13708],{"type":35,"value":1299},{"type":30,"tag":832,"props":13710,"children":13711},{"style":997},[13712],{"type":35,"value":2318},{"type":30,"tag":832,"props":13714,"children":13715},{"style":9651},[13716],{"type":35,"value":13717}," ...",{"type":30,"tag":832,"props":13719,"children":13720},{"style":839},[13721],{"type":35,"value":13647},{"type":30,"tag":832,"props":13723,"children":13724},{"style":845},[13725],{"type":35,"value":641},{"type":30,"tag":832,"props":13727,"children":13728},{"style":991},[13729],{"type":35,"value":3379},{"type":30,"tag":832,"props":13731,"children":13732},{"style":845},[13733],{"type":35,"value":1057},{"type":30,"tag":832,"props":13735,"children":13736},{"style":1311},[13737],{"type":35,"value":13738}," name",{"type":30,"tag":832,"props":13740,"children":13741},{"style":845},[13742],{"type":35,"value":1289},{"type":30,"tag":832,"props":13744,"children":13745},{"style":845},[13746],{"type":35,"value":1021},{"type":30,"tag":832,"props":13748,"children":13749},{"style":856},[13750],{"type":35,"value":13676},{"type":30,"tag":832,"props":13752,"children":13753},{"style":845},[13754],{"type":35,"value":853},{"type":30,"tag":832,"props":13756,"children":13757},{"style":997},[13758],{"type":35,"value":1011},{"type":30,"tag":832,"props":13760,"children":13761},{"style":845},[13762],{"type":35,"value":11854},{"type":30,"tag":832,"props":13764,"children":13765},{"style":982},[13766],{"type":35,"value":13767},"  // re-renders\n",{"type":30,"tag":31,"props":13769,"children":13770},{},[13771,13773,13779],{"type":35,"value":13772},"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":30,"tag":38,"props":13774,"children":13776},{"className":13775},[],[13777],{"type":35,"value":13778},"{ deep: true }",{"type":35,"value":13780}," 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":30,"tag":8272,"props":13782,"children":13784},{"id":13783},"calls-sharing-a-key-now-share-refs",[13785],{"type":35,"value":13786},"Calls Sharing a Key Now Share Refs",{"type":30,"tag":31,"props":13788,"children":13789},{},[13790,13792,13798,13800,13805,13806,13811,13812,13817,13819,13824,13825,13830,13831,13836,13837,13842,13844,13849],{"type":35,"value":13791},"Two ",{"type":30,"tag":38,"props":13793,"children":13795},{"className":13794},[],[13796],{"type":35,"value":13797},"useAsyncData(\"articles\", ...)",{"type":35,"value":13799}," calls in different components return the same ",{"type":30,"tag":38,"props":13801,"children":13803},{"className":13802},[],[13804],{"type":35,"value":10625},{"type":35,"value":4041},{"type":30,"tag":38,"props":13807,"children":13809},{"className":13808},[],[13810],{"type":35,"value":4047},{"type":35,"value":4049},{"type":30,"tag":38,"props":13813,"children":13815},{"className":13814},[],[13816],{"type":35,"value":8978},{"type":35,"value":13818},". If those calls pass conflicting ",{"type":30,"tag":38,"props":13820,"children":13822},{"className":13821},[],[13823],{"type":35,"value":10294},{"type":35,"value":4041},{"type":30,"tag":38,"props":13826,"children":13828},{"className":13827},[],[13829],{"type":35,"value":10302},{"type":35,"value":4041},{"type":30,"tag":38,"props":13832,"children":13834},{"className":13833},[],[13835],{"type":35,"value":10617},{"type":35,"value":4041},{"type":30,"tag":38,"props":13838,"children":13840},{"className":13839},[],[13841],{"type":35,"value":13552},{"type":35,"value":13843},", or ",{"type":30,"tag":38,"props":13845,"children":13847},{"className":13846},[],[13848],{"type":35,"value":13232},{"type":35,"value":13850}," 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":30,"tag":97,"props":13852,"children":13854},{"id":13853},"when-these-are-the-wrong-tool",[13855],{"type":35,"value":13856},"When These Are the Wrong Tool",{"type":30,"tag":31,"props":13858,"children":13859},{},[13860],{"type":35,"value":13861},"These composables cache per key, for one page load, in one browser. That is the boundary.",{"type":30,"tag":31,"props":13863,"children":13864},{},[13865,13867,13873],{"type":35,"value":13866},"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":30,"tag":38,"props":13868,"children":13870},{"className":13869},[],[13871],{"type":35,"value":13872},"refreshNuxtData",{"type":35,"value":13874}," call to keep two components in agreement is the point you should have switched.",{"type":30,"tag":31,"props":13876,"children":13877},{},[13878,13880,13886,13887,13893],{"type":35,"value":13879},"If the data changes while the user is looking at it, none of this applies at all. Polling with ",{"type":30,"tag":38,"props":13881,"children":13883},{"className":13882},[],[13884],{"type":35,"value":13885},"setInterval",{"type":35,"value":617},{"type":30,"tag":38,"props":13888,"children":13890},{"className":13889},[],[13891],{"type":35,"value":13892},"refresh()",{"type":35,"value":13894}," 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":30,"tag":31,"props":13896,"children":13897},{},[13898],{"type":35,"value":13899},"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":30,"tag":97,"props":13901,"children":13902},{"id":8267},[13903],{"type":35,"value":8270},{"type":30,"tag":31,"props":13905,"children":13906},{},[13907],{"type":30,"tag":159,"props":13908,"children":13909},{},[13910,13911,13916,13918,13923,13925,13930],{"type":35,"value":8368},{"type":30,"tag":38,"props":13912,"children":13914},{"className":13913},[],[13915],{"type":35,"value":8468},{"type":35,"value":13917}," just ",{"type":30,"tag":38,"props":13919,"children":13921},{"className":13920},[],[13922],{"type":35,"value":8510},{"type":35,"value":13924}," plus ",{"type":30,"tag":38,"props":13926,"children":13928},{"className":13927},[],[13929],{"type":35,"value":8484},{"type":35,"value":8285},{"type":30,"tag":31,"props":13932,"children":13933},{},[13934,13936,13941,13943,13949],{"type":35,"value":13935},"Close enough to reason with. ",{"type":30,"tag":38,"props":13937,"children":13939},{"className":13938},[],[13940],{"type":35,"value":8709},{"type":35,"value":13942}," behaves like ",{"type":30,"tag":38,"props":13944,"children":13946},{"className":13945},[],[13947],{"type":35,"value":13948},"useAsyncData(autoKey, () => $fetch(url, opts), opts)",{"type":35,"value":13950},". 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":30,"tag":31,"props":13952,"children":13953},{},[13954],{"type":30,"tag":159,"props":13955,"children":13956},{},[13957],{"type":35,"value":13958},"Why does my data fetch twice?",{"type":30,"tag":31,"props":13960,"children":13961},{},[13962,13964,13969,13971,13976],{"type":35,"value":13963},"Almost always a key mismatch between server and client. ",{"type":30,"tag":38,"props":13965,"children":13967},{"className":13966},[],[13968],{"type":35,"value":8468},{"type":35,"value":13970}," 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":30,"tag":38,"props":13972,"children":13974},{"className":13973},[],[13975],{"type":35,"value":9160},{"type":35,"value":13977}," to pin it.",{"type":30,"tag":31,"props":13979,"children":13980},{},[13981],{"type":30,"tag":159,"props":13982,"children":13983},{},[13984,13986,13991],{"type":35,"value":13985},"Should I ",{"type":30,"tag":38,"props":13987,"children":13989},{"className":13988},[],[13990],{"type":35,"value":4149},{"type":35,"value":13992}," these composables?",{"type":30,"tag":31,"props":13994,"children":13995},{},[13996],{"type":35,"value":13997},"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":30,"tag":31,"props":13999,"children":14000},{},[14001],{"type":30,"tag":159,"props":14002,"children":14003},{},[14004],{"type":35,"value":14005},"How do I pass cookies to an external API during SSR?",{"type":30,"tag":31,"props":14007,"children":14008},{},[14009],{"type":35,"value":14010},"The server render does not automatically forward the browser's headers. Read them explicitly:",{"type":30,"tag":822,"props":14012,"children":14014},{"code":14013,"language":9268,"meta":7,"className":9269,"style":7},"const headers = useRequestHeaders([\"cookie\"]);\nconst { data } = await useFetch(\"https://api.example.com/me\", { headers });\n",[14015],{"type":30,"tag":38,"props":14016,"children":14017},{"__ignoreMap":7},[14018,14065],{"type":30,"tag":832,"props":14019,"children":14020},{"class":834,"line":835},[14021,14025,14030,14034,14039,14044,14048,14053,14057,14061],{"type":30,"tag":832,"props":14022,"children":14023},{"style":1276},[14024],{"type":35,"value":1279},{"type":30,"tag":832,"props":14026,"children":14027},{"style":1097},[14028],{"type":35,"value":14029}," headers",{"type":30,"tag":832,"props":14031,"children":14032},{"style":845},[14033],{"type":35,"value":1299},{"type":30,"tag":832,"props":14035,"children":14036},{"style":1588},[14037],{"type":35,"value":14038}," useRequestHeaders",{"type":30,"tag":832,"props":14040,"children":14041},{"style":997},[14042],{"type":35,"value":14043},"([",{"type":30,"tag":832,"props":14045,"children":14046},{"style":845},[14047],{"type":35,"value":853},{"type":30,"tag":832,"props":14049,"children":14050},{"style":856},[14051],{"type":35,"value":14052},"cookie",{"type":30,"tag":832,"props":14054,"children":14055},{"style":845},[14056],{"type":35,"value":853},{"type":30,"tag":832,"props":14058,"children":14059},{"style":997},[14060],{"type":35,"value":1752},{"type":30,"tag":832,"props":14062,"children":14063},{"style":845},[14064],{"type":35,"value":1035},{"type":30,"tag":832,"props":14066,"children":14067},{"class":834,"line":473},[14068,14072,14076,14080,14084,14088,14092,14096,14100,14104,14109,14113,14117,14121,14125,14129],{"type":30,"tag":832,"props":14069,"children":14070},{"style":1276},[14071],{"type":35,"value":1279},{"type":30,"tag":832,"props":14073,"children":14074},{"style":845},[14075],{"type":35,"value":2318},{"type":30,"tag":832,"props":14077,"children":14078},{"style":1097},[14079],{"type":35,"value":8836},{"type":30,"tag":832,"props":14081,"children":14082},{"style":845},[14083],{"type":35,"value":1011},{"type":30,"tag":832,"props":14085,"children":14086},{"style":845},[14087],{"type":35,"value":1299},{"type":30,"tag":832,"props":14089,"children":14090},{"style":4146},[14091],{"type":35,"value":4752},{"type":30,"tag":832,"props":14093,"children":14094},{"style":1588},[14095],{"type":35,"value":8888},{"type":30,"tag":832,"props":14097,"children":14098},{"style":997},[14099],{"type":35,"value":1595},{"type":30,"tag":832,"props":14101,"children":14102},{"style":845},[14103],{"type":35,"value":853},{"type":30,"tag":832,"props":14105,"children":14106},{"style":856},[14107],{"type":35,"value":14108},"https://api.example.com/me",{"type":30,"tag":832,"props":14110,"children":14111},{"style":845},[14112],{"type":35,"value":853},{"type":30,"tag":832,"props":14114,"children":14115},{"style":845},[14116],{"type":35,"value":1057},{"type":30,"tag":832,"props":14118,"children":14119},{"style":997},[14120],{"type":35,"value":2318},{"type":30,"tag":832,"props":14122,"children":14123},{"style":839},[14124],{"type":35,"value":14029},{"type":30,"tag":832,"props":14126,"children":14127},{"style":997},[14128],{"type":35,"value":2789},{"type":30,"tag":832,"props":14130,"children":14131},{"style":845},[14132],{"type":35,"value":1035},{"type":30,"tag":31,"props":14134,"children":14135},{},[14136],{"type":30,"tag":159,"props":14137,"children":14138},{},[14139],{"type":35,"value":14140},"Can I call these outside a component?",{"type":30,"tag":31,"props":14142,"children":14143},{},[14144,14146,14152,14154,14159],{"type":35,"value":14145},"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":30,"tag":38,"props":14147,"children":14149},{"className":14148},[],[14150],{"type":35,"value":14151},"setTimeout",{"type":35,"value":14153}," throws a context error. Use ",{"type":30,"tag":38,"props":14155,"children":14157},{"className":14156},[],[14158],{"type":35,"value":8484},{"type":35,"value":14160}," there.",{"type":30,"tag":8411,"props":14162,"children":14163},{},[14164],{"type":35,"value":8415},{"title":7,"searchDepth":473,"depth":473,"links":14166},[14167,14168,14169,14170,14171,14172,14173,14174,14175,14176,14180,14181],{"id":8535,"depth":473,"text":8538},{"id":8736,"depth":473,"text":8739},{"id":8787,"depth":473,"text":8468},{"id":9869,"depth":473,"text":8510},{"id":10677,"depth":473,"text":10680},{"id":11185,"depth":473,"text":11188},{"id":11903,"depth":473,"text":11906},{"id":12322,"depth":473,"text":12325},{"id":13187,"depth":473,"text":13190},{"id":13532,"depth":473,"text":13535,"children":14177},[14178,14179],{"id":13538,"depth":1038,"text":13541},{"id":13783,"depth":1038,"text":13786},{"id":13853,"depth":473,"text":13856},{"id":8267,"depth":473,"text":8270},"content:blog:nuxt-3-data-fetching-composables.md","blog/nuxt-3-data-fetching-composables.md",1792976227003]