[{"data":1,"prerenderedAt":443},["Reactive",2],{"content-query-qaCbhNMEr2":3},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"_empty":6,"title":8,"description":9,"layout":10,"body":11,"_type":438,"_id":439,"_source":440,"_file":441,"_extension":442},"/docs/installation/webpack","installation",false,"","Installation - Webpack - Inkline","Install Inkline for any application created using Webpack.","docs",{"type":12,"children":13,"toc":433},"root",[14,23,29,64,70,259,406,428],{"type":15,"tag":16,"props":17,"children":19},"element","h1",{"id":18},"installation-webpack",[20],{"type":21,"value":22},"text","Installation - Webpack",{"type":15,"tag":24,"props":25,"children":27},"h2",{"id":26},"install-inkline-for-any-application-created-using-webpack",[28],{"type":21,"value":9},{"type":15,"tag":30,"props":31,"children":33},"content-alert",{"color":32},"warning",[34],{"type":15,"tag":35,"props":36,"children":37},"p",{},[38,40,51,53,62],{"type":21,"value":39},"For new applications, please use ",{"type":15,"tag":41,"props":42,"children":43},"strong",{},[44],{"type":15,"tag":45,"props":46,"children":48},"a",{"href":47},"/docs/installation/vite",[49],{"type":21,"value":50},"Vite.js",{"type":21,"value":52}," or ",{"type":15,"tag":41,"props":54,"children":55},{},[56],{"type":15,"tag":45,"props":57,"children":59},{"href":58},"/docs/installation/nuxt",[60],{"type":21,"value":61},"Nuxt",{"type":21,"value":63},".\nThe Vue.js CLI and Webpack.js are no longer recommended by the Vue.js community.",{"type":15,"tag":65,"props":66,"children":67},"h3",{"id":5},[68],{"type":21,"value":69},"Installation",{"type":15,"tag":71,"props":72,"children":76},"div",{"className":73},[74,75],"install-step","_margin-top:2",[77,92,94,109,166],{"type":15,"tag":71,"props":78,"children":81},{"className":79},[80],"install-step-title",[82,90],{"type":15,"tag":83,"props":84,"children":87},"span",{"className":85},[86],"install-step-number",[88],{"type":21,"value":89},"1",{"type":21,"value":91}," Create a project",{"type":21,"value":93}," \n",{"type":15,"tag":35,"props":95,"children":96},{},[97,99,107],{"type":21,"value":98},"First, create a new Vue.js application that uses Webpack. For this example, we'll use the ",{"type":15,"tag":45,"props":100,"children":104},{"href":101,"rel":102},"https://cli.vuejs.org/guide/creating-a-project.html",[103],"nofollow",[105],{"type":21,"value":106},"Vue.js CLI",{"type":21,"value":108},".",{"type":15,"tag":110,"props":111,"children":116},"code",{"className":112,"code":114,"language":115,"meta":7},[113],"language-bash","npm i -g @vue/cli\n","bash",[117],{"type":15,"tag":118,"props":119,"children":120},"pre",{},[121],{"type":15,"tag":110,"props":122,"children":123},{"__ignoreMap":7},[124],{"type":15,"tag":83,"props":125,"children":128},{"class":126,"line":127},"line",1,[129,135,141,147,151,157,161],{"type":15,"tag":83,"props":130,"children":132},{"class":131},"ct-762058",[133],{"type":21,"value":134},"npm",{"type":15,"tag":83,"props":136,"children":138},{"class":137},"ct-553616",[139],{"type":21,"value":140}," ",{"type":15,"tag":83,"props":142,"children":144},{"class":143},"ct-952708",[145],{"type":21,"value":146},"i",{"type":15,"tag":83,"props":148,"children":149},{"class":137},[150],{"type":21,"value":140},{"type":15,"tag":83,"props":152,"children":154},{"class":153},"ct-617022",[155],{"type":21,"value":156},"-g",{"type":15,"tag":83,"props":158,"children":159},{"class":137},[160],{"type":21,"value":140},{"type":15,"tag":83,"props":162,"children":163},{"class":143},[164],{"type":21,"value":165},"@vue/cli",{"type":15,"tag":110,"props":167,"children":170},{"className":168,"code":169,"language":115,"meta":7},[113],"vue create my-vue-app\n\ncd my-vue-app \n\nnpm install\n",[171],{"type":15,"tag":118,"props":172,"children":173},{},[174],{"type":15,"tag":110,"props":175,"children":176},{"__ignoreMap":7},[177,203,212,234,242],{"type":15,"tag":83,"props":178,"children":179},{"class":126,"line":127},[180,185,189,194,198],{"type":15,"tag":83,"props":181,"children":182},{"class":131},[183],{"type":21,"value":184},"vue",{"type":15,"tag":83,"props":186,"children":187},{"class":137},[188],{"type":21,"value":140},{"type":15,"tag":83,"props":190,"children":191},{"class":143},[192],{"type":21,"value":193},"create",{"type":15,"tag":83,"props":195,"children":196},{"class":137},[197],{"type":21,"value":140},{"type":15,"tag":83,"props":199,"children":200},{"class":143},[201],{"type":21,"value":202},"my-vue-app\n",{"type":15,"tag":83,"props":204,"children":206},{"class":126,"line":205},2,[207],{"type":15,"tag":83,"props":208,"children":209},{},[210],{"type":21,"value":211},"\n",{"type":15,"tag":83,"props":213,"children":215},{"class":126,"line":214},3,[216,221,225,230],{"type":15,"tag":83,"props":217,"children":218},{"class":153},[219],{"type":21,"value":220},"cd",{"type":15,"tag":83,"props":222,"children":223},{"class":137},[224],{"type":21,"value":140},{"type":15,"tag":83,"props":226,"children":227},{"class":143},[228],{"type":21,"value":229},"my-vue-app",{"type":15,"tag":83,"props":231,"children":232},{"class":137},[233],{"type":21,"value":93},{"type":15,"tag":83,"props":235,"children":237},{"class":126,"line":236},4,[238],{"type":15,"tag":83,"props":239,"children":240},{},[241],{"type":21,"value":211},{"type":15,"tag":83,"props":243,"children":245},{"class":126,"line":244},5,[246,250,254],{"type":15,"tag":83,"props":247,"children":248},{"class":131},[249],{"type":21,"value":134},{"type":15,"tag":83,"props":251,"children":252},{"class":137},[253],{"type":21,"value":140},{"type":15,"tag":83,"props":255,"children":256},{"class":143},[257],{"type":21,"value":258},"install",{"type":15,"tag":71,"props":260,"children":262},{"className":261},[74],[263,275,276,281,318,332,394],{"type":15,"tag":71,"props":264,"children":266},{"className":265},[80],[267,273],{"type":15,"tag":83,"props":268,"children":270},{"className":269},[86],[271],{"type":21,"value":272},"2",{"type":21,"value":274}," Install Inkline",{"type":21,"value":93},{"type":15,"tag":35,"props":277,"children":278},{},[279],{"type":21,"value":280},"Inkline will automatically detect your Webpack.js development environment and generate a basic configuration for your application.",{"type":15,"tag":110,"props":282,"children":285},{"className":283,"code":284,"language":115,"meta":7},[113],"npx inkline init\n",[286],{"type":15,"tag":118,"props":287,"children":288},{},[289],{"type":15,"tag":110,"props":290,"children":291},{"__ignoreMap":7},[292],{"type":15,"tag":83,"props":293,"children":294},{"class":126,"line":127},[295,300,304,309,313],{"type":15,"tag":83,"props":296,"children":297},{"class":131},[298],{"type":21,"value":299},"npx",{"type":15,"tag":83,"props":301,"children":302},{"class":137},[303],{"type":21,"value":140},{"type":15,"tag":83,"props":305,"children":306},{"class":143},[307],{"type":21,"value":308},"inkline",{"type":15,"tag":83,"props":310,"children":311},{"class":137},[312],{"type":21,"value":140},{"type":15,"tag":83,"props":314,"children":315},{"class":143},[316],{"type":21,"value":317},"init",{"type":15,"tag":35,"props":319,"children":320},{},[321,323,330],{"type":21,"value":322},"Using the ",{"type":15,"tag":45,"props":324,"children":327},{"href":325,"rel":326},"https://github.com/inkline/cli",[103],[328],{"type":21,"value":329},"Inkline CLI",{"type":21,"value":331}," command above, Inkline has:",{"type":15,"tag":333,"props":334,"children":335},"ul",{},[336,353,367,381],{"type":15,"tag":337,"props":338,"children":339},"li",{},[340,342,351],{"type":21,"value":341},"Created or updated your ",{"type":15,"tag":41,"props":343,"children":344},{},[345],{"type":15,"tag":346,"props":347,"children":348},"code-inline",{},[349],{"type":21,"value":350},"webpack.config.ts",{"type":21,"value":352}," file",{"type":15,"tag":337,"props":354,"children":355},{},[356,358,366],{"type":21,"value":357},"Created your ",{"type":15,"tag":41,"props":359,"children":360},{},[361],{"type":15,"tag":346,"props":362,"children":363},{},[364],{"type":21,"value":365},"inkline.config.ts",{"type":21,"value":352},{"type":15,"tag":337,"props":368,"children":369},{},[370,372,380],{"type":21,"value":371},"Updated your ",{"type":15,"tag":41,"props":373,"children":374},{},[375],{"type":15,"tag":346,"props":376,"children":377},{},[378],{"type":21,"value":379},"src/main.ts",{"type":21,"value":352},{"type":15,"tag":337,"props":382,"children":383},{},[384,385,393],{"type":21,"value":371},{"type":15,"tag":41,"props":386,"children":387},{},[388],{"type":15,"tag":346,"props":389,"children":390},{},[391],{"type":21,"value":392},"package.json",{"type":21,"value":352},{"type":15,"tag":35,"props":395,"children":396},{},[397,399,405],{"type":21,"value":398},"If you want to set up Inkline manually, read the ",{"type":15,"tag":45,"props":400,"children":402},{"href":401},"/docs/installation/manual",[403],{"type":21,"value":404},"Manual Installation guide",{"type":21,"value":108},{"type":15,"tag":71,"props":407,"children":409},{"className":408},[74],[410,422,423],{"type":15,"tag":71,"props":411,"children":413},{"className":412},[80],[414,420],{"type":15,"tag":83,"props":415,"children":417},{"className":416},[86],[418],{"type":21,"value":419},"3",{"type":21,"value":421}," Enjoy using Inkline",{"type":21,"value":93},{"type":15,"tag":35,"props":424,"children":425},{},[426],{"type":21,"value":427},"Awesome work! You can now start using all the features that Inkline has to offer.",{"type":15,"tag":429,"children":430},"style",[431],{"type":21,"value":432},".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;}",{"title":7,"searchDepth":205,"depth":205,"links":434},[435],{"id":26,"depth":205,"text":9,"children":436},[437],{"id":5,"depth":214,"text":69},"markdown","content:docs:installation:webpack.md","content","docs/installation/webpack.md","md",1794582256686]