[{"data":1,"prerenderedAt":231},["ShallowReactive",2],{"gql:data:qXAbV-PbUca5RxNaUZMywUf3y92agIub8tZv2ZU1vew":3,"$fnnfq9Cz2Z7xcMkfpfKbOX2tgHiXd7hi_FHTON8yqzWE":172},{"blogPost":4},{"id":5,"title":6,"slug":7,"seoDescription":8,"datePublished":9,"postType":10,"cta":11,"postBody":12,"keyLinks":165},"clvd7lbpnausm07mhpz6t91uk","How to get Netlify Forms working with Nuxt 3","how-to-get-netlify-forms-working-in-nuxt-3","There is not a lot of advice on using Netlify Forms with Nuxt. In this article I show you three examples of how to easily integrate them.","2024-04-24","WebDevelopment",null,{"raw":13,"text":163,"html":164},{"children":14},[15,20,24,37,42,46,55,67,71,76,80,84,88,92,103,107,111,115,119,123,127,131,137,141,145],{"type":16,"children":17},"paragraph",[18],{"text":19},"I love working with Nuxt. I love the simplicity it creates when building websites and apps using VueJS. Similarly, Netlify makes hosting easy and cost-effective. Netlify includes many built-in features that can supercharge your Nuxt app. One of them is Netlify Forms.",{"type":16,"children":21},[22],{"text":23},"Netlify Forms makes form submissions easy. Easy, but not necessarily stress-free. In this article, I want to show you three examples of integrating Netlify Forms with Nuxt. There are also a few gotchas that stumped me in some previous projects that I want to tell you about.",{"type":16,"children":25},[26,28,35],{"text":27},"I will include a ",{"href":29,"type":30,"children":31,"openInNewTab":34},"https://github.com/jackchristian1995/netlify-forms-nuxt","link",[32],{"text":33},"link to this tutorial's GitHub repository",true,{"text":36},". There, you can download all the code for reference.",{"type":38,"children":39},"heading-two",[40],{"text":41},"The easy way to integrate Netlify Forms with Nuxt",{"type":16,"children":43},[44],{"text":45},"In this example, we have a simple form. The form is for users to vote on their favourite JavaScript framework. The form consists of a text input for the user's name, a dropdown for their role and radio options for them to cast their vote.",{"src":47,"type":48,"title":49,"width":11,"handle":50,"height":11,"children":51,"mimeType":54},"https://eu-west-2.graphassets.com/ArmN0FQCgQUWLsdMZQplZz/JBLNGMXqSjudebtnAgrt","video","simple-nuxt-netlify-forms.mp4","JBLNGMXqSjudebtnAgrt",[52],{"text":53},"","video/mp4",{"type":16,"children":56},[57,59,65],{"text":58},"At present, this form will not integrate with Netlify Forms. We must add a few extra bits to the code for Netlify to recognise the form. As the ",{"href":60,"type":30,"children":61,"className":64,"openInNewTab":34},"https://docs.netlify.com/forms/setup/",[62],{"text":63},"Netlify Forms documentation","editor-rtfLink",{"text":66}," states, we must add the 'data-netlify' attribute to the form element. So we can recognise our form in the Netlify platform, we must name it. To do this, we add the 'name' attribute to the form element along with our chosen name. In this case, I called my form 'framework-votes'.",{"type":16,"children":68},[69],{"text":70},"The final step to initialise our form is to add a hidden input element in our form. This element means the form's name is included in the POST request. This way, Netlify knows where to store the submission.",{"type":72,"children":73},"code-block",[74],{"text":75},"\u003Cform action=\"/simple-netlify-form\" method=\"post\" enctype=\"application/x-www-form-urlencoded\" data-netlify=\"true\" name=\"framework-votes\">\n  \u003Cinput type=\"hidden\" name=\"form-name\" value=\"framework-votes\" />\n  \u003C!-- Form fields here --> \n\u003C/form>",{"type":16,"children":77},[78],{"text":79},"If we deploy our app now, Netlify can't detect it. This is because Netlify scans the HTML of our app before the JavaScript runs. Our form is created by JavaScript, so Netlify can't see it is there. To fix this, we must prerender our form. We configure prerendering in the 'nuxt.config.js' file under the 'nitro' object. Inside that object, we create a nested object named: 'prerender', and then inside that object, add an array named 'routes'. The routes array tells Nuxt which routes to prerender. In my case, the form is on the root page. So, I add '/' to my array. You will add the route for the page your form is on. For reference, here is my Nuxt configuration.",{"type":72,"children":81},[82],{"text":83},"export default defineNuxtConfig({\n  pages: true,\n  nitro: {\n    prerender: {\n        routes: [ '/', '/simple-netlify-form', '/ajax-netlify-form', '/conditional-rendering-netlify-form' ]\n    }\n  },\n  ...\n});",{"type":16,"children":85},[86],{"text":87},"Now, we can upload our form to Netlify. For the platform to auto-detect your form, navigate to the 'Forms' link in the sidebar in Netlify. You should be presented with the option to 'Enable form detection'. If you click that button, your form should be detected. If not, redeploying your site should prompt Netlify forms to find your form.",{"type":38,"children":89},[90],{"text":91},"How to use AJAX and Netlify Forms in a Nuxt app",{"type":16,"children":93},[94,96,101],{"text":95},"Using AJAX with Nuxt is relatively simple. Netlify does a great job of ",{"href":97,"type":30,"children":98,"className":64,"openInNewTab":34},"https://docs.netlify.com/forms/setup/#submit-javascript-rendered-forms-with-ajax",[99],{"text":100},"explaining it in the documentation",{"text":102},". In their example, they create a form data object and pass the form element as a parameter. In Nuxt, we can add a ref to the form element and pass that to the form data constructor.",{"type":16,"children":104},[105],{"text":106},"Occasionally, we may need to manipulate some of the form data before sending our POST request. In this case, we can maintain our form's state using a ref or reactive object. Using JSON makes it easier to manipulate our data. Before we send our request, we pass our data through a function to encode it in cURL format. The function will use an algorithm like the one denoted below.",{"type":72,"children":108},[109],{"text":110},"const encode = (data) => Object.keys(data).map(key => encodeURIComponent(key) + \"=\" + encodeURIComponent(data[key])).join(\"&\");",{"type":16,"children":112},[113],{"text":114},"Using AJAX to send our POST request allows us to add different response messages to the screen without reloading the page. See my example below of adding success and error messages based on the status of the POST request.",{"type":72,"children":116},[117],{"text":118},"\u003Ctemplate>\n  \u003Cform data-netlify=\"true\" name=\"toilet-votes\" @submit.prevent=\"handleSubmit\">\n    \u003C!-- Form fields here -->\n    \u003Cp class=\"response-message\" v-if=\"formResponse\">{{ formResponse }}\u003C/p>\n  \u003C/form>\n\u003C/template>\n \n\u003Cscript setup>\n// Form Submission\nconst formResponse = ref(null);\n\nconst handleSubmit = (e) => {\n  const { position, percent } = formEntries;\n  const formData = {\n    position,\n    percent,\n    'form-name': 'toilet-votes'\n  }\n\n  fetch('/conditional-rendering-netlify-form', {\n    method: 'POST',\n    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },\n    body: encode(formData)\n  })\n    .then(() => formResponse.value = 'Thank you for sharing.')\n    .catch((e) => formResponse.value = e.message);\n}\n\u003C/script>",{"type":38,"children":120},[121],{"text":122},"How to implement conditional rendering for Netlify Forms in Nuxt",{"type":16,"children":124},[125],{"text":126},"Finally, we have a slightly more complex implementation of Netlify Forms. For any seasoned VueJS Developer, this shouldn't be a challenge. Still, implementing this on my site caused a few issues. These took an afternoon to fix. That afternoon of banging my head against a brick wall prompted me to write this article. Hopefully, I can save someone else the same trouble.",{"type":16,"children":128},[129],{"text":130},"In this example, we conditionally render some fields. Watch the video below to see what I mean.",{"src":132,"type":48,"title":133,"width":11,"handle":134,"height":11,"children":135,"mimeType":54},"https://eu-west-2.graphassets.com/ArmN0FQCgQUWLsdMZQplZz/GDbDjphBT6ClVdpjfhb2","nuxt-conditional-rendering-netlify-forms.mp4","GDbDjphBT6ClVdpjfhb2",[136],{"text":53},{"type":16,"children":138},[139],{"text":140},"The trick to achieving this is to use v-show instead of v-if. When I first built a Netlify Form on Nuxt this way, I used v-if. That was a mistake. When using v-if, the conditional element is only added to the DOM when its condition passes. Otherwise, it does not exist. For Netlify to recognise our form, we must prerender it. If the conditional element is not in the DOM when it prerenders, Netlify does not know it exists and won't extract its data from our POST request. To avoid this issue, we use v-show. With v-show, the element is hidden from the user but still exists in the DOM. We must also remember to implement ARIA-hidden on the inactive element. Otherwise, the form will not work correctly for accessibility users.",{"type":38,"children":142},[143],{"text":144},"Answering my own question",{"type":16,"children":146},[147,149,154,156,161],{"text":148},"There is plenty of documentation around Netlify Forms. Not much of it is relevant to VueJS and Nuxt. Certainly not the latest versions, anyway. When troubleshooting my forms, I have had to shoehorn in various fixes from React and native HTML solutions. I felt it was time to collate my findings in a blog post. That way, anyone facing similar issues doesn't need to do the same digging I did. Moving forward, I intend to write more articles like this. Creating a knowledge base around my stack and ",{"href":150,"type":30,"children":151},"/work?type=development",[152],{"text":153},"front-end development experience",{"text":155}," may prove helpful to others using similar technology. If you have any further questions on this topic, don't hesitate to ",{"href":157,"type":30,"children":158},"mailto:contact@jackchristian.uk",[159],{"text":160},"contact me by email",{"text":162},".","I love working with Nuxt. I love the simplicity it creates when building websites and apps using VueJS. Similarly, Netlify makes hosting easy and cost-effective. Netlify includes many built-in features that can supercharge your Nuxt app. One of them is Netlify Forms.\\nNetlify Forms makes form submissions easy. Easy, but not necessarily stress-free. In this article, I want to show you three examples of integrating Netlify Forms with Nuxt. There are also a few gotchas that stumped me in some previous projects that I want to tell you about.\\nI will include a \\nlink to this tutorial's GitHub repository\\n. There, you can download all the code for reference.\\nThe easy way to integrate Netlify Forms with Nuxt\\nIn this example, we have a simple form. The form is for users to vote on their favourite JavaScript framework. The form consists of a text input for the user's name, a dropdown for their role and radio options for them to cast their vote.\\n\\nAt present, this form will not integrate with Netlify Forms. We must add a few extra bits to the code for Netlify to recognise the form. As the \\nNetlify Forms documentation\\n states, we must add the 'data-netlify' attribute to the form element. So we can recognise our form in the Netlify platform, we must name it. To do this, we add the 'name' attribute to the form element along with our chosen name. In this case, I called my form 'framework-votes'.\\nThe final step to initialise our form is to add a hidden input element in our form. This element means the form's name is included in the POST request. This way, Netlify knows where to store the submission.\\n\u003Cform action=\"/simple-netlify-form\" method=\"post\" enctype=\"application/x-www-form-urlencoded\" data-netlify=\"true\" name=\"framework-votes\">\n  \u003Cinput type=\"hidden\" name=\"form-name\" value=\"framework-votes\" />\n  \u003C!-- Form fields here --> \n\u003C/form>\\nIf we deploy our app now, Netlify can't detect it. This is because Netlify scans the HTML of our app before the JavaScript runs. Our form is created by JavaScript, so Netlify can't see it is there. To fix this, we must prerender our form. We configure prerendering in the 'nuxt.config.js' file under the 'nitro' object. Inside that object, we create a nested object named: 'prerender', and then inside that object, add an array named 'routes'. The routes array tells Nuxt which routes to prerender. In my case, the form is on the root page. So, I add '/' to my array. You will add the route for the page your form is on. For reference, here is my Nuxt configuration.\\nexport default defineNuxtConfig({\n  pages: true,\n  nitro: {\n    prerender: {\n        routes: [ '/', '/simple-netlify-form', '/ajax-netlify-form', '/conditional-rendering-netlify-form' ]\n    }\n  },\n  ...\n});\\nNow, we can upload our form to Netlify. For the platform to auto-detect your form, navigate to the 'Forms' link in the sidebar in Netlify. You should be presented with the option to 'Enable form detection'. If you click that button, your form should be detected. If not, redeploying your site should prompt Netlify forms to find your form.\\nHow to use AJAX and Netlify Forms in a Nuxt app\\nUsing AJAX with Nuxt is relatively simple. Netlify does a great job of \\nexplaining it in the documentation\\n. In their example, they create a form data object and pass the form element as a parameter. In Nuxt, we can add a ref to the form element and pass that to the form data constructor.\\nOccasionally, we may need to manipulate some of the form data before sending our POST request. In this case, we can maintain our form's state using a ref or reactive object. Using JSON makes it easier to manipulate our data. Before we send our request, we pass our data through a function to encode it in cURL format. The function will use an algorithm like the one denoted below.\\nconst encode = (data) => Object.keys(data).map(key => encodeURIComponent(key) + \"=\" + encodeURIComponent(data[key])).join(\"&\");\\nUsing AJAX to send our POST request allows us to add different response messages to the screen without reloading the page. See my example below of adding success and error messages based on the status of the POST request.\\n\u003Ctemplate>\n  \u003Cform data-netlify=\"true\" name=\"toilet-votes\" @submit.prevent=\"handleSubmit\">\n    \u003C!-- Form fields here -->\n    \u003Cp class=\"response-message\" v-if=\"formResponse\">{{ formResponse }}\u003C/p>\n  \u003C/form>\n\u003C/template>\n \n\u003Cscript setup>\n// Form Submission\nconst formResponse = ref(null);\n\nconst handleSubmit = (e) => {\n  const { position, percent } = formEntries;\n  const formData = {\n    position,\n    percent,\n    'form-name': 'toilet-votes'\n  }\n\n  fetch('/conditional-rendering-netlify-form', {\n    method: 'POST',\n    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },\n    body: encode(formData)\n  })\n    .then(() => formResponse.value = 'Thank you for sharing.')\n    .catch((e) => formResponse.value = e.message);\n}\n\u003C/script>\\nHow to implement conditional rendering for Netlify Forms in Nuxt\\nFinally, we have a slightly more complex implementation of Netlify Forms. For any seasoned VueJS Developer, this shouldn't be a challenge. Still, implementing this on my site caused a few issues. These took an afternoon to fix. That afternoon of banging my head against a brick wall prompted me to write this article. Hopefully, I can save someone else the same trouble.\\nIn this example, we conditionally render some fields. Watch the video below to see what I mean.\\n\\nThe trick to achieving this is to use v-show instead of v-if. When I first built a Netlify Form on Nuxt this way, I used v-if. That was a mistake. When using v-if, the conditional element is only added to the DOM when its condition passes. Otherwise, it does not exist. For Netlify to recognise our form, we must prerender it. If the conditional element is not in the DOM when it prerenders, Netlify does not know it exists and won't extract its data from our POST request. To avoid this issue, we use v-show. With v-show, the element is hidden from the user but still exists in the DOM. We must also remember to implement ARIA-hidden on the inactive element. Otherwise, the form will not work correctly for accessibility users.\\nAnswering my own question\\nThere is plenty of documentation around Netlify Forms. Not much of it is relevant to VueJS and Nuxt. Certainly not the latest versions, anyway. When troubleshooting my forms, I have had to shoehorn in various fixes from React and native HTML solutions. I felt it was time to collate my findings in a blog post. That way, anyone facing similar issues doesn't need to do the same digging I did. Moving forward, I intend to write more articles like this. Creating a knowledge base around my stack and \\nfront-end development experience\\n may prove helpful to others using similar technology. If you have any further questions on this topic, don't hesitate to \\ncontact me by email\\n.","\u003Cp>I love working with Nuxt. I love the simplicity it creates when building websites and apps using VueJS. Similarly, Netlify makes hosting easy and cost-effective. Netlify includes many built-in features that can supercharge your Nuxt app. One of them is Netlify Forms.\u003C/p>\u003Cp>Netlify Forms makes form submissions easy. Easy, but not necessarily stress-free. In this article, I want to show you three examples of integrating Netlify Forms with Nuxt. There are also a few gotchas that stumped me in some previous projects that I want to tell you about.\u003C/p>\u003Cp>I will include a \u003Ca target='_blank' title=\"https://github.com/jackchristian1995/netlify-forms-nuxt\" href=\"https://github.com/jackchristian1995/netlify-forms-nuxt\">link to this tutorial's GitHub repository\u003C/a>. There, you can download all the code for reference.\u003C/p>\u003Ch2>The easy way to integrate Netlify Forms with Nuxt\u003C/h2>\u003Cp>In this example, we have a simple form. The form is for users to vote on their favourite JavaScript framework. The form consists of a text input for the user's name, a dropdown for their role and radio options for them to cast their vote.\u003C/p>\u003Cvideo controls width=\"undefined\" height=\"undefined\">\n          \u003Csource src=\"https://eu-west-2.graphassets.com/ArmN0FQCgQUWLsdMZQplZz/JBLNGMXqSjudebtnAgrt\" type=\"video/mp4\" title=\"simple-nuxt-netlify-forms.mp4\" />\n          Sorry, your browser doesn't support embedded videos.\n        \u003C/video>\u003Cp>At present, this form will not integrate with Netlify Forms. We must add a few extra bits to the code for Netlify to recognise the form. As the \u003Ca class=\"editor-rtfLink\" target='_blank' title=\"https://docs.netlify.com/forms/setup/\" href=\"https://docs.netlify.com/forms/setup/\">Netlify Forms documentation\u003C/a> states, we must add the 'data-netlify' attribute to the form element. So we can recognise our form in the Netlify platform, we must name it. To do this, we add the 'name' attribute to the form element along with our chosen name. In this case, I called my form 'framework-votes'.\u003C/p>\u003Cp>The final step to initialise our form is to add a hidden input element in our form. This element means the form's name is included in the POST request. This way, Netlify knows where to store the submission.\u003C/p>\u003Cpre>\u003Ccode><form action="/simple-netlify-form" method="post" enctype="application/x-www-form-urlencoded" data-netlify="true" name="framework-votes">\n  <input type="hidden" name="form-name" value="framework-votes" />\n  <!-- Form fields here --> \n</form>\u003C/code>\u003C/pre>\u003Cp>If we deploy our app now, Netlify can't detect it. This is because Netlify scans the HTML of our app before the JavaScript runs. Our form is created by JavaScript, so Netlify can't see it is there. To fix this, we must prerender our form. We configure prerendering in the 'nuxt.config.js' file under the 'nitro' object. Inside that object, we create a nested object named: 'prerender', and then inside that object, add an array named 'routes'. The routes array tells Nuxt which routes to prerender. In my case, the form is on the root page. So, I add '/' to my array. You will add the route for the page your form is on. For reference, here is my Nuxt configuration.\u003C/p>\u003Cpre>\u003Ccode>export default defineNuxtConfig({\n  pages: true,\n  nitro: {\n    prerender: {\n        routes: [ '/', '/simple-netlify-form', '/ajax-netlify-form', '/conditional-rendering-netlify-form' ]\n    }\n  },\n  ...\n});\u003C/code>\u003C/pre>\u003Cp>Now, we can upload our form to Netlify. For the platform to auto-detect your form, navigate to the 'Forms' link in the sidebar in Netlify. You should be presented with the option to 'Enable form detection'. If you click that button, your form should be detected. If not, redeploying your site should prompt Netlify forms to find your form.\u003C/p>\u003Ch2>How to use AJAX and Netlify Forms in a Nuxt app\u003C/h2>\u003Cp>Using AJAX with Nuxt is relatively simple. Netlify does a great job of \u003Ca class=\"editor-rtfLink\" target='_blank' title=\"https://docs.netlify.com/forms/setup/#submit-javascript-rendered-forms-with-ajax\" href=\"https://docs.netlify.com/forms/setup/#submit-javascript-rendered-forms-with-ajax\">explaining it in the documentation\u003C/a>. In their example, they create a form data object and pass the form element as a parameter. In Nuxt, we can add a ref to the form element and pass that to the form data constructor.\u003C/p>\u003Cp>Occasionally, we may need to manipulate some of the form data before sending our POST request. In this case, we can maintain our form's state using a ref or reactive object. Using JSON makes it easier to manipulate our data. Before we send our request, we pass our data through a function to encode it in cURL format. The function will use an algorithm like the one denoted below.\u003C/p>\u003Cpre>\u003Ccode>const encode = (data) => Object.keys(data).map(key => encodeURIComponent(key) + "=" + encodeURIComponent(data[key])).join("&");\u003C/code>\u003C/pre>\u003Cp>Using AJAX to send our POST request allows us to add different response messages to the screen without reloading the page. See my example below of adding success and error messages based on the status of the POST request.\u003C/p>\u003Cpre>\u003Ccode><template>\n  <form data-netlify="true" name="toilet-votes" @submit.prevent="handleSubmit">\n    <!-- Form fields here -->\n    <p class="response-message" v-if="formResponse">{{ formResponse }}</p>\n  </form>\n</template>\n \n<script setup>\n// Form Submission\nconst formResponse = ref(null);\n\nconst handleSubmit = (e) => {\n  const { position, percent } = formEntries;\n  const formData = {\n    position,\n    percent,\n    'form-name': 'toilet-votes'\n  }\n\n  fetch('/conditional-rendering-netlify-form', {\n    method: 'POST',\n    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },\n    body: encode(formData)\n  })\n    .then(() => formResponse.value = 'Thank you for sharing.')\n    .catch((e) => formResponse.value = e.message);\n}\n</script>\u003C/code>\u003C/pre>\u003Ch2>How to implement conditional rendering for Netlify Forms in Nuxt\u003C/h2>\u003Cp>Finally, we have a slightly more complex implementation of Netlify Forms. For any seasoned VueJS Developer, this shouldn't be a challenge. Still, implementing this on my site caused a few issues. These took an afternoon to fix. That afternoon of banging my head against a brick wall prompted me to write this article. Hopefully, I can save someone else the same trouble.\u003C/p>\u003Cp>In this example, we conditionally render some fields. Watch the video below to see what I mean.\u003C/p>\u003Cvideo controls width=\"undefined\" height=\"undefined\">\n          \u003Csource src=\"https://eu-west-2.graphassets.com/ArmN0FQCgQUWLsdMZQplZz/GDbDjphBT6ClVdpjfhb2\" type=\"video/mp4\" title=\"nuxt-conditional-rendering-netlify-forms.mp4\" />\n          Sorry, your browser doesn't support embedded videos.\n        \u003C/video>\u003Cp>The trick to achieving this is to use v-show instead of v-if. When I first built a Netlify Form on Nuxt this way, I used v-if. That was a mistake. When using v-if, the conditional element is only added to the DOM when its condition passes. Otherwise, it does not exist. For Netlify to recognise our form, we must prerender it. If the conditional element is not in the DOM when it prerenders, Netlify does not know it exists and won't extract its data from our POST request. To avoid this issue, we use v-show. With v-show, the element is hidden from the user but still exists in the DOM. We must also remember to implement ARIA-hidden on the inactive element. Otherwise, the form will not work correctly for accessibility users.\u003C/p>\u003Ch2>Answering my own question\u003C/h2>\u003Cp>There is plenty of documentation around Netlify Forms. Not much of it is relevant to VueJS and Nuxt. Certainly not the latest versions, anyway. When troubleshooting my forms, I have had to shoehorn in various fixes from React and native HTML solutions. I felt it was time to collate my findings in a blog post. That way, anyone facing similar issues doesn't need to do the same digging I did. Moving forward, I intend to write more articles like this. Creating a knowledge base around my stack and \u003Ca title=\"/work?type=development\" href=\"/work?type=development\">front-end development experience\u003C/a> may prove helpful to others using similar technology. If you have any further questions on this topic, don't hesitate to \u003Ca title=\"mailto:contact@jackchristian.uk\" href=\"mailto:contact@jackchristian.uk\">contact me by email\u003C/a>.\u003C/p>",[166,169],{"id":167,"href":29,"openInNewTab":34,"title":168},"clvd7lbsuausn07mhgypp200e","Form Examples - Github Repository",{"id":170,"href":97,"openInNewTab":34,"title":171},"clvd9p99xblyr07mh4belxb40","Netlify Forms Documentation",{"data":173,"extensions":228},{"blogPosts":174},[175,181,186,191,196,202,207,212,218,223],{"id":176,"title":177,"slug":178,"postType":179,"datePublished":180},"cmocadbv6b2bi08mddi75of2h","The web industry is failing small businesses. Here’s how to protect yourself.","the-web-industry-is-failing-small-businesses-heres-how-to-protect-yourself","WebsitesAndBusiness","2026-04-24",{"id":182,"title":183,"slug":184,"postType":179,"datePublished":185},"cmo3g47a4bjcs07lc45bihk1y","How to make a succesful small business website in 2026?","how-to-make-a-succesful-small-business-website-in-2026","2026-04-18",{"id":187,"title":188,"slug":189,"postType":179,"datePublished":190},"cmf207jkodgby07l8gu4kg90w","How I use website strategy to grow my business","how-i-use-website-strategy-to-grow-my-business","2025-09-02",{"id":192,"title":193,"slug":194,"postType":179,"datePublished":195},"cmei3w1dxtgc207mor5hh5lqy","5 steps to more website leads for your small service business","5-steps-to-more-website-leads-for-your-small-service-business","2025-08-19",{"id":197,"title":198,"slug":199,"postType":200,"datePublished":201},"cme9oqq1ebr4p07laisk02qp4","My top 5 retro websites","my-top-5-retro-websites","IndustryInsights","2025-08-12",{"id":203,"title":204,"slug":205,"postType":179,"datePublished":206},"cmdo4jqdq99ai07lag1qbd054","Why your website needs a strategy and how to create one that works","why-your-website-needs-a-strategy-and-how-to-create-one-that-works","2025-07-29",{"id":208,"title":209,"slug":210,"postType":10,"datePublished":211},"cmde6qq19fypk06mmnshyeshc","How to tune-up a website","how-to-tune-up-a-website","2025-07-22",{"id":213,"title":214,"slug":215,"postType":216,"datePublished":217},"cmd48thie0al007l4jqj9ucqx","How to design a website: My web design process.","how-to-design-a-website-my-web-design-process","WebDesign","2025-07-15",{"id":219,"title":220,"slug":221,"postType":179,"datePublished":222},"cmck165woeqgm07lccx99jqae","Your guide to hosting a website in 2025","your-guide-to-hosting-a-website-in-2025","2025-07-01",{"id":224,"title":225,"slug":226,"postType":200,"datePublished":227},"cmc9ylvutfepd07l6pwavidii","My top 5 maximalist websites","my-top-5-maximalist-websites","2025-06-24",{"Complexity-Cost-Left":229,"Effective-Complexity-Limit":230},1999999999999986,2000000000000000,1781674291416]