UNPKG

@nuxt/devtools

Version:

<a href="https://devtools.nuxt.com"><img width="1200" alt="Nuxt DevTools" src="https://github-production-user-asset-6210df.s3.amazonaws.com/904724/261577617-a10567bd-ad33-48cc-9bda-9e37dbe1929f.png"></a> <br>

2 lines (1 loc) 9.08 kB
import{d as L,r as E,a as k,as as W,f as t,o,m as s,k as e,t as w,h as y,j as x,bd as q,F as v,n as B,p as P,i as f,v as T,D as M,V as A,_ as H,aa as J,be as D,a$ as G,b0 as Q,a9 as X,ao as Y,b1 as Z,aq as ee,l as te,ac as ne,J as oe,K as ae}from"./Bysyzw-g.js";import{_ as j}from"./CpQX28Pm.js";import{_ as F}from"./CQTsRCSt.js";import{_ as se}from"./C6_B1_1h.js";import{_ as re}from"./COjmv9fs.js";import{_ as le}from"./WFxqX3Wd.js";import"./CXTghDHT.js";import"./goeoWIau.js";import"./DK4YETzW.js";const ue={block:"","cursor-pointer":""},ie={p2:""},de=["onSubmit"],pe={flex:"~","items-center":"",p2:"","text-sm":"","font-mono":""},ce={key:1},me=L({__name:"RoutePathItem",props:{route:{}},emits:["navigate"],setup(V,{emit:i}){const h=V,$=i,m=E([]),_=k(()=>{const d=N(h.route.path);return m.value=Array.from({length:d.length},()=>""),d});function N(d){return d.split(/(:\w+[?*]?(?:\(\))?)/).filter(Boolean).map(p=>p[0]===":"?p.replace(/\(\)$/,"?"):p)}const r=k(()=>_.value.map((d,p)=>d[0]===":"?m.value[p]:d).join("").replace(/\/+/g,"/")),n=k(()=>h.route.path.includes(":"));function g(){$("navigate",r.value)}return(d,p)=>{const a=A,u=H,c=W("VDropdown");return t(n)?(o(),y(c,{key:1},{popper:x(({hide:l})=>[e("div",ie,[e("form",{flex:"~ col",onSubmit:q(()=>{g(),l()},["prevent"])},[t(n)?(o(),s(v,{key:0},[p[0]||(p[0]=e("div",{px2:"","text-sm":"",op50:""}," Fill params and navigate: ",-1)),e("div",pe,[(o(!0),s(v,null,B(t(_),(b,R)=>(o(),s(v,{key:R},[b[0]===":"?(o(),y(a,{key:0,modelValue:t(m)[R],"onUpdate:modelValue":I=>t(m)[R]=I,"w-20":"","n-sm":"",placeholder:b.slice(1)},null,8,["modelValue","onUpdate:modelValue","placeholder"])):(o(),s("span",ce,w(b),1))],64))),128))])],64)):P("",!0),f(u,{type:"submit",block:"",n:"primary"},{default:x(()=>p[1]||(p[1]=[T(" Navigate ")])),_:1})],40,de)])]),default:x(()=>[e("code",ue,[(o(!0),s(v,null,B(t(_),(l,b)=>(o(),s("span",{key:b,class:M(l[0]===":"?"text-gray border border-dashed rounded border-gray:50 px1":"")},w(l[0]===":"?l.slice(1):l),3))),128))])]),_:1})):(o(),s("button",{key:0,onClick:g},[e("code",null,w(d.route.path),1)]))}}}),he={"w-full":""},_e={"w-20":"","pr-1":""},fe={flex:"","items-center":"","justify-end":""},ge={"text-sm":""},ve={flex:"inline gap3","items-center":""},ye={op0:"","group-hover:op100":"",flex:"~ gap1"},be=["onClick"],xe={"w-0":"","ws-nowrap":"","pr-1":"","text-left":"","text-sm":"","font-mono":"",op50:""},ke={"w-0":"","ws-nowrap":"","pr-1":"","text-center":"","text-sm":"","font-mono":"",op50:""},we={"w-0":"","ws-nowrap":"","text-center":"","text-sm":"","font-mono":""},$e={key:0},Ne=["onClick"],Re=L({__name:"RoutesTable",props:{pages:{},layouts:{},matched:{},matchedPending:{}},emits:["navigate"],setup(V){const i=V,h=J(),$=D(),m=k(()=>[...i.pages].sort((r,n)=>r.path.localeCompare(n.path)));function _(r){const n=i.layouts.find(g=>g.name===r);n&&h(n.file)}function N(r){if(typeof r=="string")return $.value?.middleware.find(n=>n.name===r)?.path}return(r,n)=>{const g=j,d=me,p=F;return o(),s("div",null,[e("table",he,[n[3]||(n[3]=e("thead",{border:"b base"},[e("tr",null,[e("th",{"text-left":""}),e("th",{"text-left":""}," Route Path "),e("th",{"text-left":""}," Name "),e("th",{"text-left":""}," Middleware "),e("th",null," Layout ")])],-1)),e("tbody",null,[(o(!0),s(v,null,B(t(m),a=>(o(),s("tr",{key:a.name,class:"group","h-7":"",border:"b dashed transparent hover:base"},[e("td",_e,[e("div",fe,[r.matched.find(u=>u.name===a.name)?(o(),y(g,{key:0,n:"green",title:"active",textContent:"active"})):r.matchedPending.find(u=>u.name===a.name)?(o(),y(g,{key:1,n:"teal",title:"next",textContent:"next"})):P("",!0)])]),e("td",ge,[e("div",ve,[f(d,{route:a,class:M(r.matched.find(u=>u.name===a.name)?"text-primary":r.matchedPending.find(u=>u.name===a.name)?"text-teal":""),onNavigate:n[0]||(n[0]=u=>r.$emit("navigate",u))},null,8,["route","class"]),e("div",ye,[a.file||a.meta?.file?(o(),s("button",{key:0,"text-sm":"",op40:"",hover:"op100 text-primary",title:"Open in editor",onClick:u=>t(h)(a.file||a.meta?.file)},n[2]||(n[2]=[e("div",{"i-carbon-script-reference":""},null,-1)]),8,be)):P("",!0)])])]),e("td",xe,w(a.name),1),e("td",ke,[f(p,{filepath:N(a.meta.middleware),override:`${a.meta.middleware||"-"}`},null,8,["filepath","override"])]),e("td",we,[a.meta.layout===!1?(o(),s("span",$e,"-")):a.meta.layout?(o(),s("button",{key:1,onClick:u=>_(a.meta.layout)},w(a.meta.layout),9,Ne)):(o(),s("button",{key:2,"text-sm":"",op15:"",onClick:n[1]||(n[1]=u=>_("default"))}," (default) "))])]))),128))])])])}}}),Ce={class:"markdown-body"},Pe={__name:"pages",setup(V,{expose:i}){return i({frontmatter:{}}),($,m)=>(o(),s("div",Ce,m[0]||(m[0]=[e("h1",null,"Pages",-1),e("p",null,[T("Nuxt provides a file-based routing to create routes within your web application using Vue Router under the hood. Pages are Vue components and can have any valid extension that Nuxt supports (by default .vue, .js, .jsx, .mjs, .ts or .tsx). Nuxt will automatically create a route for every page in your "),e("code",null,"~/pages/"),T(" directory.")],-1),e("p",null,[e("a",{href:"https://nuxt.com/docs/getting-started/routing",target:"_blank",rel:"noopener"},"Learn more in the documentation")],-1),e("hr",null,null,-1),e("h1",null,"Middlewares",-1),e("p",null,"Nuxt provides a customizable route middleware framework that can be used throughout the application. This is ideal for extracting code that needs to run before navigating to a particular route.",-1),e("p",null,[e("a",{href:"https://nuxt.com/docs/guide/directory-structure/middleware",target:"_blank",rel:"noopener"},"Learn more in the documentation")],-1)])))}},Ve=Pe,Ie={key:0,"h-full":"","of-auto":""},Te={border:"b base",flex:"~ col gap1",px4:"",py3:"","n-navbar-glass":""},Be={"font-mono":""},Ee={key:1,op50:""},Le={key:0,"text-orange":"",op75:""},Me={key:1,op50:""},Ae={"min-h-14":""},De={key:1,class:"py-4 text-center"},je={"w-full":""},Fe={mr1:""},Ge=L({__name:"pages",setup(V){const i=G(),h=Q(),$=X(),m=D(),_=Y(),N=Z(),r=k(()=>m.value?.middleware||[]),n=E(""),g=E(0),d=k(()=>(r.value,n.value,_.value,g.value,i.value?.currentRoute?.value?.path));ee(()=>{h.value&&(n.value=i.value?.currentRoute?.value?.path),i.value?.beforeEach(c=>{n.value=c.fullPath}),i.value?.afterEach(c=>{n.value=c.fullPath})});async function p(){n.value!==i.value?.currentRoute?.value?.path&&i.value.push(n.value||"/")}const a=k(()=>i.value.resolve(n.value||"/").matched);function u(c){i.value.push(c),n.value=c}return(c,l)=>{const b=A,R=Re,I=se,S=j,z=F,K=re,U=Ve,O=le;return o(),s(v,null,[t($)?.pages&&t(i)?(o(),s("div",Ie,[e("div",Te,[e("div",null,[t(d)!==t(n)?(o(),s(v,{key:0},[l[1]||(l[1]=e("span",{op50:""},"Navigate from ",-1)),e("span",Be,w(t(d)),1),l[2]||(l[2]=e("span",{op50:""}," to ",-1))],64)):(o(),s("span",Ee,"Current route"))]),f(b,{modelValue:t(n),"onUpdate:modelValue":l[0]||(l[0]=C=>te(n)?n.value=C:null),"font-mono":"",icon:"carbon-direction-right-01 scale-y--100",class:M(t(d)===t(n)?"":t(a).length?"text-green":"text-orange"),onKeydown:ne(p,["enter"])},null,8,["modelValue","class"]),e("div",null,[t(d)!==t(n)?(o(),s(v,{key:0},[l[3]||(l[3]=e("span",null,[T("Press "),e("b",{"font-bold":""},"Enter"),T(" to navigate")],-1)),t(a).length?P("",!0):(o(),s("span",Le," (no match)"))],64)):(o(),s("span",Me,"Edit path above to navigate"))])]),f(I,{icon:"carbon-tree-view",text:"Matched Routes",padding:!1},{default:x(()=>[e("div",Ae,[t(a).length?(o(),y(R,{key:0,pages:t(a),layouts:t(_)||[],matched:t(h).matched,"matched-pending":t(a),onNavigate:u},null,8,["pages","layouts","matched","matched-pending"])):(o(),s("div",De,l[4]||(l[4]=[e("span",{op50:""},"No routes matched",-1)])))])]),_:1}),f(I,{icon:"carbon-tree-view-alt",text:"All Routes",description:`${t(N).length} routes registered in your application`,padding:"pr5"},{default:x(()=>[f(R,{pages:t(N),layouts:t(_)||[],matched:t(h).matched,"matched-pending":t(a),onNavigate:u},null,8,["pages","layouts","matched","matched-pending"])]),_:1},8,["description"]),t(r).length?(o(),y(I,{key:0,icon:"carbon:ibm-watson-studio",text:"Middleware",description:`${t(r).length} middleware registered in your application`,padding:"px13"},{default:x(()=>[e("table",je,[l[5]||(l[5]=e("thead",{border:"b base","h-7":""},[e("tr",null,[e("th",{"text-left":""}," Name "),e("th",{"text-left":""}," Path ")])],-1)),(o(!0),s(v,null,B(t(r),C=>(o(),s("tr",{key:C.path,"h-7":""},[e("td",null,[e("span",Fe,w(C.name),1),C.global?(o(),y(S,{key:0,n:"green",title:"Registered at runtime as a global component",textContent:"global"})):P("",!0)]),e("td",null,[f(z,{filepath:C.path},null,8,["filepath"])])]))),128))])]),_:1},8,["description"])):P("",!0)])):(o(),y(K,{key:1,icon:"carbon-tree-view-alt",name:"wizard-pages",title:"Nuxt Routing",description:"Create `./pages/index.vue` to enable routing",actions:[{label:"Learn more",src:"https://nuxt.com/docs/getting-started/routing",attrs:{n:"primary"}},{label:"Enable Routing",async handle(){return("rpc"in c?c.rpc:t(oe)).runWizard(await("ensureDevAuthToken"in c?c.ensureDevAuthToken:t(ae))(),"enablePages")}}]},null,8,["actions"])),f(O,null,{default:x(()=>[f(U)]),_:1})],64)}}});export{Ge as default};