{"id":5527,"date":"2022-12-12T11:33:38","date_gmt":"2022-12-12T11:33:38","guid":{"rendered":"https:\/\/tuvoc.com\/?p=5527"},"modified":"2024-11-05T09:52:18","modified_gmt":"2024-11-05T09:52:18","slug":"building-static-websites-with-nuxt-js","status":"publish","type":"post","link":"https:\/\/www.tuvoc.com\/blog\/building-static-websites-with-nuxt-js\/","title":{"rendered":"Building Static Websites With NUXT.JS"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">A static website is a website that will be served to the client with static assets of HTML, CSS, and <strong><a href=\"https:\/\/www.tuvoc.com\/blog\/a-deep-dive-into-the-event-loop-in-javascript-how-it-works-and-why-it-matters\/\">JavaScript<\/a> <\/strong>without any database or CMS. Here, there will be no time taken between the browser requesting a webpage and the time the webpage is received since there is no calculation done between.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you have ever &#8216;saved&#8217; a webpage with a .html extension, it is static. You just double-click on it and the file will open with the information inside.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Creating a static website yourself is a challenge though. However, you can follow some simple steps to start building your static website with Nuxt.js, the platform based on Vue.js for developing websites.<\/span><\/p>\n<h2><span style=\"font-weight: 600;\">Things You\u2019ll Need<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Before we start building our static website with Nuxt.js, here are some things you need to have to get started.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Git &#8211; Installed on your device<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">GitHub Account<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Netlify Account Linked To GitHub<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">node and npm &#8211; Installed on your device<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">If you have got them, let\u2019s start with creating a project.<\/span><\/p>\n<h2><span style=\"font-weight: 600;\">Creating A Project<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">It&#8217;s time to set up a project based on nuxt.js once you are done setting up your environment. We will start with installing vue-cli to create a turn-key app, on top of which a static site can be built.<\/span><\/p>\n<h3><b>vue-cli Installation<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">For setting up the necessary parts of our project, we need to install the vue-cli. This is how you will install it, by typing &#8216;npm install vue-cli -g&#8217; into your terminal.<\/span><\/p>\n<h3><b>Nuxt Starter<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">In vue-cli, go to the directory where you want to host your project folder. You can have a &#8216;repos&#8217; directory in your user profile, and type the following into the terminal:<\/span><\/p>\n<p><span style=\"font-weight: 400;\">vue init nuxt\/starter &lt;your-project&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0# Follow the command line instructions<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0# (see if the defaults are okay) press enter a few times<\/span><\/p>\n<p><span style=\"font-weight: 400;\">cd &lt;your-project&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">npm install<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here, &lt;your-project&gt; will have the name of your project. Don&#8217;t forget how you have named the project, as it will come in handy, later.<\/span><\/p>\n<h3><b>Initialize the git<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">We need to initialize the folder as a git repository to interact with GitHub. Get to the root of your &lt;your-project&gt; library and type this:<\/span><\/p>\n<p><span style=\"font-weight: 400;\">git init<\/span><\/p>\n<p><span style=\"font-weight: 400;\">git add .<\/span><\/p>\n<p><span style=\"font-weight: 400;\">git commit -m &#8220;Initial commit&#8221;<\/span><\/p>\n<h3><b>Create New Repository on GitHub<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Go to github.com and click on the \u2018+\u2019 icon and select the &#8216;New Repository\u2019 option. We will be creating an empty repository here, and in the Repository Name field, we will enter our project name (your-project in this example)<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In the next step, you can skip readme and add a license for now, and click &#8216;create repository\u2019.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">GitHub will provide you with instructions and commands to publish your project to GitHub. In your terminal, type in those commands and push them.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">See if your code is published on GitHub.<\/span><\/p>\n<h2><span style=\"font-weight: 600;\">Building A Static Site<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Now, let&#8217;s start building a static site and see if we can have a look at what we create.<\/span><\/p>\n<h3><b>run dev<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">To develop the website locally, vue-cli will need this command.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">npm run dev<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This command will help you compile your files and initialize a web server using the webpack. Go to localhost:3000 and you will be able to see the splash screen of your project.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">For this page to become your website, we need to customize this page. Open src\/pages\/index.vue in your choice of editor to edit index.html.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here you can change content within the template tag and save it. The changes will be live in your browser.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you want to add a page, you will need to create a file for that page with the .vue extension and place your <strong><a href=\"https:\/\/www.tuvoc.com\/technologies\/front-end\/html5-web-development-company\/\">HTML<\/a><\/strong> between &lt;template&gt;&lt;\/template&gt; tags at the top of the file.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">For example, if you want to create www.yourproject.com\/aboutproject, you will create aboutproject.vue.<\/span><\/p>\n<h3><b>Generating the Code<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Type &#8216;npm run generate&#8217; into your terminal, and you will get access to prefetch and HTTP2 support. Nuxt.js automatically converts your project to a static site that you can distribute on any HTTP server.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In the root, there will be a folder created automatically, named &#8216;\/dist&#8217;, and that&#8217;s where your site is placed.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">So, your code is working! But currently, it is just on your computer and won&#8217;t be visible to anyone else. Let&#8217;s publish it to Netlify and make it live!<\/span><\/p>\n<h2><span style=\"font-weight: 600;\">Publishing<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">As mentioned, the site is currently sitting with you and the world needs to see it. To publish your static site with Nuxt.js, you need to link your Netlify to GitHub.<\/span><\/p>\n<h3><b>Link Netlify to GitHub<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">We are almost there. Follow the steps below to link your GitHub with Netlify and make your site live:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Log in to app.netlify.com. To make things easier, register with your GitHub profile. This will help Netlify to know where to get your code.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">After you have logged in, look for the <\/span><b>\u2018New site from Git\u2019 <\/b><span style=\"font-weight: 400;\">button on the upper right corner of your Netlify dashboard.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Click on the button and choose <\/span><b>&#8216;GitHub&#8217;<\/b><span style=\"font-weight: 400;\"> in the <\/span><i><span style=\"font-weight: 400;\">continuous deployment options<\/span><\/i><span style=\"font-weight: 400;\">.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Give access to your repositories to Netlify by authorizing them when asked, and you will be able to see the list of all your repos.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Select the repo we just created.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">To deploy the site, Netlify needs to know where your site code is. Here is what you need to do.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Select the <\/span><i><span style=\"font-weight: 400;\">Branch to deploy<\/span><\/i><span style=\"font-weight: 400;\"> as <\/span><b>&#8216;Master&#8217;<\/b><span style=\"font-weight: 400;\">. In the <\/span><i><span style=\"font-weight: 400;\">Build command<\/span><\/i><span style=\"font-weight: 400;\">, there should be <\/span><b>&#8216;npm run generate&#8217;<\/b><span style=\"font-weight: 400;\">, and the <\/span><i><span style=\"font-weight: 400;\">publish directory<\/span><\/i><span style=\"font-weight: 400;\"> should be <\/span><b>&#8216;dist&#8217;<\/b><span style=\"font-weight: 400;\">.\u00a0<\/span><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">These are the same commands we typed to generate the site locally. Netlify will wait until your code is generated and the output will be fetched to Netlify&#8217;s servers.<\/span><\/p>\n<p><b>Your site is now live!<\/b><\/p>\n<p><span style=\"font-weight: 400;\">There will be a random domain assigned to your site, generated by Netlify. If you have a domain, link the DNS server with Netlify, and that&#8217;s taken care of, too!<\/span><\/p>\n<h2><span style=\"font-weight: 600;\">It\u2019s Live Now!<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Anyone with the link to your static site can see this site created with Nuxt.js and Vue with Netlify. All the changes you make on GitHub will be reflected in Netlify automatically.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">To summarize, this is what we did:<\/span><\/p>\n<p><b>To Create a Project<\/b><\/p>\n<ul>\n<li><span style=\"font-weight: 400;\">Install vue-cli<\/span><\/li>\n<li>Create Nuxt Starter<\/li>\n<li>Initialize the Git<\/li>\n<li>Create an Empty Repository on GitHub<\/li>\n<\/ul>\n<p><b>To Build Your Static Site with Nuxt.js<\/b><\/p>\n<ul>\n<li><span style=\"font-weight: 400;\">Run the dev server<\/span><\/li>\n<li>Generate the static site code<\/li>\n<\/ul>\n<p><b>To Publish Your Site<\/b><\/p>\n<ul>\n<li><span style=\"font-weight: 400;\">Link your GitHub repo to Netlify<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">And that\u2019s all it requires to build your static site using Nuxt. Go ahead and practice some of your own projects using this open-source library to its fullest potential.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>A static website is a website that will be served to the client with static assets of HTML, CSS, and JavaScript without any database or CMS. Here, there will be no time taken between the browser requesting a webpage and the time the webpage is received since there is no calculation done between. If you [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":5535,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[124,23],"tags":[],"class_list":["post-5527","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-app-development","category-tuvoc"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Build Static Websites with Nuxt.js: A Complete Guide<\/title>\n<meta name=\"description\" content=\"Learn to create fast and dynamic static websites with Nuxt.js. Explore key features &amp; practical tips to improve your web development skills.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.tuvoc.com\/blog\/building-static-websites-with-nuxt-js\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Build Static Websites with Nuxt.js: A Complete Guide\" \/>\n<meta property=\"og:description\" content=\"Learn to create fast and dynamic static websites with Nuxt.js. Explore key features &amp; practical tips to improve your web development skills.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.tuvoc.com\/blog\/building-static-websites-with-nuxt-js\/\" \/>\n<meta property=\"og:site_name\" content=\"Tuvoc Technologies\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/tuvoctechnologies\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-12-12T11:33:38+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-05T09:52:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.tuvoc.com\/wp-content\/uploads\/2022\/12\/Building-static-website-with-NUTX.js.png\" \/>\n\t<meta property=\"og:image:width\" content=\"3617\" \/>\n\t<meta property=\"og:image:height\" content=\"2251\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jitendra Rathod\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@Tuvocpvtltd\" \/>\n<meta name=\"twitter:site\" content=\"@Tuvocpvtltd\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jitendra Rathod\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.tuvoc.com\/blog\/building-static-websites-with-nuxt-js\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.tuvoc.com\/blog\/building-static-websites-with-nuxt-js\/\"},\"author\":{\"name\":\"Jitendra Rathod\",\"@id\":\"https:\/\/www.tuvoc.com\/#\/schema\/person\/2a427deaad57e0f7ff9dbb1f14cdb7d9\"},\"headline\":\"Building Static Websites With NUXT.JS\",\"datePublished\":\"2022-12-12T11:33:38+00:00\",\"dateModified\":\"2024-11-05T09:52:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.tuvoc.com\/blog\/building-static-websites-with-nuxt-js\/\"},\"wordCount\":1116,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.tuvoc.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.tuvoc.com\/blog\/building-static-websites-with-nuxt-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.tuvoc.com\/wp-content\/uploads\/2022\/12\/Building-static-website-with-NUTX.js.png\",\"articleSection\":[\"App Development\",\"Tuvoc\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.tuvoc.com\/blog\/building-static-websites-with-nuxt-js\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.tuvoc.com\/blog\/building-static-websites-with-nuxt-js\/\",\"url\":\"https:\/\/www.tuvoc.com\/blog\/building-static-websites-with-nuxt-js\/\",\"name\":\"Build Static Websites with Nuxt.js: A Complete Guide\",\"isPartOf\":{\"@id\":\"https:\/\/www.tuvoc.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.tuvoc.com\/blog\/building-static-websites-with-nuxt-js\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.tuvoc.com\/blog\/building-static-websites-with-nuxt-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.tuvoc.com\/wp-content\/uploads\/2022\/12\/Building-static-website-with-NUTX.js.png\",\"datePublished\":\"2022-12-12T11:33:38+00:00\",\"dateModified\":\"2024-11-05T09:52:18+00:00\",\"description\":\"Learn to create fast and dynamic static websites with Nuxt.js. Explore key features & practical tips to improve your web development skills.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.tuvoc.com\/blog\/building-static-websites-with-nuxt-js\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.tuvoc.com\/blog\/building-static-websites-with-nuxt-js\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.tuvoc.com\/blog\/building-static-websites-with-nuxt-js\/#primaryimage\",\"url\":\"https:\/\/www.tuvoc.com\/wp-content\/uploads\/2022\/12\/Building-static-website-with-NUTX.js.png\",\"contentUrl\":\"https:\/\/www.tuvoc.com\/wp-content\/uploads\/2022\/12\/Building-static-website-with-NUTX.js.png\",\"width\":3617,\"height\":2251},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.tuvoc.com\/blog\/building-static-websites-with-nuxt-js\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.tuvoc.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Building Static Websites With NUXT.JS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.tuvoc.com\/#website\",\"url\":\"https:\/\/www.tuvoc.com\/\",\"name\":\"Tuvoc Technologies\",\"description\":\"Top Secure Web &amp; Mobile Application Development Company\",\"publisher\":{\"@id\":\"https:\/\/www.tuvoc.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.tuvoc.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.tuvoc.com\/#organization\",\"name\":\"Tuvoc Technologies\",\"url\":\"https:\/\/www.tuvoc.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.tuvoc.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.tuvoc.com\/wp-content\/uploads\/2023\/07\/Tuvoc-1.svg\",\"contentUrl\":\"https:\/\/www.tuvoc.com\/wp-content\/uploads\/2023\/07\/Tuvoc-1.svg\",\"width\":1,\"height\":1,\"caption\":\"Tuvoc Technologies\"},\"image\":{\"@id\":\"https:\/\/www.tuvoc.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/tuvoctechnologies\/\",\"https:\/\/x.com\/Tuvocpvtltd\",\"https:\/\/www.instagram.com\/tuvocpvtltd\/\",\"https:\/\/www.linkedin.com\/company\/tuvoc-technologies\/people\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.tuvoc.com\/#\/schema\/person\/2a427deaad57e0f7ff9dbb1f14cdb7d9\",\"name\":\"Jitendra Rathod\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.tuvoc.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d373e90892c0a256ef4c451874d1bd84?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d373e90892c0a256ef4c451874d1bd84?s=96&d=mm&r=g\",\"caption\":\"Jitendra Rathod\"},\"url\":\"https:\/\/www.tuvoc.com\/author\/jitendra\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Build Static Websites with Nuxt.js: A Complete Guide","description":"Learn to create fast and dynamic static websites with Nuxt.js. Explore key features & practical tips to improve your web development skills.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.tuvoc.com\/blog\/building-static-websites-with-nuxt-js\/","og_locale":"en_US","og_type":"article","og_title":"Build Static Websites with Nuxt.js: A Complete Guide","og_description":"Learn to create fast and dynamic static websites with Nuxt.js. Explore key features & practical tips to improve your web development skills.","og_url":"https:\/\/www.tuvoc.com\/blog\/building-static-websites-with-nuxt-js\/","og_site_name":"Tuvoc Technologies","article_publisher":"https:\/\/www.facebook.com\/tuvoctechnologies\/","article_published_time":"2022-12-12T11:33:38+00:00","article_modified_time":"2024-11-05T09:52:18+00:00","og_image":[{"width":3617,"height":2251,"url":"https:\/\/www.tuvoc.com\/wp-content\/uploads\/2022\/12\/Building-static-website-with-NUTX.js.png","type":"image\/png"}],"author":"Jitendra Rathod","twitter_card":"summary_large_image","twitter_creator":"@Tuvocpvtltd","twitter_site":"@Tuvocpvtltd","twitter_misc":{"Written by":"Jitendra Rathod","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.tuvoc.com\/blog\/building-static-websites-with-nuxt-js\/#article","isPartOf":{"@id":"https:\/\/www.tuvoc.com\/blog\/building-static-websites-with-nuxt-js\/"},"author":{"name":"Jitendra Rathod","@id":"https:\/\/www.tuvoc.com\/#\/schema\/person\/2a427deaad57e0f7ff9dbb1f14cdb7d9"},"headline":"Building Static Websites With NUXT.JS","datePublished":"2022-12-12T11:33:38+00:00","dateModified":"2024-11-05T09:52:18+00:00","mainEntityOfPage":{"@id":"https:\/\/www.tuvoc.com\/blog\/building-static-websites-with-nuxt-js\/"},"wordCount":1116,"commentCount":0,"publisher":{"@id":"https:\/\/www.tuvoc.com\/#organization"},"image":{"@id":"https:\/\/www.tuvoc.com\/blog\/building-static-websites-with-nuxt-js\/#primaryimage"},"thumbnailUrl":"https:\/\/www.tuvoc.com\/wp-content\/uploads\/2022\/12\/Building-static-website-with-NUTX.js.png","articleSection":["App Development","Tuvoc"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.tuvoc.com\/blog\/building-static-websites-with-nuxt-js\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.tuvoc.com\/blog\/building-static-websites-with-nuxt-js\/","url":"https:\/\/www.tuvoc.com\/blog\/building-static-websites-with-nuxt-js\/","name":"Build Static Websites with Nuxt.js: A Complete Guide","isPartOf":{"@id":"https:\/\/www.tuvoc.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.tuvoc.com\/blog\/building-static-websites-with-nuxt-js\/#primaryimage"},"image":{"@id":"https:\/\/www.tuvoc.com\/blog\/building-static-websites-with-nuxt-js\/#primaryimage"},"thumbnailUrl":"https:\/\/www.tuvoc.com\/wp-content\/uploads\/2022\/12\/Building-static-website-with-NUTX.js.png","datePublished":"2022-12-12T11:33:38+00:00","dateModified":"2024-11-05T09:52:18+00:00","description":"Learn to create fast and dynamic static websites with Nuxt.js. Explore key features & practical tips to improve your web development skills.","breadcrumb":{"@id":"https:\/\/www.tuvoc.com\/blog\/building-static-websites-with-nuxt-js\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.tuvoc.com\/blog\/building-static-websites-with-nuxt-js\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.tuvoc.com\/blog\/building-static-websites-with-nuxt-js\/#primaryimage","url":"https:\/\/www.tuvoc.com\/wp-content\/uploads\/2022\/12\/Building-static-website-with-NUTX.js.png","contentUrl":"https:\/\/www.tuvoc.com\/wp-content\/uploads\/2022\/12\/Building-static-website-with-NUTX.js.png","width":3617,"height":2251},{"@type":"BreadcrumbList","@id":"https:\/\/www.tuvoc.com\/blog\/building-static-websites-with-nuxt-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.tuvoc.com\/"},{"@type":"ListItem","position":2,"name":"Building Static Websites With NUXT.JS"}]},{"@type":"WebSite","@id":"https:\/\/www.tuvoc.com\/#website","url":"https:\/\/www.tuvoc.com\/","name":"Tuvoc Technologies","description":"Top Secure Web &amp; Mobile Application Development Company","publisher":{"@id":"https:\/\/www.tuvoc.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.tuvoc.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.tuvoc.com\/#organization","name":"Tuvoc Technologies","url":"https:\/\/www.tuvoc.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.tuvoc.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.tuvoc.com\/wp-content\/uploads\/2023\/07\/Tuvoc-1.svg","contentUrl":"https:\/\/www.tuvoc.com\/wp-content\/uploads\/2023\/07\/Tuvoc-1.svg","width":1,"height":1,"caption":"Tuvoc Technologies"},"image":{"@id":"https:\/\/www.tuvoc.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/tuvoctechnologies\/","https:\/\/x.com\/Tuvocpvtltd","https:\/\/www.instagram.com\/tuvocpvtltd\/","https:\/\/www.linkedin.com\/company\/tuvoc-technologies\/people\/"]},{"@type":"Person","@id":"https:\/\/www.tuvoc.com\/#\/schema\/person\/2a427deaad57e0f7ff9dbb1f14cdb7d9","name":"Jitendra Rathod","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.tuvoc.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d373e90892c0a256ef4c451874d1bd84?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d373e90892c0a256ef4c451874d1bd84?s=96&d=mm&r=g","caption":"Jitendra Rathod"},"url":"https:\/\/www.tuvoc.com\/author\/jitendra\/"}]}},"_links":{"self":[{"href":"https:\/\/www.tuvoc.com\/wp-json\/wp\/v2\/posts\/5527","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tuvoc.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tuvoc.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tuvoc.com\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tuvoc.com\/wp-json\/wp\/v2\/comments?post=5527"}],"version-history":[{"count":0,"href":"https:\/\/www.tuvoc.com\/wp-json\/wp\/v2\/posts\/5527\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.tuvoc.com\/wp-json\/wp\/v2\/media\/5535"}],"wp:attachment":[{"href":"https:\/\/www.tuvoc.com\/wp-json\/wp\/v2\/media?parent=5527"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tuvoc.com\/wp-json\/wp\/v2\/categories?post=5527"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tuvoc.com\/wp-json\/wp\/v2\/tags?post=5527"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}