[{"data":1,"prerenderedAt":867},["ShallowReactive",2],{"navigation":3,"\u002Fguides\u002Fvue-lynx":455,"\u002Fguides\u002Fvue-lynx-surround":862},[4,34,51,301,327,332,337,406],{"title":5,"path":6,"stem":7,"children":8,"package":11,"icon":33},"Getting Started","\u002Fgetting-started","1.getting-started\u002F1.index",[9,13,18,23,28],{"title":10,"path":6,"stem":7,"package":11,"icon":12},"Introduction",null,"i-lucide-house",{"title":14,"path":15,"stem":16,"package":11,"icon":17},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation","i-lucide-download",{"title":19,"path":20,"stem":21,"package":11,"icon":22},"Icons","\u002Fgetting-started\u002Ficons","1.getting-started\u002F3.icons","i-lucide-sparkles",{"title":24,"path":25,"stem":26,"package":11,"icon":27},"CLI","\u002Fgetting-started\u002Fcli","1.getting-started\u002F4.cli","i-lucide-terminal",{"title":29,"path":30,"stem":31,"package":11,"icon":32},"Roadmap","\u002Fgetting-started\u002Froadmap","1.getting-started\u002F5.roadmap","i-lucide-map","i-lucide-rocket",{"title":35,"package":11,"icon":36,"path":37,"stem":38,"children":39,"page":50},"Packages","i-lucide-package","\u002Fpackages","2.packages",[40,45],{"title":41,"path":42,"stem":43,"package":11,"icon":44},"@vyui\u002Fcore","\u002Fpackages\u002Fcore","2.packages\u002F1.core","i-lucide-box",{"title":46,"path":47,"stem":48,"package":11,"icon":49},"@vyui\u002Fkit","\u002Fpackages\u002Fkit","2.packages\u002F2.kit","i-lucide-layers",false,{"title":52,"package":11,"icon":53,"path":54,"stem":55,"children":56},"Components","i-lucide-layout-grid","\u002Fcomponents","3.components",[57,59,65,70,75,80,85,90,95,100,105,110,115,120,125,130,135,140,144,149,153,158,163,168,173,178,183,188,193,198,203,208,213,218,223,228,233,238,242,246,251,256,261,266,271,276,280,284,288,292,296],{"title":52,"path":54,"stem":58,"package":11,"icon":53},"3.components\u002Findex",{"title":60,"path":61,"stem":62,"package":63,"icon":64},"Accordion","\u002Fcomponents\u002Faccordion","3.components\u002Faccordion","kit","i-lucide-list-collapse",{"title":66,"path":67,"stem":68,"package":63,"icon":69},"Action Sheet","\u002Fcomponents\u002Faction-sheet","3.components\u002Faction-sheet","i-lucide-panel-bottom",{"title":71,"path":72,"stem":73,"package":63,"icon":74},"Alert","\u002Fcomponents\u002Falert","3.components\u002Falert","i-lucide-triangle-alert",{"title":76,"path":77,"stem":78,"package":79,"icon":74},"Alert Dialog","\u002Fcomponents\u002Falert-dialog","3.components\u002Falert-dialog","core",{"title":81,"path":82,"stem":83,"package":63,"icon":84},"App","\u002Fcomponents\u002Fapp","3.components\u002Fapp","i-lucide-smartphone",{"title":86,"path":87,"stem":88,"package":63,"icon":89},"Aspect Ratio","\u002Fcomponents\u002Faspect-ratio","3.components\u002Faspect-ratio","i-lucide-ratio",{"title":91,"path":92,"stem":93,"package":63,"icon":94},"Avatar","\u002Fcomponents\u002Favatar","3.components\u002Favatar","i-lucide-circle-user-round",{"title":96,"path":97,"stem":98,"package":63,"icon":99},"Avatar Group","\u002Fcomponents\u002Favatar-group","3.components\u002Favatar-group","i-lucide-users-round",{"title":101,"path":102,"stem":103,"package":63,"icon":104},"Button","\u002Fcomponents\u002Fbutton","3.components\u002Fbutton","i-lucide-square-mouse-pointer",{"title":106,"path":107,"stem":108,"package":63,"icon":109},"Calendar","\u002Fcomponents\u002Fcalendar","3.components\u002Fcalendar","i-lucide-calendar-days",{"title":111,"path":112,"stem":113,"package":63,"icon":114},"Card","\u002Fcomponents\u002Fcard","3.components\u002Fcard","i-lucide-square",{"title":116,"path":117,"stem":118,"package":63,"icon":119},"Checkbox","\u002Fcomponents\u002Fcheckbox","3.components\u002Fcheckbox","i-lucide-square-check",{"title":121,"path":122,"stem":123,"package":79,"icon":124},"Collapsible","\u002Fcomponents\u002Fcollapsible","3.components\u002Fcollapsible","i-lucide-chevrons-down-up",{"title":126,"path":127,"stem":128,"package":79,"icon":129},"Dialog","\u002Fcomponents\u002Fdialog","3.components\u002Fdialog","i-lucide-app-window",{"title":131,"path":132,"stem":133,"package":79,"icon":134},"Draggable","\u002Fcomponents\u002Fdraggable","3.components\u002Fdraggable","i-lucide-move",{"title":136,"path":137,"stem":138,"package":63,"icon":139},"Form","\u002Fcomponents\u002Fform","3.components\u002Fform","i-lucide-clipboard-list",{"title":141,"path":142,"stem":143,"package":79,"icon":22},"Icon","\u002Fcomponents\u002Ficon","3.components\u002Ficon",{"title":145,"path":146,"stem":147,"package":63,"icon":148},"Input","\u002Fcomponents\u002Finput","3.components\u002Finput","i-lucide-text-cursor-input",{"title":150,"path":151,"stem":152,"package":63,"icon":69},"Island","\u002Fcomponents\u002Fisland","3.components\u002Fisland",{"title":154,"path":155,"stem":156,"package":63,"icon":157},"Island Button","\u002Fcomponents\u002Fisland-button","3.components\u002Fisland-button","i-lucide-circle-ellipsis",{"title":159,"path":160,"stem":161,"package":63,"icon":162},"Island Group","\u002Fcomponents\u002Fisland-group","3.components\u002Fisland-group","i-lucide-panels-top-left",{"title":164,"path":165,"stem":166,"package":63,"icon":167},"KeyboardAware","\u002Fcomponents\u002Fkeyboard-aware","3.components\u002Fkeyboard-aware","i-lucide-keyboard",{"title":169,"path":170,"stem":171,"package":63,"icon":172},"Label","\u002Fcomponents\u002Flabel","3.components\u002Flabel","i-lucide-tag",{"title":174,"path":175,"stem":176,"package":63,"icon":177},"Modal","\u002Fcomponents\u002Fmodal","3.components\u002Fmodal","i-lucide-gallery-vertical-end",{"title":179,"path":180,"stem":181,"package":79,"icon":182},"Navigation","\u002Fcomponents\u002Fnavigation","3.components\u002Fnavigation","i-lucide-route",{"title":184,"path":185,"stem":186,"package":63,"icon":187},"Number Field","\u002Fcomponents\u002Fnumber-field","3.components\u002Fnumber-field","i-lucide-list-plus",{"title":189,"path":190,"stem":191,"package":79,"icon":192},"Pagination","\u002Fcomponents\u002Fpagination","3.components\u002Fpagination","i-lucide-ellipsis",{"title":194,"path":195,"stem":196,"package":63,"icon":197},"Pin Input","\u002Fcomponents\u002Fpin-input","3.components\u002Fpin-input","i-lucide-key-round",{"title":199,"path":200,"stem":201,"package":63,"icon":202},"Placeholder","\u002Fcomponents\u002Fplaceholder","3.components\u002Fplaceholder","i-lucide-square-dashed",{"title":204,"path":205,"stem":206,"package":63,"icon":207},"Popover","\u002Fcomponents\u002Fpopover","3.components\u002Fpopover","i-lucide-message-square-more",{"title":209,"path":210,"stem":211,"package":63,"icon":212},"Progress","\u002Fcomponents\u002Fprogress","3.components\u002Fprogress","i-lucide-chart-no-axes-column-increasing",{"title":214,"path":215,"stem":216,"package":63,"icon":217},"Radio Group","\u002Fcomponents\u002Fradio-group","3.components\u002Fradio-group","i-lucide-circle-dot",{"title":219,"path":220,"stem":221,"package":63,"icon":222},"Rating","\u002Fcomponents\u002Frating","3.components\u002Frating","i-lucide-star",{"title":224,"path":225,"stem":226,"package":79,"icon":227},"Scroll View","\u002Fcomponents\u002Fscroll-view","3.components\u002Fscroll-view","i-lucide-scroll",{"title":229,"path":230,"stem":231,"package":63,"icon":232},"Select","\u002Fcomponents\u002Fselect","3.components\u002Fselect","i-lucide-list-check",{"title":234,"path":235,"stem":236,"package":63,"icon":237},"Separator","\u002Fcomponents\u002Fseparator","3.components\u002Fseparator","i-lucide-separator-horizontal",{"title":239,"path":240,"stem":241,"package":79,"icon":69},"Sheet","\u002Fcomponents\u002Fsheet","3.components\u002Fsheet",{"title":243,"path":244,"stem":245,"package":63,"icon":162},"Skeleton","\u002Fcomponents\u002Fskeleton","3.components\u002Fskeleton",{"title":247,"path":248,"stem":249,"package":63,"icon":250},"Slider","\u002Fcomponents\u002Fslider","3.components\u002Fslider","i-lucide-sliders-horizontal",{"title":252,"path":253,"stem":254,"package":63,"icon":255},"Sortable","\u002Fcomponents\u002Fsortable","3.components\u002Fsortable","i-lucide-list-restart",{"title":257,"path":258,"stem":259,"package":63,"icon":260},"Stepper","\u002Fcomponents\u002Fstepper","3.components\u002Fstepper","i-lucide-list-ordered",{"title":262,"path":263,"stem":264,"package":63,"icon":265},"Swipe Action","\u002Fcomponents\u002Fswipe-action","3.components\u002Fswipe-action","i-lucide-move-horizontal",{"title":267,"path":268,"stem":269,"package":63,"icon":270},"Swiper","\u002Fcomponents\u002Fswiper","3.components\u002Fswiper","i-lucide-gallery-horizontal-end",{"title":272,"path":273,"stem":274,"package":63,"icon":275},"Switch","\u002Fcomponents\u002Fswitch","3.components\u002Fswitch","i-lucide-toggle-right",{"title":277,"path":278,"stem":279,"package":63,"icon":162},"Tabs","\u002Fcomponents\u002Ftabs","3.components\u002Ftabs",{"title":281,"path":282,"stem":283,"package":63,"icon":148},"Textarea","\u002Fcomponents\u002Ftextarea","3.components\u002Ftextarea",{"title":285,"path":286,"stem":287,"package":63,"icon":207},"Toast","\u002Fcomponents\u002Ftoast","3.components\u002Ftoast",{"title":289,"path":290,"stem":291,"package":63,"icon":275},"Toggle","\u002Fcomponents\u002Ftoggle","3.components\u002Ftoggle",{"title":293,"path":294,"stem":295,"package":63,"icon":162},"Toggle Group","\u002Fcomponents\u002Ftoggle-group","3.components\u002Ftoggle-group",{"title":297,"path":298,"stem":299,"package":63,"icon":300},"Tray","\u002Fcomponents\u002Ftray","3.components\u002Ftray","i-lucide-square-dashed-bottom",{"title":302,"path":303,"stem":304,"children":305,"package":11,"icon":307},"Theming","\u002Ftheming","4.theming\u002F1.index",[306,308,312,317,322],{"title":302,"path":303,"stem":304,"package":11,"icon":307},"i-lucide-palette",{"title":309,"path":310,"stem":311,"package":11,"icon":250},"Overrides","\u002Ftheming\u002Foverrides","4.theming\u002F2.overrides",{"title":313,"path":314,"stem":315,"package":11,"icon":316},"Colors","\u002Ftheming\u002Fcolors","4.theming\u002F3.colors","i-lucide-swatch-book",{"title":318,"path":319,"stem":320,"package":11,"icon":321},"Dark Mode","\u002Ftheming\u002Fdark-mode","4.theming\u002F4.dark-mode","i-lucide-moon",{"title":323,"path":324,"stem":325,"package":11,"icon":326},"Fonts","\u002Ftheming\u002Ffonts","4.theming\u002F5.fonts","i-lucide-type",{"title":328,"path":329,"stem":330,"package":11,"icon":331},"Accessibility","\u002Faccessibility","5.accessibility","i-lucide-accessibility",{"title":333,"path":334,"stem":335,"package":11,"icon":336},"i18n","\u002Fi18n","6.i18n","i-lucide-languages",{"title":338,"path":339,"stem":340,"children":341,"package":11,"icon":343},"Composables","\u002Fcomposables","7.composables\u002F1.index",[342,344,349,354,359,364,369,374,378,383,387,391,396,401],{"title":338,"path":339,"stem":340,"package":11,"icon":343},"i-lucide-square-function",{"title":345,"path":346,"stem":347,"package":11,"icon":348},"useEmitAsProps","\u002Fcomposables\u002Fuse-emit-as-props","7.composables\u002F10.use-emit-as-props","i-lucide-zap",{"title":350,"path":351,"stem":352,"package":11,"icon":353},"useForwardPropsEmits","\u002Fcomposables\u002Fuse-forward-props-emits","7.composables\u002F11.use-forward-props-emits","i-lucide-merge",{"title":355,"path":356,"stem":357,"package":11,"icon":358},"useForwardExpose","\u002Fcomposables\u002Fuse-forward-expose","7.composables\u002F12.use-forward-expose","i-lucide-share-2",{"title":360,"path":361,"stem":362,"package":11,"icon":363},"useStateMachine","\u002Fcomposables\u002Fuse-state-machine","7.composables\u002F13.use-state-machine","i-lucide-workflow",{"title":365,"path":366,"stem":367,"package":11,"icon":368},"usePrimitiveElement","\u002Fcomposables\u002Fuse-primitive-element","7.composables\u002F14.use-primitive-element","i-lucide-crosshair",{"title":370,"path":371,"stem":372,"package":11,"icon":373},"useAppConfig","\u002Fcomposables\u002Fuse-app-config","7.composables\u002F2.use-app-config","i-lucide-settings",{"title":375,"path":376,"stem":377,"package":11,"icon":321},"useColorMode","\u002Fcomposables\u002Fuse-color-mode","7.composables\u002F3.use-color-mode",{"title":379,"path":380,"stem":381,"package":11,"icon":382},"useComponentIcons","\u002Fcomposables\u002Fuse-component-icons","7.composables\u002F4.use-component-icons","i-lucide-shapes",{"title":384,"path":385,"stem":386,"package":11,"icon":69},"useTray","\u002Fcomposables\u002Fuse-tray","7.composables\u002F5.use-tray",{"title":388,"path":389,"stem":390,"package":11,"icon":336},"i18n composables","\u002Fcomposables\u002Fi18n-composables","7.composables\u002F6.i18n-composables",{"title":392,"path":393,"stem":394,"package":11,"icon":395},"useId","\u002Fcomposables\u002Fuse-id","7.composables\u002F7.use-id","i-lucide-hash",{"title":397,"path":398,"stem":399,"package":11,"icon":400},"useFilter","\u002Fcomposables\u002Fuse-filter","7.composables\u002F8.use-filter","i-lucide-filter",{"title":402,"path":403,"stem":404,"package":11,"icon":405},"useForwardProps","\u002Fcomposables\u002Fuse-forward-props","7.composables\u002F9.use-forward-props","i-lucide-arrow-right-left",{"title":407,"path":408,"stem":409,"children":410,"package":11,"icon":412},"Guides","\u002Fguides","8.guides\u002F1.index",[411,413,417,422,427,432,436,441,445,450],{"title":407,"path":408,"stem":409,"package":11,"icon":412},"i-lucide-book-open",{"title":414,"path":415,"stem":416,"package":11,"icon":348},"Instant first-frame rendering","\u002Fguides\u002Finstant-first-frame-rendering","8.guides\u002F10.instant-first-frame-rendering",{"title":418,"path":419,"stem":420,"package":11,"icon":421},"Lynx UI frameworks","\u002Fguides\u002Flynx-ui-frameworks","8.guides\u002F2.lynx-ui-frameworks","i-lucide-library",{"title":423,"path":424,"stem":425,"package":11,"icon":426},"What is Vue Lynx","\u002Fguides\u002Fvue-lynx","8.guides\u002F3.vue-lynx","i-lucide-component",{"title":428,"path":429,"stem":430,"package":11,"icon":431},"Lynx vs React Native","\u002Fguides\u002Flynx-vs-react-native","8.guides\u002F4.lynx-vs-react-native","i-lucide-git-compare",{"title":433,"path":434,"stem":435,"package":11,"icon":84},"Testing on your phone","\u002Fguides\u002Ftesting-on-device","8.guides\u002F5.testing-on-device",{"title":437,"path":438,"stem":439,"package":11,"icon":440},"Testing with Xcode","\u002Fguides\u002Ftesting-with-xcode","8.guides\u002F6.testing-with-xcode","i-lucide-apple",{"title":442,"path":443,"stem":444,"package":11,"icon":27},"The rspeedy dev server","\u002Fguides\u002Frspeedy-dev-server","8.guides\u002F7.rspeedy-dev-server",{"title":446,"path":447,"stem":448,"package":11,"icon":449},"Tailwind on Lynx","\u002Fguides\u002Ftailwind-on-lynx","8.guides\u002F8.tailwind-on-lynx","i-lucide-wind",{"title":451,"path":452,"stem":453,"package":11,"icon":454},"Theming on Lynx","\u002Fguides\u002Ftheming-on-lynx","8.guides\u002F9.theming-on-lynx","i-lucide-paintbrush",{"id":456,"title":423,"body":457,"description":854,"extension":855,"links":11,"meta":856,"navigation":857,"package":11,"path":424,"seo":858,"stem":425,"__hash__":861},"docs\u002F8.guides\u002F3.vue-lynx.md",{"type":458,"value":459,"toc":846},"minimark",[460,477,492,497,500,535,541,553,563,567,578,581,589,593,596,612,619,623,626,654,657,787,797,801,804,815,818,822,842],[461,462,463,464,471,472,476],"p",{},"Vue Lynx is a Vue 3 custom renderer that targets ",[465,466,470],"a",{"href":467,"rel":468},"https:\u002F\u002Flynxjs.org\u002F",[469],"nofollow","Lynx",", the cross-platform framework ByteDance open-sourced in March 2025 and uses in parts of TikTok. Your components stay Vue with ",[473,474,475],"code",{},"\u003Cscript setup>",", the Composition API, and ordinary reactivity, and they render to native views on iOS and Android instead of to the DOM. The same source runs on the web through Lynx's browser runtime.",[461,478,479,480,483,484,487,488,491],{},"Vue Lynx reuses ",[473,481,482],{},"@vue\u002Fruntime-core"," rather than reimplementing Vue, so reactivity, lifecycle, ",[473,485,486],{},"provide","\u002F",[473,489,490],{},"inject",", slots, and the component model are the same code running under a different renderer.",[493,494,496],"h2",{"id":495},"what-changes","What changes",[461,498,499],{},"Four differences show up in the first hour, and none touch the component model.",[461,501,502,506,507,510,511,514,515,518,519,522,523,526,527,530,531,534],{},[503,504,505],"strong",{},"The elements are Lynx elements."," There is no ",[473,508,509],{},"\u003Cdiv>"," and no ",[473,512,513],{},"\u003Cspan>",". Layout goes in ",[473,516,517],{},"\u003Cview>",", text has to sit inside a ",[473,520,521],{},"\u003Ctext>"," element rather than loose in a container, images use ",[473,524,525],{},"\u003Cimage>",", scrolling uses ",[473,528,529],{},"\u003Cscroll-view>",", and long lists use ",[473,532,533],{},"\u003Clist>",", which is a native recycler rather than a rendered array.",[461,536,537,540],{},[503,538,539],{},"Your code runs on a background thread."," The main thread does nothing but render and handle high-priority input, and your JavaScript runs beside it. A Lynx app can paint its first frame before your component code finishes executing, and a gesture that tracks a finger at 60fps has to run in a main-thread worklet rather than a normal event handler. Most components never touch this, and drag-driven ones always do.",[461,542,543,506,546,510,549,552],{},[503,544,545],{},"Browser globals are gone.",[473,547,548],{},"window",[473,550,551],{},"document",", so any library reaching for them needs adapting or replacing. That rules out most of the existing Vue component ecosystem, which is why a Lynx-specific component library has to exist.",[461,554,555,558,559,562],{},[503,556,557],{},"Styling is real CSS, with limits."," Lynx parses actual stylesheets rather than style objects, so selectors, custom properties, media queries, and transitions all work. The native engine resolves only one level of ",[473,560,561],{},"var()"," indirection, and a few properties behave differently from the browser.",[493,564,566],{"id":565},"vue-lynx-and-reactlynx","Vue Lynx and ReactLynx",[461,568,569,570,577],{},"ReactLynx came first and remains the reference frontend, so the documentation, examples, and the official ",[465,571,574],{"href":572,"rel":573},"https:\u002F\u002Fgithub.com\u002Flynx-family\u002Flynx-ui",[469],[473,575,576],{},"@lynx-js\u002Flynx-ui"," library all assume React. Lynx itself is framework-agnostic by design, and the Lynx team has said non-React frameworks already account for roughly half of its usage internally.",[461,579,580],{},"What Vue Lynx fights is ecosystem age. Its API surface still moves, and ReactLynx libraries cannot be consumed from Vue because they are React components. I would take ReactLynx for the most-supported path today, and Vue Lynx when your team writes Vue and a rewrite is not on the table.",[582,583,586],"callout",{"color":584,"icon":585},"warning","i-lucide-flask-conical",[461,587,588],{},"Vue Lynx is pre-alpha and Vy UI is alpha, so both will introduce breaking changes and neither is ready for production.",[493,590,592],{"id":591},"where-components-come-from","Where components come from",[461,594,595],{},"Lynx gives you five elements, so dialogs, sheets, selects, toasts, sliders, and every gesture surface are application code unless a library provides them.",[461,597,598,601,602,606,607,611],{},[465,599,600],{"href":6},"Vy UI"," is that library, in two layers. ",[465,603,604],{"href":42},[473,605,41],{}," ships 47 headless primitives handling state, focus, keyboard, and gesture physics while leaving styling to you, and ",[465,608,609],{"href":47},[473,610,46],{}," ships 48 styled components on top of them, themed through Tailwind Variants. Drop from kit to core wherever the styled version stops fitting.",[461,613,614,615,618],{},"The ",[465,616,617],{"href":419},"Lynx UI frameworks comparison"," maps this against the ReactLynx options.",[493,620,622],{"id":621},"starting-a-project","Starting a project",[461,624,625],{},"Install the packages into an existing Vue Lynx application:",[627,628,633],"pre",{"className":629,"code":630,"language":631,"meta":632,"style":632},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npm i @vyui\u002Fcore @vyui\u002Fkit\n","bash","",[473,634,635],{"__ignoreMap":632},[636,637,640,644,648,651],"span",{"class":638,"line":639},"line",1,[636,641,643],{"class":642},"sBMFI","npm",[636,645,647],{"class":646},"sfazB"," i",[636,649,650],{"class":646}," @vyui\u002Fcore",[636,652,653],{"class":646}," @vyui\u002Fkit\n",[461,655,656],{},"A styled component then works like any other Vue component:",[627,658,662],{"className":659,"code":660,"language":661,"meta":632,"style":632},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup>\nimport { VyButton } from '@vyui\u002Fkit'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cview>\n    \u003CVyButton>Continue\u003C\u002FVyButton>\n  \u003C\u002Fview>\n\u003C\u002Ftemplate>\n","vue",[473,663,664,681,709,719,726,736,747,768,778],{"__ignoreMap":632},[636,665,666,670,674,678],{"class":638,"line":639},[636,667,669],{"class":668},"sMK4o","\u003C",[636,671,673],{"class":672},"swJcz","script",[636,675,677],{"class":676},"spNyl"," setup",[636,679,680],{"class":668},">\n",[636,682,684,688,691,695,698,701,704,706],{"class":638,"line":683},2,[636,685,687],{"class":686},"s7zQu","import",[636,689,690],{"class":668}," {",[636,692,694],{"class":693},"sTEyZ"," VyButton",[636,696,697],{"class":668}," }",[636,699,700],{"class":686}," from",[636,702,703],{"class":668}," '",[636,705,46],{"class":646},[636,707,708],{"class":668},"'\n",[636,710,712,715,717],{"class":638,"line":711},3,[636,713,714],{"class":668},"\u003C\u002F",[636,716,673],{"class":672},[636,718,680],{"class":668},[636,720,722],{"class":638,"line":721},4,[636,723,725],{"emptyLinePlaceholder":724},true,"\n",[636,727,729,731,734],{"class":638,"line":728},5,[636,730,669],{"class":668},[636,732,733],{"class":672},"template",[636,735,680],{"class":668},[636,737,739,742,745],{"class":638,"line":738},6,[636,740,741],{"class":668},"  \u003C",[636,743,744],{"class":672},"view",[636,746,680],{"class":668},[636,748,750,753,756,759,762,764,766],{"class":638,"line":749},7,[636,751,752],{"class":668},"    \u003C",[636,754,755],{"class":672},"VyButton",[636,757,758],{"class":668},">",[636,760,761],{"class":693},"Continue",[636,763,714],{"class":668},[636,765,755],{"class":672},[636,767,680],{"class":668},[636,769,771,774,776],{"class":638,"line":770},8,[636,772,773],{"class":668},"  \u003C\u002F",[636,775,744],{"class":672},[636,777,680],{"class":668},[636,779,781,783,785],{"class":638,"line":780},9,[636,782,714],{"class":668},[636,784,733],{"class":672},[636,786,680],{"class":668},[461,788,789,790,792,793,796],{},"Two pieces of setup are specific to Lynx, and ",[465,791,14],{"href":15}," covers both. The bundler needs ",[473,794,795],{},"includeWorkletPackages"," so main-thread gesture code is registered, and Tailwind needs the Vy UI preset for the semantic tokens behind theming and dark mode.",[493,798,800],{"id":799},"what-to-expect-on-each-target","What to expect on each target",[461,802,803],{},"Native iOS and Android are the targets Lynx was designed for, so accessibility works through the platform screen readers without extra wiring, gestures run on the main thread, and animations are native.",[461,805,806,807,810,811,814],{},"Web is a real target rather than a preview, and the component previews throughout these docs are the web runtime running real component code. It is not at parity. Lynx dispatches raw mouse events without synthesizing touch from them, so drag surfaces need explicit mouse handling, which Vy UI ",[465,808,809],{"href":30},"ships for every gesture component",". Keyboard navigation is not wired, and the ",[473,812,813],{},"accessibility-*"," properties that native screen readers consume are ignored by browsers.",[461,816,817],{},"Those gaps are specific rather than uniform, so check the components you depend on against your targets.",[493,819,821],{"id":820},"related","Related",[823,824,825,831,836],"card-group",{},[826,827,828],"card",{"icon":421,"title":418,"to":419},[461,829,830],{},"The component libraries available for Lynx, compared.",[826,832,833],{"icon":431,"title":428,"to":429},[461,834,835],{},"How the two architectures differ and when each one makes sense.",[826,837,839],{"icon":33,"title":838,"to":15},"Install Vy UI",[461,840,841],{},"Add the packages to a Vue Lynx project.",[843,844,845],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}",{"title":632,"searchDepth":639,"depth":683,"links":847},[848,849,850,851,852,853],{"id":495,"depth":683,"text":496},{"id":565,"depth":683,"text":566},{"id":591,"depth":683,"text":592},{"id":621,"depth":683,"text":622},{"id":799,"depth":683,"text":800},{"id":820,"depth":683,"text":821},"How Vue Lynx renders Vue components to native iOS, Android, and web through ByteDance's Lynx runtime, and what changes when you write Vue against it.","md",{},{"icon":426},{"title":859,"description":860},"Vue Lynx — native iOS, Android & web apps with Vue","Vue Lynx is a Vue 3 custom renderer for Lynx, ByteDance's cross-platform framework. What it is, how the dual-thread model changes your code, and where components come from.","lGYh_j0LVArx6ja8_BLAqRcrrV8L7VmWBirpXre4Asw",[863,865],{"title":418,"path":419,"stem":420,"description":864,"icon":-1,"children":-1,"navigation":-1},"A comparison of the UI component libraries available for Lynx today, covering what each one ships, which framework it targets, and how mature it is.",{"title":428,"path":429,"stem":430,"description":866,"icon":-1,"children":-1,"navigation":-1},"How Lynx and React Native differ in threading model, styling, framework support, and ecosystem maturity, and which one fits a given project.",1785008661700]