[{"data":1,"prerenderedAt":931},["ShallowReactive",2],{"blog-post-/blog/nuxt-particles/":3},{"id":4,"title":5,"body":6,"description":910,"extension":911,"meta":912,"navigation":246,"path":926,"seo":927,"sitemap":928,"stem":929,"__hash__":930},"content/blog/nuxt-particles.md","How to Add Particle Backgrounds in Nuxt with tsparticles",{"type":7,"value":8,"toc":903},"minimark",[9,13,26,31,59,62,80,84,91,162,166,428,432,867,871,899],[10,11,5],"h1",{"id":12},"how-to-add-particle-backgrounds-in-nuxt-with-tsparticles",[14,15,16,17,21,22,25],"p",{},"Want to add eye-catching animated particle backgrounds to your Nuxt.js site? Here's how to integrate ",[18,19,20],"code",{},"tsparticles"," using the ",[18,23,24],{},"nuxt-particles"," module.",[27,28,30],"h2",{"id":29},"step-1-installation","Step 1: Installation",[32,33,38],"pre",{"className":34,"code":35,"language":36,"meta":37,"style":37},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npm install --save-dev nuxt-particles\n","bash","",[18,39,40],{"__ignoreMap":37},[41,42,45,49,53,56],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sBMFI","npm",[41,50,52],{"class":51},"sfazB"," install",[41,54,55],{"class":51}," --save-dev",[41,57,58],{"class":51}," nuxt-particles\n",[14,60,61],{},"or",[32,63,65],{"className":34,"code":64,"language":36,"meta":37,"style":37},"yarn add -D nuxt-particles\n",[18,66,67],{"__ignoreMap":37},[41,68,69,72,75,78],{"class":43,"line":44},[41,70,71],{"class":47},"yarn",[41,73,74],{"class":51}," add",[41,76,77],{"class":51}," -D",[41,79,58],{"class":51},[27,81,83],{"id":82},"step-2-configuration","Step 2: Configuration",[14,85,86,87,90],{},"Add to ",[18,88,89],{},"nuxt.config.ts",":",[32,92,96],{"className":93,"code":94,"language":95,"meta":37,"style":37},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export default defineNuxtConfig({\n  modules: [\n    'nuxt-particles',\n  ],\n})\n","ts",[18,97,98,119,131,145,153],{"__ignoreMap":37},[41,99,100,104,107,111,115],{"class":43,"line":44},[41,101,103],{"class":102},"s7zQu","export",[41,105,106],{"class":102}," default",[41,108,110],{"class":109},"s2Zo4"," defineNuxtConfig",[41,112,114],{"class":113},"sTEyZ","(",[41,116,118],{"class":117},"sMK4o","{\n",[41,120,122,126,128],{"class":43,"line":121},2,[41,123,125],{"class":124},"swJcz","  modules",[41,127,90],{"class":117},[41,129,130],{"class":113}," [\n",[41,132,134,137,139,142],{"class":43,"line":133},3,[41,135,136],{"class":117},"    '",[41,138,24],{"class":51},[41,140,141],{"class":117},"'",[41,143,144],{"class":117},",\n",[41,146,148,151],{"class":43,"line":147},4,[41,149,150],{"class":113},"  ]",[41,152,144],{"class":117},[41,154,156,159],{"class":43,"line":155},5,[41,157,158],{"class":117},"}",[41,160,161],{"class":113},")\n",[27,163,165],{"id":164},"step-3-basic-implementation","Step 3: Basic Implementation",[32,167,171],{"className":168,"code":169,"language":170,"meta":37,"style":37},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003CNuxtParticles id=\"tsparticles\" :options=\"options\" @load=\"onLoad\" />\n\u003C/template>\n\n\u003Cscript setup lang=\"ts\">\nimport type { Container } from 'tsparticles-engine'\n\nconst options = {\n  // see full example below\n}\n\nconst onLoad = (container: Container) => {\n  container.pause()\n  setTimeout(() => container.play(), 2000)\n}\n\u003C/script>\n","vue",[18,172,173,184,233,242,248,271,301,306,320,327,333,338,367,382,414,419],{"__ignoreMap":37},[41,174,175,178,181],{"class":43,"line":44},[41,176,177],{"class":117},"\u003C",[41,179,180],{"class":124},"template",[41,182,183],{"class":117},">\n",[41,185,186,189,192,196,199,202,204,206,209,211,213,216,218,221,223,225,228,230],{"class":43,"line":121},[41,187,188],{"class":117},"  \u003C",[41,190,191],{"class":124},"NuxtParticles",[41,193,195],{"class":194},"spNyl"," id",[41,197,198],{"class":117},"=",[41,200,201],{"class":117},"\"",[41,203,20],{"class":51},[41,205,201],{"class":117},[41,207,208],{"class":194}," :options",[41,210,198],{"class":117},[41,212,201],{"class":117},[41,214,215],{"class":51},"options",[41,217,201],{"class":117},[41,219,220],{"class":194}," @load",[41,222,198],{"class":117},[41,224,201],{"class":117},[41,226,227],{"class":51},"onLoad",[41,229,201],{"class":117},[41,231,232],{"class":117}," />\n",[41,234,235,238,240],{"class":43,"line":133},[41,236,237],{"class":117},"\u003C/",[41,239,180],{"class":124},[41,241,183],{"class":117},[41,243,244],{"class":43,"line":147},[41,245,247],{"emptyLinePlaceholder":246},true,"\n",[41,249,250,252,255,258,261,263,265,267,269],{"class":43,"line":155},[41,251,177],{"class":117},[41,253,254],{"class":124},"script",[41,256,257],{"class":194}," setup",[41,259,260],{"class":194}," lang",[41,262,198],{"class":117},[41,264,201],{"class":117},[41,266,95],{"class":51},[41,268,201],{"class":117},[41,270,183],{"class":117},[41,272,274,277,280,283,286,289,292,295,298],{"class":43,"line":273},6,[41,275,276],{"class":102},"import",[41,278,279],{"class":102}," type",[41,281,282],{"class":117}," {",[41,284,285],{"class":113}," Container",[41,287,288],{"class":117}," }",[41,290,291],{"class":102}," from",[41,293,294],{"class":117}," '",[41,296,297],{"class":51},"tsparticles-engine",[41,299,300],{"class":117},"'\n",[41,302,304],{"class":43,"line":303},7,[41,305,247],{"emptyLinePlaceholder":246},[41,307,309,312,315,317],{"class":43,"line":308},8,[41,310,311],{"class":194},"const",[41,313,314],{"class":113}," options ",[41,316,198],{"class":117},[41,318,319],{"class":117}," {\n",[41,321,323],{"class":43,"line":322},9,[41,324,326],{"class":325},"sHwdD","  // see full example below\n",[41,328,330],{"class":43,"line":329},10,[41,331,332],{"class":117},"}\n",[41,334,336],{"class":43,"line":335},11,[41,337,247],{"emptyLinePlaceholder":246},[41,339,341,343,346,348,351,355,357,359,362,365],{"class":43,"line":340},12,[41,342,311],{"class":194},[41,344,345],{"class":113}," onLoad ",[41,347,198],{"class":117},[41,349,350],{"class":117}," (",[41,352,354],{"class":353},"sHdIc","container",[41,356,90],{"class":117},[41,358,285],{"class":47},[41,360,361],{"class":117},")",[41,363,364],{"class":194}," =>",[41,366,319],{"class":117},[41,368,370,373,376,379],{"class":43,"line":369},13,[41,371,372],{"class":113},"  container",[41,374,375],{"class":117},".",[41,377,378],{"class":109},"pause",[41,380,381],{"class":124},"()\n",[41,383,385,388,390,393,395,398,400,403,405,408,412],{"class":43,"line":384},14,[41,386,387],{"class":109},"  setTimeout",[41,389,114],{"class":124},[41,391,392],{"class":117},"()",[41,394,364],{"class":194},[41,396,397],{"class":113}," container",[41,399,375],{"class":117},[41,401,402],{"class":109},"play",[41,404,392],{"class":124},[41,406,407],{"class":117},",",[41,409,411],{"class":410},"sbssI"," 2000",[41,413,161],{"class":124},[41,415,417],{"class":43,"line":416},15,[41,418,332],{"class":117},[41,420,422,424,426],{"class":43,"line":421},16,[41,423,237],{"class":117},[41,425,254],{"class":124},[41,427,183],{"class":117},[27,429,431],{"id":430},"full-configuration-example","Full Configuration Example",[32,433,435],{"className":168,"code":434,"language":170,"meta":37,"style":37},"\u003Cscript setup lang=\"ts\">\nimport type { Container } from 'tsparticles-engine'\n\nconst options = {\n  fullScreen: { enable: true, zIndex: -1 },\n  interactivity: {\n    events: {\n      onclick: { enable: true, mode: 'push' },\n      onhover: { enable: true, mode: 'repulse' },\n    },\n    modes: {\n      push: { quantity: 10 },\n      repulse: { distance: 100 },\n    },\n  },\n  particles: {\n    color: { value: '#0ea5e9' },\n    links: { color: '#0ea5e9', enable: true, distance: '200' },\n    move: { enable: true },\n    number: { value: 200 },\n  },\n}\n\nconst onLoad = (container: Container) => {\n  container.pause()\n  setTimeout(() => container.play(), 2000)\n}\n\u003C/script>\n",[18,436,437,457,477,481,491,525,534,543,574,604,609,618,637,656,660,665,674,698,742,760,779,784,789,794,817,828,853,858],{"__ignoreMap":37},[41,438,439,441,443,445,447,449,451,453,455],{"class":43,"line":44},[41,440,177],{"class":117},[41,442,254],{"class":124},[41,444,257],{"class":194},[41,446,260],{"class":194},[41,448,198],{"class":117},[41,450,201],{"class":117},[41,452,95],{"class":51},[41,454,201],{"class":117},[41,456,183],{"class":117},[41,458,459,461,463,465,467,469,471,473,475],{"class":43,"line":121},[41,460,276],{"class":102},[41,462,279],{"class":102},[41,464,282],{"class":117},[41,466,285],{"class":113},[41,468,288],{"class":117},[41,470,291],{"class":102},[41,472,294],{"class":117},[41,474,297],{"class":51},[41,476,300],{"class":117},[41,478,479],{"class":43,"line":133},[41,480,247],{"emptyLinePlaceholder":246},[41,482,483,485,487,489],{"class":43,"line":147},[41,484,311],{"class":194},[41,486,314],{"class":113},[41,488,198],{"class":117},[41,490,319],{"class":117},[41,492,493,496,498,500,503,505,509,511,514,516,519,522],{"class":43,"line":155},[41,494,495],{"class":124},"  fullScreen",[41,497,90],{"class":117},[41,499,282],{"class":117},[41,501,502],{"class":124}," enable",[41,504,90],{"class":117},[41,506,508],{"class":507},"sfNiH"," true",[41,510,407],{"class":117},[41,512,513],{"class":124}," zIndex",[41,515,90],{"class":117},[41,517,518],{"class":117}," -",[41,520,521],{"class":410},"1",[41,523,524],{"class":117}," },\n",[41,526,527,530,532],{"class":43,"line":273},[41,528,529],{"class":124},"  interactivity",[41,531,90],{"class":117},[41,533,319],{"class":117},[41,535,536,539,541],{"class":43,"line":303},[41,537,538],{"class":124},"    events",[41,540,90],{"class":117},[41,542,319],{"class":117},[41,544,545,548,550,552,554,556,558,560,563,565,567,570,572],{"class":43,"line":308},[41,546,547],{"class":124},"      onclick",[41,549,90],{"class":117},[41,551,282],{"class":117},[41,553,502],{"class":124},[41,555,90],{"class":117},[41,557,508],{"class":507},[41,559,407],{"class":117},[41,561,562],{"class":124}," mode",[41,564,90],{"class":117},[41,566,294],{"class":117},[41,568,569],{"class":51},"push",[41,571,141],{"class":117},[41,573,524],{"class":117},[41,575,576,579,581,583,585,587,589,591,593,595,597,600,602],{"class":43,"line":322},[41,577,578],{"class":124},"      onhover",[41,580,90],{"class":117},[41,582,282],{"class":117},[41,584,502],{"class":124},[41,586,90],{"class":117},[41,588,508],{"class":507},[41,590,407],{"class":117},[41,592,562],{"class":124},[41,594,90],{"class":117},[41,596,294],{"class":117},[41,598,599],{"class":51},"repulse",[41,601,141],{"class":117},[41,603,524],{"class":117},[41,605,606],{"class":43,"line":329},[41,607,608],{"class":117},"    },\n",[41,610,611,614,616],{"class":43,"line":335},[41,612,613],{"class":124},"    modes",[41,615,90],{"class":117},[41,617,319],{"class":117},[41,619,620,623,625,627,630,632,635],{"class":43,"line":340},[41,621,622],{"class":124},"      push",[41,624,90],{"class":117},[41,626,282],{"class":117},[41,628,629],{"class":124}," quantity",[41,631,90],{"class":117},[41,633,634],{"class":410}," 10",[41,636,524],{"class":117},[41,638,639,642,644,646,649,651,654],{"class":43,"line":369},[41,640,641],{"class":124},"      repulse",[41,643,90],{"class":117},[41,645,282],{"class":117},[41,647,648],{"class":124}," distance",[41,650,90],{"class":117},[41,652,653],{"class":410}," 100",[41,655,524],{"class":117},[41,657,658],{"class":43,"line":384},[41,659,608],{"class":117},[41,661,662],{"class":43,"line":416},[41,663,664],{"class":117},"  },\n",[41,666,667,670,672],{"class":43,"line":421},[41,668,669],{"class":124},"  particles",[41,671,90],{"class":117},[41,673,319],{"class":117},[41,675,677,680,682,684,687,689,691,694,696],{"class":43,"line":676},17,[41,678,679],{"class":124},"    color",[41,681,90],{"class":117},[41,683,282],{"class":117},[41,685,686],{"class":124}," value",[41,688,90],{"class":117},[41,690,294],{"class":117},[41,692,693],{"class":51},"#0ea5e9",[41,695,141],{"class":117},[41,697,524],{"class":117},[41,699,701,704,706,708,711,713,715,717,719,721,723,725,727,729,731,733,735,738,740],{"class":43,"line":700},18,[41,702,703],{"class":124},"    links",[41,705,90],{"class":117},[41,707,282],{"class":117},[41,709,710],{"class":124}," color",[41,712,90],{"class":117},[41,714,294],{"class":117},[41,716,693],{"class":51},[41,718,141],{"class":117},[41,720,407],{"class":117},[41,722,502],{"class":124},[41,724,90],{"class":117},[41,726,508],{"class":507},[41,728,407],{"class":117},[41,730,648],{"class":124},[41,732,90],{"class":117},[41,734,294],{"class":117},[41,736,737],{"class":51},"200",[41,739,141],{"class":117},[41,741,524],{"class":117},[41,743,745,748,750,752,754,756,758],{"class":43,"line":744},19,[41,746,747],{"class":124},"    move",[41,749,90],{"class":117},[41,751,282],{"class":117},[41,753,502],{"class":124},[41,755,90],{"class":117},[41,757,508],{"class":507},[41,759,524],{"class":117},[41,761,763,766,768,770,772,774,777],{"class":43,"line":762},20,[41,764,765],{"class":124},"    number",[41,767,90],{"class":117},[41,769,282],{"class":117},[41,771,686],{"class":124},[41,773,90],{"class":117},[41,775,776],{"class":410}," 200",[41,778,524],{"class":117},[41,780,782],{"class":43,"line":781},21,[41,783,664],{"class":117},[41,785,787],{"class":43,"line":786},22,[41,788,332],{"class":117},[41,790,792],{"class":43,"line":791},23,[41,793,247],{"emptyLinePlaceholder":246},[41,795,797,799,801,803,805,807,809,811,813,815],{"class":43,"line":796},24,[41,798,311],{"class":194},[41,800,345],{"class":113},[41,802,198],{"class":117},[41,804,350],{"class":117},[41,806,354],{"class":353},[41,808,90],{"class":117},[41,810,285],{"class":47},[41,812,361],{"class":117},[41,814,364],{"class":194},[41,816,319],{"class":117},[41,818,820,822,824,826],{"class":43,"line":819},25,[41,821,372],{"class":113},[41,823,375],{"class":117},[41,825,378],{"class":109},[41,827,381],{"class":124},[41,829,831,833,835,837,839,841,843,845,847,849,851],{"class":43,"line":830},26,[41,832,387],{"class":109},[41,834,114],{"class":124},[41,836,392],{"class":117},[41,838,364],{"class":194},[41,840,397],{"class":113},[41,842,375],{"class":117},[41,844,402],{"class":109},[41,846,392],{"class":124},[41,848,407],{"class":117},[41,850,411],{"class":410},[41,852,161],{"class":124},[41,854,856],{"class":43,"line":855},27,[41,857,332],{"class":117},[41,859,861,863,865],{"class":43,"line":860},28,[41,862,237],{"class":117},[41,864,254],{"class":124},[41,866,183],{"class":117},[27,868,870],{"id":869},"customization","Customization",[14,872,873,874,877,878,877,881,877,884,887,888,891,892,375],{},"Adjust ",[18,875,876],{},"color",", ",[18,879,880],{},"number",[18,882,883],{},"move",[18,885,886],{},"links",", and ",[18,889,890],{},"interactivity"," to match your site's aesthetic. Full documentation: ",[893,894,898],"a",{"href":895,"rel":896},"https://nuxt-particles.joeypereira.dev/getting-started/setup",[897],"nofollow","nuxt-particles docs",[900,901,902],"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 .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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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 .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":37,"searchDepth":121,"depth":121,"links":904},[905,906,907,908,909],{"id":29,"depth":121,"text":30},{"id":82,"depth":121,"text":83},{"id":164,"depth":121,"text":165},{"id":430,"depth":121,"text":431},{"id":869,"depth":121,"text":870},"Add dynamic animated particle backgrounds to your Nuxt.js site using nuxt-particles and tsparticles. Step-by-step guide with full configuration example.","md",{"author":913,"date":914,"image":915,"category":916,"tags":917,"featured":925,"draft":925},"Aysegul Karadan","2024-03-11T10:00:00.000Z","/img/nuxtparticles/1.jpg","Web Development",[918,919,920,20,24,921,922,923,924],"nuxt","animation","particles","how-to-add-particles-nuxt","tsparticles-nuxt3","background-animation-nuxt","nuxt-interactive-background",false,"/blog/nuxt-particles",{"title":5,"description":910},{"loc":926},"blog/nuxt-particles","t30zmGgigW5LwFsZjgax5poG4FxLiqJQVOvtljZr9IM",1782986782622]