[{"data":1,"prerenderedAt":208},["ShallowReactive",2],{"blog-article-/blog/nuxt-ignoring-files-nuxt":3,"blog-surround-/blog/nuxt-ignoring-files-nuxt":199},{"id":4,"title":5,"body":6,"canonical":187,"date":188,"description":12,"extension":41,"featured":189,"image":190,"meta":191,"navigation":59,"ogImage":187,"path":192,"provider":193,"published":189,"seo":194,"stem":195,"tags":196,"url":187,"__hash__":198},"blog/blog/nuxt-ignoring-files-nuxt.md","ignoring your files with Nuxt.js",{"type":7,"value":8,"toc":185},"minimark",[9,13,36,97,109,118,151,154,170,181],[10,11,12],"p",{},"In Nuxt.js there are 3 different ways to ignore files during the build phase. This is great for static site generation which means you can still generate your site with a broken page as it will be ignored.",[14,15,16],"ol",{},[17,18,19,20,24,25,27,28,31,32,35],"li",{},"Create a ",[21,22,23],"code",{},".nuxtignore"," file in your root directory. You can ignore layouts, pages, store and middleware files. The ",[21,26,23],{}," file works the same as the ",[21,29,30],{},".gitignore"," or ",[21,33,34],{},".eslintignore"," in that each line is a glob pattern indicating which files should be ignored.",[37,38,43],"pre",{"className":39,"code":40,"language":41,"meta":42,"style":42},"language-md shiki shiki-themes github-light github-dark","# ignore the about page\n\npages/about.vue\n\n# ignore a page inside the blog folder\n\npages/blog/\\*.vue\n","md","",[21,44,45,54,61,68,73,79,84],{"__ignoreMap":42},[46,47,50],"span",{"class":48,"line":49},"line",1,[46,51,53],{"class":52},"sq-ep","# ignore the about page\n",[46,55,57],{"class":48,"line":56},2,[46,58,60],{"emptyLinePlaceholder":59},true,"\n",[46,62,64],{"class":48,"line":63},3,[46,65,67],{"class":66},"sVt8B","pages/about.vue\n",[46,69,71],{"class":48,"line":70},4,[46,72,60],{"emptyLinePlaceholder":59},[46,74,76],{"class":48,"line":75},5,[46,77,78],{"class":52},"# ignore a page inside the blog folder\n",[46,80,82],{"class":48,"line":81},6,[46,83,60],{"emptyLinePlaceholder":59},[46,85,87,90,94],{"class":48,"line":86},7,[46,88,89],{"class":66},"pages/blog/",[46,91,93],{"class":92},"sj4cs","\\*",[46,95,96],{"class":66},".vue\n",[14,98,99],{"start":56},[17,100,101,102,105,106],{},"You can also ignore files using the ignorePrefix property by prefixing your file with a ",[21,103,104],{},"-",". This is a very quick way of ignoring your file as you just need to modifying it's name. ",[21,107,108],{},"pages/-about.vue",[14,110,111],{"start":63},[17,112,113,114,117],{},"You can also use the ignore Property in our ",[21,115,116],{},"nuxt.config.js file"," which is more customisable than using the ignorePrefix property. All files matching a glob pattern specified inside ignore will be ignored during the build process. This means you can easily ignore more than one file. For example to ignore all pages starting with booking:",[37,119,123],{"className":120,"code":121,"language":122,"meta":42,"style":42},"language-javascript shiki shiki-themes github-light github-dark","export default {\n  ignore: 'pages/booking*.vue'\n}\n","javascript",[21,124,125,137,146],{"__ignoreMap":42},[46,126,127,131,134],{"class":48,"line":49},[46,128,130],{"class":129},"szBVR","export",[46,132,133],{"class":129}," default",[46,135,136],{"class":66}," {\n",[46,138,139,142],{"class":48,"line":56},[46,140,141],{"class":66},"  ignore: ",[46,143,145],{"class":144},"sZZnC","'pages/booking*.vue'\n",[46,147,148],{"class":48,"line":63},[46,149,150],{"class":66},"}\n",[10,152,153],{},"Ignoring files is extremely helpful when developing and fixing bugs especially if you break your site and need to generate a new one. By ignoring the broken file/files/folder you can still publish your site and then work on the broken file another time without having to delete it or send it to another branch that might get forgotten about. Of course if you are ignoring files don't forget to later remove them when you want them to be added to the build phase.",[10,155,156,157,160,161,163,164,166,167,169],{},"All 3 options are just as good but I tend to use the ignorePrefix when I am debugging a particular page. I use the ignore property in the ",[21,158,159],{},"nuxt.config.js"," file when I need to push to production as it is easier for people to see what is going on in the pull request and clearer to understand than the prefix option. I rarely use the ",[21,162,23],{}," file as I find people tend to look into the ",[21,165,159],{}," file to see what is going on and they might not come across or understand the ",[21,168,23],{}," file when trying to figure out why a particular page is not building. But of course feel free to use the method that best suits you.",[10,171,172,173,180],{},"For more info and examples on the ignore property see the ",[174,175,179],"a",{"href":176,"rel":177},"https://nuxtjs.org/api/configuration-ignore",[178],"nofollow","Nuxt.js docs",".",[182,183,184],"style",{},"html pre.shiki code .sq-ep, html code.shiki .sq-ep{--shiki-default:#005CC5;--shiki-default-font-weight:bold;--shiki-dark:#79B8FF;--shiki-dark-font-weight:bold}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}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 .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}",{"title":42,"searchDepth":56,"depth":56,"links":186},[],null,"2020-04-24",false,"photo-1557487307-8dc8ec048eb8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop",{},"/blog/nuxt-ignoring-files-nuxt","imgix",{"title":5,"description":12},"blog/nuxt-ignoring-files-nuxt",[197],"nuxt","4ri1DYxj-fXR2ion8Y_leCTj4OHIMvCKICfdqqQepXE",[200,204],{"title":201,"path":202,"stem":203,"children":-1},"Going dark with Nuxt.js color mode","/blog/going-dark-nuxt-color-mode","blog/going-dark-nuxt-color-mode",{"title":205,"path":206,"stem":207,"children":-1},"Creating an error page in Nuxt.js","/blog/nuxt-error-page","blog/nuxt-error-page",1790839748299]