[{"data":1,"prerenderedAt":711},["Reactive",2],{"content-query-N01S5VeGUD":3},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"_empty":6,"title":8,"description":9,"layout":10,"body":11,"_type":706,"_id":707,"_source":708,"_file":709,"_extension":710},"/docs/add-ons/unocss/nuxt","unocss",false,"","UnoCSS Preset Installation - Nuxt - Inkline","Install the Inkline Preset for UnoCSS in any Nuxt application.","docs",{"type":12,"children":13,"toc":701},"root",[14,21,28,35,133,425,665,696],{"type":15,"tag":16,"props":17,"children":20},"element","content-heading",{"subtitle":18,"title":19},"UnoCSS Preset","Installation - Nuxt",[],{"type":15,"tag":22,"props":23,"children":25},"h2",{"id":24},"install-the-inkline-preset-for-unocss-in-any-nuxt-application",[26],{"type":27,"value":9},"text",{"type":15,"tag":29,"props":30,"children":32},"h3",{"id":31},"installation",[33],{"type":27,"value":34},"Installation",{"type":15,"tag":36,"props":37,"children":41},"div",{"className":38},[39,40],"install-step","_margin-top:2",[42,57,59],{"type":15,"tag":36,"props":43,"children":46},{"className":44},[45],"install-step-title",[47,55],{"type":15,"tag":48,"props":49,"children":52},"span",{"className":50},[51],"install-step-number",[53],{"type":27,"value":54},"1",{"type":27,"value":56}," Install dependencies",{"type":27,"value":58}," \n",{"type":15,"tag":60,"props":61,"children":66},"code",{"className":62,"code":64,"language":65,"meta":7},[63],"language-bash","npm install -D unocss @unocss/nuxt @inkline/unocss\n","bash",[67],{"type":15,"tag":68,"props":69,"children":70},"pre",{},[71],{"type":15,"tag":60,"props":72,"children":73},{"__ignoreMap":7},[74],{"type":15,"tag":48,"props":75,"children":78},{"class":76,"line":77},"line",1,[79,85,91,97,101,107,111,115,119,124,128],{"type":15,"tag":48,"props":80,"children":82},{"class":81},"ct-762058",[83],{"type":27,"value":84},"npm",{"type":15,"tag":48,"props":86,"children":88},{"class":87},"ct-553616",[89],{"type":27,"value":90}," ",{"type":15,"tag":48,"props":92,"children":94},{"class":93},"ct-952708",[95],{"type":27,"value":96},"install",{"type":15,"tag":48,"props":98,"children":99},{"class":87},[100],{"type":27,"value":90},{"type":15,"tag":48,"props":102,"children":104},{"class":103},"ct-617022",[105],{"type":27,"value":106},"-D",{"type":15,"tag":48,"props":108,"children":109},{"class":87},[110],{"type":27,"value":90},{"type":15,"tag":48,"props":112,"children":113},{"class":93},[114],{"type":27,"value":5},{"type":15,"tag":48,"props":116,"children":117},{"class":87},[118],{"type":27,"value":90},{"type":15,"tag":48,"props":120,"children":121},{"class":93},[122],{"type":27,"value":123},"@unocss/nuxt",{"type":15,"tag":48,"props":125,"children":126},{"class":87},[127],{"type":27,"value":90},{"type":15,"tag":48,"props":129,"children":130},{"class":93},[131],{"type":27,"value":132},"@inkline/unocss",{"type":15,"tag":36,"props":134,"children":136},{"className":135},[39],[137,149,163,409],{"type":15,"tag":36,"props":138,"children":140},{"className":139},[45],[141,147],{"type":15,"tag":48,"props":142,"children":144},{"className":143},[51],[145],{"type":27,"value":146},"2",{"type":27,"value":148}," Create Configuration File",{"type":15,"tag":150,"props":151,"children":152},"p",{},[153,155,161],{"type":27,"value":154},"Create a ",{"type":15,"tag":156,"props":157,"children":158},"code-inline",{},[159],{"type":27,"value":160},"uno.config.ts",{"type":27,"value":162}," file and add the Inkline preset to it.",{"type":15,"tag":60,"props":164,"children":169},{"className":165,"code":167,"language":168,"meta":7},[166],"language-ts","import { defineConfig } from 'unocss';\nimport { createPreset } from '@inkline/unocss';\n\nexport default (async () => {\n    const presetInkline = await createPreset();\n    \n    return defineConfig({\n        presets: [presetInkline]\n    });\n})();\n","ts",[170],{"type":15,"tag":68,"props":171,"children":172},{},[173],{"type":15,"tag":60,"props":174,"children":175},{"__ignoreMap":7},[176,209,239,248,291,346,355,382,391,400],{"type":15,"tag":48,"props":177,"children":178},{"class":76,"line":77},[179,185,190,195,199,204],{"type":15,"tag":48,"props":180,"children":182},{"class":181},"ct-149352",[183],{"type":27,"value":184},"import",{"type":15,"tag":48,"props":186,"children":187},{"class":87},[188],{"type":27,"value":189}," { defineConfig } ",{"type":15,"tag":48,"props":191,"children":192},{"class":181},[193],{"type":27,"value":194},"from",{"type":15,"tag":48,"props":196,"children":197},{"class":87},[198],{"type":27,"value":90},{"type":15,"tag":48,"props":200,"children":201},{"class":93},[202],{"type":27,"value":203},"'unocss'",{"type":15,"tag":48,"props":205,"children":206},{"class":87},[207],{"type":27,"value":208},";\n",{"type":15,"tag":48,"props":210,"children":212},{"class":76,"line":211},2,[213,217,222,226,230,235],{"type":15,"tag":48,"props":214,"children":215},{"class":181},[216],{"type":27,"value":184},{"type":15,"tag":48,"props":218,"children":219},{"class":87},[220],{"type":27,"value":221}," { createPreset } ",{"type":15,"tag":48,"props":223,"children":224},{"class":181},[225],{"type":27,"value":194},{"type":15,"tag":48,"props":227,"children":228},{"class":87},[229],{"type":27,"value":90},{"type":15,"tag":48,"props":231,"children":232},{"class":93},[233],{"type":27,"value":234},"'@inkline/unocss'",{"type":15,"tag":48,"props":236,"children":237},{"class":87},[238],{"type":27,"value":208},{"type":15,"tag":48,"props":240,"children":242},{"class":76,"line":241},3,[243],{"type":15,"tag":48,"props":244,"children":245},{},[246],{"type":27,"value":247},"\n",{"type":15,"tag":48,"props":249,"children":251},{"class":76,"line":250},4,[252,257,261,266,271,276,281,286],{"type":15,"tag":48,"props":253,"children":254},{"class":181},[255],{"type":27,"value":256},"export",{"type":15,"tag":48,"props":258,"children":259},{"class":87},[260],{"type":27,"value":90},{"type":15,"tag":48,"props":262,"children":263},{"class":181},[264],{"type":27,"value":265},"default",{"type":15,"tag":48,"props":267,"children":268},{"class":87},[269],{"type":27,"value":270}," (",{"type":15,"tag":48,"props":272,"children":273},{"class":181},[274],{"type":27,"value":275},"async",{"type":15,"tag":48,"props":277,"children":278},{"class":87},[279],{"type":27,"value":280}," () ",{"type":15,"tag":48,"props":282,"children":283},{"class":181},[284],{"type":27,"value":285},"=>",{"type":15,"tag":48,"props":287,"children":288},{"class":87},[289],{"type":27,"value":290}," {\n",{"type":15,"tag":48,"props":292,"children":294},{"class":76,"line":293},5,[295,300,305,309,314,318,323,327,332,336,341],{"type":15,"tag":48,"props":296,"children":297},{"class":87},[298],{"type":27,"value":299},"    ",{"type":15,"tag":48,"props":301,"children":302},{"class":181},[303],{"type":27,"value":304},"const",{"type":15,"tag":48,"props":306,"children":307},{"class":87},[308],{"type":27,"value":90},{"type":15,"tag":48,"props":310,"children":311},{"class":103},[312],{"type":27,"value":313},"presetInkline",{"type":15,"tag":48,"props":315,"children":316},{"class":87},[317],{"type":27,"value":90},{"type":15,"tag":48,"props":319,"children":320},{"class":181},[321],{"type":27,"value":322},"=",{"type":15,"tag":48,"props":324,"children":325},{"class":87},[326],{"type":27,"value":90},{"type":15,"tag":48,"props":328,"children":329},{"class":181},[330],{"type":27,"value":331},"await",{"type":15,"tag":48,"props":333,"children":334},{"class":87},[335],{"type":27,"value":90},{"type":15,"tag":48,"props":337,"children":338},{"class":81},[339],{"type":27,"value":340},"createPreset",{"type":15,"tag":48,"props":342,"children":343},{"class":87},[344],{"type":27,"value":345},"();\n",{"type":15,"tag":48,"props":347,"children":349},{"class":76,"line":348},6,[350],{"type":15,"tag":48,"props":351,"children":352},{"class":87},[353],{"type":27,"value":354},"    \n",{"type":15,"tag":48,"props":356,"children":358},{"class":76,"line":357},7,[359,363,368,372,377],{"type":15,"tag":48,"props":360,"children":361},{"class":87},[362],{"type":27,"value":299},{"type":15,"tag":48,"props":364,"children":365},{"class":181},[366],{"type":27,"value":367},"return",{"type":15,"tag":48,"props":369,"children":370},{"class":87},[371],{"type":27,"value":90},{"type":15,"tag":48,"props":373,"children":374},{"class":81},[375],{"type":27,"value":376},"defineConfig",{"type":15,"tag":48,"props":378,"children":379},{"class":87},[380],{"type":27,"value":381},"({\n",{"type":15,"tag":48,"props":383,"children":385},{"class":76,"line":384},8,[386],{"type":15,"tag":48,"props":387,"children":388},{"class":87},[389],{"type":27,"value":390},"        presets: [presetInkline]\n",{"type":15,"tag":48,"props":392,"children":394},{"class":76,"line":393},9,[395],{"type":15,"tag":48,"props":396,"children":397},{"class":87},[398],{"type":27,"value":399},"    });\n",{"type":15,"tag":48,"props":401,"children":403},{"class":76,"line":402},10,[404],{"type":15,"tag":48,"props":405,"children":406},{"class":87},[407],{"type":27,"value":408},"})();",{"type":15,"tag":410,"props":411,"children":412},"content-alert",{},[413],{"type":15,"tag":150,"props":414,"children":415},{},[416,418,423],{"type":27,"value":417},"If you're using a custom Inkline config file path, make sure to provide it as an options argument to the ",{"type":15,"tag":156,"props":419,"children":420},{},[421],{"type":27,"value":422},"createPreset()",{"type":27,"value":424}," function.",{"type":15,"tag":36,"props":426,"children":428},{"className":427},[39],[429,441,453,488],{"type":15,"tag":36,"props":430,"children":432},{"className":431},[45],[433,439],{"type":15,"tag":48,"props":434,"children":436},{"className":435},[51],[437],{"type":27,"value":438},"3",{"type":27,"value":440}," Add UnoCSS to your Nuxt Configuration",{"type":15,"tag":150,"props":442,"children":443},{},[444,446,451],{"type":27,"value":445},"Next, open your ",{"type":15,"tag":156,"props":447,"children":448},{},[449],{"type":27,"value":450},"nuxt.config.ts",{"type":27,"value":452}," file and make the following changes:",{"type":15,"tag":454,"props":455,"children":456},"ul",{},[457,470],{"type":15,"tag":458,"props":459,"children":460},"li",{},[461,463,468],{"type":27,"value":462},"set ",{"type":15,"tag":156,"props":464,"children":465},{},[466],{"type":27,"value":467},"utilities",{"type":27,"value":469}," to false in your Inkline module config",{"type":15,"tag":458,"props":471,"children":472},{},[473,475,479,481,486],{"type":27,"value":474},"add ",{"type":15,"tag":156,"props":476,"children":477},{},[478],{"type":27,"value":123},{"type":27,"value":480}," to the ",{"type":15,"tag":156,"props":482,"children":483},{},[484],{"type":27,"value":485},"modules",{"type":27,"value":487}," array",{"type":15,"tag":60,"props":489,"children":492},{"className":490,"code":491,"language":168,"meta":7},[166],"import { resolve } from 'path';\n\nexport default defineNuxtConfig({\n    modules: [\n        '@inkline/plugin/nuxt',\n        '@unocss/nuxt'\n    ],\n    inkline: {\n        import: {\n            utilities: false\n        }\n    }\n});\n",[493],{"type":15,"tag":68,"props":494,"children":495},{},[496],{"type":15,"tag":60,"props":497,"children":498},{"__ignoreMap":7},[499,528,535,563,571,589,601,609,617,625,638,647,656],{"type":15,"tag":48,"props":500,"children":501},{"class":76,"line":77},[502,506,511,515,519,524],{"type":15,"tag":48,"props":503,"children":504},{"class":181},[505],{"type":27,"value":184},{"type":15,"tag":48,"props":507,"children":508},{"class":87},[509],{"type":27,"value":510}," { resolve } ",{"type":15,"tag":48,"props":512,"children":513},{"class":181},[514],{"type":27,"value":194},{"type":15,"tag":48,"props":516,"children":517},{"class":87},[518],{"type":27,"value":90},{"type":15,"tag":48,"props":520,"children":521},{"class":93},[522],{"type":27,"value":523},"'path'",{"type":15,"tag":48,"props":525,"children":526},{"class":87},[527],{"type":27,"value":208},{"type":15,"tag":48,"props":529,"children":530},{"class":76,"line":211},[531],{"type":15,"tag":48,"props":532,"children":533},{},[534],{"type":27,"value":247},{"type":15,"tag":48,"props":536,"children":537},{"class":76,"line":241},[538,542,546,550,554,559],{"type":15,"tag":48,"props":539,"children":540},{"class":181},[541],{"type":27,"value":256},{"type":15,"tag":48,"props":543,"children":544},{"class":87},[545],{"type":27,"value":90},{"type":15,"tag":48,"props":547,"children":548},{"class":181},[549],{"type":27,"value":265},{"type":15,"tag":48,"props":551,"children":552},{"class":87},[553],{"type":27,"value":90},{"type":15,"tag":48,"props":555,"children":556},{"class":81},[557],{"type":27,"value":558},"defineNuxtConfig",{"type":15,"tag":48,"props":560,"children":561},{"class":87},[562],{"type":27,"value":381},{"type":15,"tag":48,"props":564,"children":565},{"class":76,"line":250},[566],{"type":15,"tag":48,"props":567,"children":568},{"class":87},[569],{"type":27,"value":570},"    modules: [\n",{"type":15,"tag":48,"props":572,"children":573},{"class":76,"line":293},[574,579,584],{"type":15,"tag":48,"props":575,"children":576},{"class":87},[577],{"type":27,"value":578},"        ",{"type":15,"tag":48,"props":580,"children":581},{"class":93},[582],{"type":27,"value":583},"'@inkline/plugin/nuxt'",{"type":15,"tag":48,"props":585,"children":586},{"class":87},[587],{"type":27,"value":588},",\n",{"type":15,"tag":48,"props":590,"children":591},{"class":76,"line":348},[592,596],{"type":15,"tag":48,"props":593,"children":594},{"class":87},[595],{"type":27,"value":578},{"type":15,"tag":48,"props":597,"children":598},{"class":93},[599],{"type":27,"value":600},"'@unocss/nuxt'\n",{"type":15,"tag":48,"props":602,"children":603},{"class":76,"line":357},[604],{"type":15,"tag":48,"props":605,"children":606},{"class":87},[607],{"type":27,"value":608},"    ],\n",{"type":15,"tag":48,"props":610,"children":611},{"class":76,"line":384},[612],{"type":15,"tag":48,"props":613,"children":614},{"class":87},[615],{"type":27,"value":616},"    inkline: {\n",{"type":15,"tag":48,"props":618,"children":619},{"class":76,"line":393},[620],{"type":15,"tag":48,"props":621,"children":622},{"class":87},[623],{"type":27,"value":624},"        import: {\n",{"type":15,"tag":48,"props":626,"children":627},{"class":76,"line":402},[628,633],{"type":15,"tag":48,"props":629,"children":630},{"class":87},[631],{"type":27,"value":632},"            utilities: ",{"type":15,"tag":48,"props":634,"children":635},{"class":103},[636],{"type":27,"value":637},"false\n",{"type":15,"tag":48,"props":639,"children":641},{"class":76,"line":640},11,[642],{"type":15,"tag":48,"props":643,"children":644},{"class":87},[645],{"type":27,"value":646},"        }\n",{"type":15,"tag":48,"props":648,"children":650},{"class":76,"line":649},12,[651],{"type":15,"tag":48,"props":652,"children":653},{"class":87},[654],{"type":27,"value":655},"    }\n",{"type":15,"tag":48,"props":657,"children":659},{"class":76,"line":658},13,[660],{"type":15,"tag":48,"props":661,"children":662},{"class":87},[663],{"type":27,"value":664},"});",{"type":15,"tag":36,"props":666,"children":668},{"className":667},[39],[669,681,686],{"type":15,"tag":36,"props":670,"children":672},{"className":671},[45],[673,679],{"type":15,"tag":48,"props":674,"children":676},{"className":675},[51],[677],{"type":27,"value":678},"4",{"type":27,"value":680}," Enjoy on-demand utility classes!",{"type":15,"tag":150,"props":682,"children":683},{},[684],{"type":27,"value":685},"That's it! You can now enjoy to ease and efficiency of on-demand utility classes in your Inkline project.",{"type":15,"tag":150,"props":687,"children":688},{},[689],{"type":15,"tag":690,"props":691,"children":693},"a",{"href":692},"/docs/add-ons/unocss",[694],{"type":27,"value":695},"Read more about the UnoCSS Preset",{"type":15,"tag":697,"children":698},"style",[699],{"type":27,"value":700},".ct-762058{color:#6F42C1;}\n.dark-theme .ct-762058{color:#B392F0;}\n.ct-553616{color:#24292E;}\n.dark-theme .ct-553616{color:#E1E4E8;}\n.ct-952708{color:#032F62;}\n.dark-theme .ct-952708{color:#9ECBFF;}\n.ct-617022{color:#005CC5;}\n.dark-theme .ct-617022{color:#79B8FF;}\n.ct-149352{color:#D73A49;}\n.dark-theme .ct-149352{color:#F97583;}",{"title":7,"searchDepth":211,"depth":211,"links":702},[703],{"id":24,"depth":211,"text":9,"children":704},[705],{"id":31,"depth":241,"text":34},"markdown","content:docs:add-ons:unocss:nuxt.md","content","docs/add-ons/unocss/nuxt.md","md",1794582262071]