<template>
  <main>
    <h1>Home page</h1>
    <NuxtLink to="/about">
      About (internal link that belongs to the Nuxt App)
    </NuxtLink>
    <a href="https://nuxtjs.org">External Link to another page</a>
  </main>
</template>

// nuxt.config.js

export default {
  router: {
    mode: 'hash'
  }
}

<template>
  <p v-if="$fetchState.pending">Fetching mountains...</p>
  <p v-else-if="$fetchState.error">An error occurred :(</p>
  <div v-else>
    <h1>Nuxt Mountains</h1>
    <ul>
      <li v-for="mountain of mountains">{{ mountain.title }}</li>
    </ul>
    <button @click="$fetch">Refresh</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        mountains: []
      }
    },
    async fetch() {
      this.mountains = await fetch(
        'https://api.nuxtjs.dev/mountains'
      ).then(res => res.json())
    }
  }
</script>

// nuxt.config.js

export default {
  modules: [
    ['@nuxt/http', {
      baseURL: 'https://api.nuxtjs.dev/'
    }]
  ]
}

<!-- pages/index.vue -->

<template>
  <div>
    <h1>{{ mountain.slug }}</h1>
    <img :src="mountain.image" :alt="mountain.slug">
  </div>
</template>

<script>
  export default {
    name: 'index', 
    async asyncData({ $http }) {
      const mountain = await $http.$get('/mountains/aconcagua') // https://api.nuxtjs.dev/mountains/aconcagua
      return { mountain }
    }
  }
</script>

assets
│
└─── scss
    │
    └─── _mixins.scss
    │
    └─── breakpoints.scss

// breakpoints.scss


/* Small (sm) */
$screen-sm-min: 640px;

/* Medium (md) */
$screen-md-min: 768px;

/* Large (lg) */
$screen-lg-min: 1024px;

/* Extra Large (xl) */
$screen-xl-min: 1280px;

/* Fluid */
$screen-fluid-min: 1536px;
```
{% endraw %}
{% raw %}`

Now it’s time to create the most important element – mixins:
`{% endraw %}
{% raw %}
```scss
// _mixins.scss


// Small devices
@mixin  sm {
  @media (min-width: #{$screen-sm-min}) {
    @content;
  } 
}

// Medium devices
@mixin  md {
  @media (min-width: #{$screen-md-min}) {
    @content;
  } 
}

// Large devices
@mixin  lg {
  @media (min-width: #{$screen-lg-min}) {
    @content;
  } 
}

// Extra large devices
@mixin  xl {
  @media (min-width: #{$screen-xl-min}) {
    @content;
  } 
}

// Extra large devices
@mixin  fluid {
  @media (min-width: #{$screen-fluid-min}) {
    @content;
  } 
}
```
{% endraw %}
{% raw %}`

I always build my websites in a mobile-first approach, so I don’t need to define the smallest screen size (xs – extra small) and I write my SCSS code first for the smallest devices and next for the largest. Sometimes we also need to define some styles beyond the rigidly defined breakpoints. Let’s add one more mixin – I called it “rwd”:
`{% endraw %}
{% raw %}
```scss
// _mixins.scss


// Custom devices
@mixin rwd($screen) {
  @media (min-width: $screen+'px') {
    @content;
  }
}
```
{% endraw %}
{% raw %}`
As a parameter `{% endraw %}$screen{% raw %}` we can put any screen size.

### For Example
`{% endraw %}
{% raw %}
```css
.container {
    padding: 0 15px;

    /* 576px window width and more */
    @include sm {
        padding: 0 20px;
    }

    /* 992px window width and more */
    @include lg {
        margin-left: auto;
        margin-right: auto;
        max-width: 1100px;
    }

    /* 1400px window width and more */
    @include rwd(1400) {
        margin-bottom: 20px;
        margin-top: 20px;
    }
}
```
{% endraw %}
{% raw %}`

## 💬 Nuxt-i18n
Nuxt-I18n is the Vue.js internationalization plugin optimized for using in Nuxt.js. The configuration of the languages is defined in the `{% endraw %}{% raw %}`nuxt.config.js`{% endraw %}{% raw %}` file:
`{% endraw %}{% raw %}``js
// nuxt.config.js

{
  modules: [
    'nuxt-i18n'
  ],
  i18n: {
    locales: [
      {
        code: 'en',
        iso: 'en-US',
        name: 'English',
      },
      {
        code: 'nl',
        iso: 'nl-NL',
        name: 'Dutch',
      }
    ],
    defaultLocale: 'en',
    vueI18n: {
      fallbackLocale: 'en',
      messages: {
        en: require('./locales/en.json'),
        nl: require('./locales/nl.json')
      }
    }
  }
}
``{% endraw %}{% raw %}`
The locales are located in the `{% endraw %}{% raw %}`~/locales`{% endraw %}{% raw %}` folder:
`{% endraw %}
{% raw %}
```
locales
│
└─── en.json
│
└─── nl.json
```
{% endraw %}
{% raw %}`
`{% endraw %}
{% raw %}
```json
// nl.json

