-> related issue

It hink in most modern sites it is nice to have access to our breakpoints inside vue files. We could use:

• css custom properties?
• nuxt-mq, as done here and here

TBD.

We should decide whether we want trailing slashes in our urls or not (or add a config option). So we can force trailing slashes or remove them. There should be 301 redirects in place.

Things to consider:

• When using matomo (or other analytics) there should be only one version of pages. Either with or without trailing slashes. Otherwise both versions appear in the stats.
• Canonical urls should always point to the correct url version. Adding a debug log that always prints out the canonical link (and rel lang links or other important info likely to cause trouble) would be nice to have.
• Static hosting platforms (i.e. Netlify) should always redirect to the correct url version. Currently this is a bit tricky with Netlify (see fischer97.ch) but for self-hosted static sites it should be pretty easy to configure apache/nginx.
• Links within rich text fields from a cms should point to the correct url version.
• If we use vue-link to render link fields from craft, there is an option to add or remove trailing slashes by using ForNuxtAddSlash or ForNuxtStripSlash respectively.
• All nuxt-links should point to the correct version
• There is a trailing slash option for router and sitemap module in nuxt.config.js but apparently it's not considered best practice to force a setting for static sites. We need to check this again.
• Add one config to rule them all: trailingSlashes: false/true and use it project-wide instead of adding custom configs everywhere this has to be configured.

frontend-boilerplate and backend-boilerplate repos could be renamed. If we do this, we should also update:

• all env variables
• netlify
• tajo (domain)
• deploybot

If we keep adding these boilerplates we could switch to some prefixed and versioned versions that also reflect the tech stack, for example:

• lucid-boilerplate-nuxt-2021
• lucid-boilerplate-craft-2021

This would allow us to add repos in the future like:

• lucid-boilerplate-nuxt-ts-2022
• lucid-boilerplate-craft-2023

New version with neat documentation is live: https://image.nuxtjs.org/

• check and refactor

Current issue

Craft previews for German pages redirect to English locale if detectBrowserLanguage is enabled. But only for homepages if onlyOnRoot is set. nuxt-i18n config:

detectBrowserLanguage: {
  onlyOnRoot: true,
  useCookie: true,
},

Possible solution if we need browser lang detection

Create a separate deployment to use as a preview target and add some env variable to disable the option. Also it would not be necessary to generate all the pages and the sitemap for this preview-only deployment.

Links/Inspiration

• https://nuxtjs.org/blog/going-full-static/#preview-mode
• https://wbrowar.com/article/code/craft-cms-live-preview-with-nuxt-js/
• https://craftcms.stackexchange.com/questions/22045/live-preview-using-vue-js/31039
• https://nystudio107.com/blog/headless-preview-in-craft-cms

Issue with i18n and live preview inside iframe

Because of i18n's browser language detection feature the preview for translated pages gets redirected to the default lang. It has something to do with the cookie that's being set. Read more about it in the official docs. I was able to get it working by adding the following settings to nuxt.config.js:

  i18n: {
    detectBrowserLanguage: {
      useCookie: true,
      cookieCrossOrigin: true,
      onlyOnRoot: true,
    },
  },

This kinda works but sometimes the page won't get updated. Data fetching works, but UI does not get updated. So for now I just disabled it like:

  i18n: {
    detectBrowserLanguage: false,
  },

The best solution for this would be to disable the feature entirely for previews, but currently there it seems like there is no way to do this from a plugin for example. Would be nice to just call app.i18n.disableCookies() or something inside of our preview plugin if we detect a preview.

TODO:

• Currently preview doesn't work (data not being updated and $craftLivePreview not being set) for home pages (de and en)
• Doesn't work on production env

Configure preview target in Craft

We should aim for a solution that works with the default preview target {url} for sections in Craft.
If we need the language or the site handle for any reason, we can add them like: {url}?language={site.language}&siteHandle={site.handle}.

• How to handle sites with only one language? Should be as easy as removing the nuxt i18n module.
• Does it still work with more than two languages? Probably.

https://github.com/wearelucid/zfv-gastro-unibe/blob/main/graphql/scripts/fetchRoutesToBeGenerated.js#L14

This is how things look more or less correct.
In the boilerplate:
we have this:
https://github.com/wearelucid/lucid-nuxt-2021/blob/main/graphql/scripts/fetchRoutesToBeGenerated.js#L14

When generating you get this error:

Fetching routes to generate from http://zfv-cms.nitro/api > 17:29:21

ERROR TypeError: Cannot read properties of null (reading 'match') >17:29:22

at _default (graphql/scripts/fetchRoutesToBeGenerated.js:36:11)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async routes (nuxt.config.js:101:25)
at async AsyncCache.load [as _load] (node_modules/@nuxtjs/sitemap/lib/cache.js:18:22)

Instead of wasting 10min of debugging an error message here:
https://github.com/wearelucid/lucid-nuxt-2021/blob/main/graphql/scripts/fetchRoutesToBeGenerated.js#L36

with a hint just like above
"❌ Couldn't get routes from CMS. Is API_URL defined in .env and your GraphQL endpoint working?"
woudl be awesome.

Only after yarn generate and yarn start previews start to work locally:
https://nuxtjs.org/docs/features/live-preview/
-> enablePreview should be tested locally with yarn start and not yarn dev

This could maybe be indicated as default text in the preview bar:

Then it can't be missed!

Either this or let the ThePreviewIndicator throw a warning/error, if process.env.NODE_ENV is development.

Let's add a custom error page.

Things to consider:

• The link back to the homepage sometimes didn't work in some of our sites. So maybe it's best to render an tag that points to the frontend url. This would ensure that the app get's initialised properly.
• Components in the default layout (i.e. navigation, footer, etc.) should work correctly. I some of our previous sites these things were broken in the generated version of the app.

Component to render link fields from craft. Could be a wrapper for something like this.

• Inspired by ufo
• Written in TypeScript
• Tests? Build, Publish? Github Actions?

http://localhost:3000/test-seite
vs.
https://lucid-nuxt-2021.netlify.app/test-seite

Hey!

Just a thought: wouldn't it make sense to include the standard iPad in the medium breakpoint?
https://github.com/wearelucid/lucid-nuxt-2021/blob/main/configs/breakpoints.json#L5

I suggest changing 834px to 768px. Or do you think that 768px is too close to 375px?

Cheers

Maybe there is a nicer way we can handle the @use imports of variables across components .scss files, for example here.

The navigation craft plugin looks promising. Probably worth to take it for a spin.

Pass in data from SEOmatic and render the tags.

Things to consider:

• Canonical urls
• Lang links for multilang sites

• Should work with Craft structure
• Should work with local static files

https://image.nuxtjs.org/nuxt-image

Should we add a vuex store by default?

As described here