Posts in Nuxt (3 found)
codedge 2 years ago

Nuxt 3: Good to know

When switching my personal website to Nuxt 3 I found myself looking and researching all the small things you need to tackle, besides the content, to make it fly. Sitemap, robots.txt, proper page titles, include 3rd party JS and so on. While there is a lot written about a general setup of Nuxt, most blogs almost never talk about these small things. You can find all of these tips in the repository codedge/codedge.de of this site. Most websites you a similar page title like this: For example: Let’s create that. Prerequisites In your you configure the central title content using the configuration: This adds the general part, in my case , to every title for each page. To add the specific title for a page, open one of your files in the directory and add to it. This is going to build a title like . You might want to load scripts, f. ex. tracking scripts, depending on your environment. I wanted to include the Plausible tracking script only on the production environment. In you you can do this: Make sure, you set your correctly according to your site. While including images in your repository might be a fast and straightforward solution you might want to consider using some image service like Cloudinary or Imgix as a central place for your images. I chose Cloudinary which is supported by the NuxtImage plugin. After setting things up you might want to use this in your Markdown files. Using or does unfortunately not work there. Wrapping this inside a Markdown Component (MDC) helps. Create a file in and Add With that in place you can use NuxtImage in your Markdown files by writing You want to serve a custom 404 page, properly styled, whenever a visitor hits an unknown sub-page of your site. Instead of customizing the file, as suggested by other people, I went for writing a custom component which only deals with the 404 error. Add a file and add the following: Additionally to the content itself, we modify the page title and returning a proper 404 http status code. I use this component in my file ( see here ) file. So whenever a request is matched by this catchall route, deliver the 404 page, as probably no other content was found. Currently neither Nuxt 3 or the Content module provides a way to generate a sitemap in the default installation. Luckily this is quick win to set up yourself. First, install the NPM package sitemap by running . Second, create a file with the content Don’t forget to update the hostname in the code. You can now open your sitemap at . You use the pages feature You have a central

web-development Web Development tutorial Tutorial Nuxt javascript JavaScript
0 views
Can ELMA 4 years ago

The multilingual part of my site built with Nuxt

In this article we'll inspect how the multilingual part of my website works. As seen below, I have defined only two languages. The translation files ( and ) for these languages are located in the folders. With the option set to true, the files will be loaded only when needed. This is not that important though as they are small size files. I disabled the option. Since the is set to , the language prefix will be added to the address for all languages except the default one: -> . There are two flag icons for the supported locales. The flag of the active locale becomes visible. Here's a working example: . Clicking a flag icon switches the locale. This makes more sense, as my site is only available in two languages. When changing language with , you can keep a record of the language being changed or check it on the new route. So if the URL that's visited after the language change gives a 404 error, you can show an error message saying that the page does not have a translated version in that language, instead of showing a regular 404 error message. When the language is changed, if it is not the default one, a language prefix will be added to the URL. Otherwise the language prefix will be removed. Below is the current folder structure I use for my site. From now on, whether you're checking for a post or fetching it, you should always include the language code in your query. There are some other details but I won't talk about them as they are directly related to the installation and use of the and modules. That's all. This is the entire custom structure I use on my site.

web-development Web Development Nuxt tutorial Tutorial
0 views
Can ELMA 4 years ago

Organizing .md files with timestamps in Nuxt

If you are using static site generators, you will be dealing with Markdown files with the extension. Confusion arises especially as the number of .md files increases. For example, let's see the following example: Wouldn't it be better if it was as below: The order is now more apparent, and we can easily see at a glance which files belong to which year or month. Now I will explain how we can create this structure in Nuxt. Let's start by making the following change. Now Nuxt will automatically remove the leading date when creating the for these files. This change necessitates another minor change. Normally, when visiting the path , we would find the corresponding file inside the folder using the part ( ) of that path: This is no longer possible as the relation between the and the filename is corrupted due to the change we made. We can solve this. You should fetch the content as below:

tutorial Tutorial web-development Web Development Nuxt
0 views