https://bud.js.org/assets/js/5c219c89.6e559a6f.js

1"use strict";(self.webpackChunk_repo_docs=self.webpackChunk_repo_docs||[]).push([[190],{8193:(e,n,t)=>{t.d(n,{Z:()=>l});t(2735);var s=t(6568);const r={tabItem:"tabItem_Z3hq"};var a=t(4512);function l(e){let{children:n,hidden:t,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.Z)(r.tabItem,l),hidden:t,children:n})}},5274:(e,n,t)=>{t.d(n,{Z:()=>w});var s=t(2735),r=t(6568),a=t(2547),l=t(3038),o=t(98),i=t(3966),u=t(4902),c=t(2366);function d(e){var n,t;return null!=(n=null==(t=s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:n}=e;return!!n&&"object"==typeof n&&"value"in n}(e))return e;throw new Error("Docusaurus error: Bad <Tabs> child <"+("string"==typeof e.type?e.type:e.type.name)+'>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop.')})))?void 0:t.filter(Boolean))?n:[]}function p(e){const{values:n,children:t}=e;return(0,s.useMemo)((()=>{const e=null!=n?n:function(e){return d(e).map((e=>{let{props:{value:n,label:t,attributes:s,default:r}}=e;return{value:n,label:t,attributes:s,default:r}}))}(t);return function(e){const n=(0,u.lx)(e,((e,n)=>e.value===n.value));if(n.length>0)throw new Error('Docusaurus error: Duplicate values "'+n.map((e=>e.value)).join(", ")+'" found in <Tabs>. Every value needs to be unique.')}(e),e}),[n,t])}function h(e){let{value:n,tabValues:t}=e;return t.some((e=>e.value===n))}function b(e){let{queryString:n=!1,groupId:t}=e;const r=(0,l.k6)(),a=function(e){let{queryString:n=!1,groupId:t}=e;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!t)throw new Error('Docusaurus error: The <Tabs> component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return null!=t?t:null}({queryString:n,groupId:t});return[(0,i._X)(a),(0,s.useCallback)((e=>{if(!a)return;const n=new URLSearchParams(r.location.search);n.set(a,e),r.replace(Object.assign({},r.location,{search:n.toString()}))}),[a,r])]}function m(e){const{defaultValue:n,queryString:t=!1,groupId:r}=e,a=p(e),[l,i]=(0,s.useState)((()=>function(e){var n;let{defaultValue:t,tabValues:s}=e;if(0===s.length)throw new Error("Docusaurus error: the <Tabs> component requires at least one <TabItem> children component");if(t){if(!h({value:t,tabValues:s}))throw new Error('Docusaurus error: The <Tabs> has a defaultValue "'+t+'" but none of its children has the corresponding value. Available values are: '+s.map((e=>e.value)).join(", ")+". If you intend to show no default tab, use defaultValue={null} instead.");return t}const r=null!=(n=s.find((e=>e.default)))?n:s[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:n,tabValues:a}))),[u,d]=b({queryString:t,groupId:r}),[m,g]=function(e){let{groupId:n}=e;const t=function(e){return e?"docusaurus.tab."+e:null}(n),[r,a]=(0,c.Nk)(t);return[r,(0,s.useCallback)((e=>{t&&a.set(e)}),[t,a])]}({groupId:r}),v=(()=>{const e=null!=u?u:m;return h({value:e,tabValues:a})?e:null})();(0,o.Z)((()=>{v&&i(v)}),[v]);return{selectedValue:l,selectValue:(0,s.useCallback)((e=>{if(!h({value:e,tabValues:a}))throw new Error("Can't select invalid tab value="+e);i(e),d(e),g(e)}),[d,g,a]),tabValues:a}}var g=t(5167);const v={tabList:"tabList_FpWg",tabItem:"tabItem_lqZC"};var f=t(4512);function x(e){let{className:n,block:t,selectedValue:s,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.o5)(),c=e=>{const n=e.currentTarget,t=i.indexOf(n),r=o[t].value;r!==s&&(u(n),l(r))},d=e=>{var n;let t=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{var s;const n=i.indexOf(e.currentTarget)+1;t=null!=(s=i[n])?s:i[0];break}case"ArrowLeft":{var r;const n=i.indexOf(e.currentTarget)-1;t=null!=(r=i[n])?r:i[i.length-1];break}}null==(n=t)||n.focus()};return(0,f.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.Z)("tabs",{"tabs--block":t},n),children:o.map((e=>{let{value:n,label:t,attributes:a}=e;return(0,f.jsx)("li",Object.assign({role:"tab",tabIndex:s===n?0:-1,"aria-selected":s===n,ref:e=>i.push(e),onKeyDown:d,onClick:c},a,{className:(0,r.Z)("tabs__item",v.tabItem,null==a?void 0:a.className,{"tabs__item--active":s===n}),children:null!=t?t:n}),n)}))})}function j(e){let{lazy:n,children:t,selectedValue:a}=e;

1const l=(Array.isArray(t)?t:[t]).filter(Boolean);if(n){const e=l.find((e=>e.props.value===a));return e?(0,s.cloneElement)(e,{className:(0,r.Z)("margin-top--md",e.props.className)}):null}return(0,f.jsx)("div",{className:"margin-top--md",children:l.map(((e,n)=>(0,s.cloneElement)(e,{key:n,hidden:e.props.value!==a})))})}function y(e){const n=m(e);return(0,f.jsxs)("div",{className:(0,r.Z)("tabs-container",v.tabList),children:[(0,f.jsx)(x,Object.assign({},n,e)),(0,f.jsx)(j,Object.assign({},n,e))]})}function w(e){const n=(0,g.Z)();return(0,f.jsx)(y,Object.assign({},e,{children:d(e.children)}),String(n))}},9805:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>x,contentTitle:()=>v,default:()=>w,frontMatter:()=>g,metadata:()=>f,toc:()=>j});var s=t(4512),r=t(3250),a=t(5274),l=t(8193),o=t(3889);t(2735);const i=e=>{let{allow:n,id:t,sandbox:r,style:a={},title:l}=e;return(0,s.jsx)("iframe",{allow:null!=n?n:"accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking",sandbox:null!=r?r:"allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts",src:"https://codesandbox.io/embed/"+t+"?expanddevtools=1&fontsize=12&hidenavigation=1&theme=dark",style:Object.assign({border:"0",borderRadius:"4px",height:"80vh",overflow:"hidden",width:"100%"},a),title:null!=l?l:t})};function u(e){const n={code:"code",h2:"h2",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.p,{children:"Once installed, vue should be ready to use in your project. The extension is pre-configured to support Vue 3 single file components (runtime only)."}),"\n",(0,s.jsx)(n.h2,{id:"disabling-runtime-only",children:"Disabling runtime only"}),"\n",(0,s.jsxs)(n.p,{children:["You can disable the ",(0,s.jsx)(n.code,{children:"runtimeOnly"})," default by adding the following to your config:"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:"export default async bud => {\n  bud.vue.setRuntimeOnly(false)\n}\n"})})]})}function c(e={}){const{wrapper:n}={...(0,r.a)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(u,{...e})}):u(e)}function d(e){const n={a:"a",p:"p",...(0,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(n.p,{children:["Developers using JS may wish to consider installing ",(0,s.jsx)(n.a,{href:"https://bud.js.org/extensions/bud-babel",children:"@roots/bud-babel"})," to handle code transforms that are not specific to vue."]}),"\n",(0,s.jsxs)(n.p,{children:["For typescript language support, install ",(0,s.jsx)(n.a,{href:"https://bud.js.org/extensions/bud-typescript",children:"@roots/bud-typescript"})," as a peer dependency."]}),"\n",(0,s.jsxs)(n.p,{children:["For scss support, install ",(0,s.jsx)(n.a,{href:"https://bud.js.org/extensions/bud-sass",children:"@roots/bud-sass"})," as a peer dependency."]})]})}function p(e={}){const{wrapper:n}={...(0,r.a)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(d,{...e})}):d(e)}function h(e){const n={a:"a",code:"code",p:"p",strong:"strong",...(0,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(n.p,{children:["If you are trying to configure ",(0,s.jsx)(n.strong,{children:"@roots/bud-vue"})," for use with Vue 2 you will need to install a version of ",(0,s.jsx)(n.a,{href:"https://www.npmjs.com/package/vue/v/2.6.14",children:"vue"})," tagged ",(0,s.jsx)(n.code,{children:"legacy"})," and a compatible version of the ",(0,s.jsx)(n.a,{href:"https://www.npmjs.com/package/vue-loader",children:"vue-loader"})," and ",(0,s.jsx)(n.a,{href:"https://www.npmjs.com/package/vue-template-compiler",children:"vue-template-compiler"})," packages."]}),"\n",(0,s.jsx)(n.p,{children:"If a custom version of vue is included in the project package.json the extension will automatically detect it and configure itself accordingly."})]})}function b(e={}){const{wrapper:n}={...(0,r.a)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(h,{...e})}):h(e)}const m=JSON.parse('{"name":"@examples/vue-legacy","$schema":"https://bud.js.org/bud.package.json","private":true,"type":"module","browserslist":["extends @roots/browserslist-config"],"devDependencies":{"@roots/bud":"workspace:*","@roots/bud-vue":"workspace:*"}

1,"dependencies":{"vue":"2.7.16","vue-loader":"15.11.1","vue-template-compiler":"2.7.16"}}'),g={title:"@roots/bud-vue",description:"Use Vue in your bud.js application",sidebar_label:"@roots/bud-vue",hide_table_of_contents:!1},v=void 0,f={id:"bud-vue/index",title:"@roots/bud-vue",description:"Use Vue in your bud.js application",source:"@site/content/extensions/bud-vue/index.mdx",sourceDirName:"bud-vue",slug:"/bud-vue/",permalink:"/extensions/bud-vue/",draft:!1,unlisted:!1,editUrl:"https://github.com/roots/bud/edit/main/sources/@repo/docs/content/extensions/bud-vue/index.mdx",tags:[],version:"current",frontMatter:{title:"@roots/bud-vue",description:"Use Vue in your bud.js application",sidebar_label:"@roots/bud-vue",hide_table_of_contents:!1},sidebar:"sidebar",previous:{title:"@roots/bud-typescript",permalink:"/extensions/bud-typescript"},next:{title:"@roots/sage",permalink:"/extensions/sage/"}},x={},j=[{value:"Installation",id:"installation",level:2},{value:"Usage",id:"usage",level:2},{value:"Disabling runtime only",id:"disabling-runtime-only",level:2},{value:"Language support",id:"language-support",level:2},{value:"Legacy support",id:"legacy-support",level:3},{value:"Example",id:"example",level:2}];function y(e){const n={a:"a",code:"code",h2:"h2",h3:"h3",p:"p",pre:"pre",strong:"strong",...(0,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.a,{href:"https://vuejs.org",children:"Vue"})," support can be added by installing the ",(0,s.jsx)(n.strong,{children:"@roots/bud-vue"})," package."]}),"\n",(0,s.jsx)(n.h2,{id:"installation",children:"Installation"}),"\n",(0,s.jsxs)(a.Z,{groupId:"npm2yarn",children:[(0,s.jsx)(l.Z,{value:"npm",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-sh",children:"npm install @roots/bud-vue --save-dev\n"})})}),(0,s.jsx)(l.Z,{value:"yarn",label:"Yarn",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-sh",children:"yarn add @roots/bud-vue --dev\n"})})}),(0,s.jsx)(l.Z,{value:"pnpm",label:"pnpm",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-sh",children:"pnpm add @roots/bud-vue --save-dev\n"})})})]}),"\n",(0,s.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,s.jsx)(c,{}),"\n",(0,s.jsx)(n.h2,{id:"language-support",children:"Language support"}),"\n",(0,s.jsx)(p,{}),"\n",(0,s.jsx)(n.h3,{id:"legacy-support",children:"Legacy support"}),"\n",(0,s.jsx)(b,{}),"\n",(0,s.jsxs)(n.p,{children:["This is the ",(0,s.jsx)(n.strong,{children:"package.json"})," we use to test releases for vue 2 compatibility:"]}),"\n",(0,s.jsx)(o.Z,{title:"package.json",langage:"json",children:JSON.stringify(m,null,2)}),"\n",(0,s.jsx)(n.h2,{id:"example",children:"Example"}),"\n",(0,s.jsx)(i,{id:"bud-example-vue-3-gf1lkk",title:"bud-example-vue-3"})]})}function w(e={}){const{wrapper:n}={...(0,r.a)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(y,{...e})}):y(e)}}}]);