{
  "welcome": "Een boilerplate voor single page application gebasserd op Nuxt.js"
}
```
{% endraw %}
{% raw %}`
`{% endraw %}
{% raw %}
```json
// en.json

{
  "welcome": "A boilerplate for single page applications based on Nuxt.js"
}
```
{% endraw %}
{% raw %}`

When rendering internal links in your app using `{% endraw %}<nuxt-link>{% raw %}`, you need to get proper URLs for the current locale. To do this, **nuxt-i18n** registers a global mixin that provides some helper functions:
-   `{% endraw %}localePath{% raw %}`  – Returns the localized URL for a given page. The first parameter can be either the path or name of the route or an object for more complex routes. A locale code can be passed as the second parameter to generate a link for a specific language:
`{% endraw %}{% raw %}`` vue
<nuxt-link :to="localePath('/')">{{ $t('home') }}</nuxt-link>
<nuxt-link :to="localePath('index', 'en')">Homepage in English</nuxt-link>
<nuxt-link :to="localePath('/app/profile')">Route by path to: {{ $t('Profile') }}</nuxt-link>
<nuxt-link :to="localePath('app-profile')">Route by name to: {{ $t('Profile') }}</nuxt-link>
<nuxt-link
  :to="localePath({ name: 'category-slug', params: { slug: category.slug } })">
  {{ category.title }}
</nuxt-link>
<!-- It's also allowed to omit 'name' and 'path'. -->
<nuxt-link :to="localePath({ params: { slug: 'ball' } })">{{ category.title }}</nuxt-link>
```
-   `switchLocalePath`  – Returns a link to the current page in another language:
``` vue
<nuxt-link :to="switchLocalePath('en')">English</nuxt-link>
<nuxt-link :to="switchLocalePath('fr')">Français</nuxt-link>
```
Template:
```html 
<p>{{ $t('welcome') }}</p>
``` 
Output:
```html 
<p>A boilerplate for single page applications based on Nuxt.js</p>
``` 
## 🗛 Fonts
There are two standard declarations for the font types:
`

```css
/* standard declrations */
h1,h2,h3,h4,h5,h6 {
  font-family: 'DM sans';
}
body {
  font-family: 'Arial';
}
```

`

These font-families are defined in the same file `font.css`:
`

```css
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('~assets/fonts/DM-Sans/DMSans-Regular.ttf') format('truetype');
}
```

`
If you wanna use a different font family in a specified component you can use another specified font in from the `font.css` inside the `<style lang="scss" scoped></style>` of the `.vue` component

## 🌗 Dark & Light theme
🌑 Dark and 🌕 Light mode with auto detection made easy with the plugin `nuxt/color-mode`. 

### Note
If you don't need a dark/sepia/light mode you can always disable it by commenting this line in `{% endraw %}nuxt.config.js{% raw %}`:
`{% endraw %}
{% raw %}
```js
modules: [
  '@nuxtjs/color-mode'
],
```
{% endraw %}
{% raw %}`

### Theme file
The main theme file, located in `{% endraw %}css/theme.css{% raw %}` contains all css rules specific for `{% endraw %}nuxtjs/color-mode{% raw %}`. In the `{% endraw %}theme.css{% raw %}` you declare all color variables per theme. So for example:

`{% endraw %}
{% raw %}
```css
:root {
  --bg-color: #ffffff;
}

.dark-mode {
  --bg-color: #21252b;
}

body {
  background-color: var(--bg-color);
  transition: background-color .3s;
}
```
{% endraw %}
{% raw %}`

### Important
We use [PurgeCSS](https://github.com/FullHuman/purgecss) for removing unused CSS selectors to optimize the performance of the web application. But PurgeCSS will delete all css rules of the theme(s) that are not selected.
To resolve this issue you'll have to add the theme classes in to the white list of PurgeCSS. So for example:
`

```js
//nuxt.config.js

purgeCSS: {
  whiteList: () =>['dark-mode']
},
```

`
Now PurgeCSS will ignore those classes by removing the unused CSS selectors