NuxtJS

The Intuitive Vue Framework

Information and concepts about the Nuxt.js Framework, see Nuxt.js docs for more indepth information

Lets get the party started

$ npm init nuxt-app {project-name}

Project Name: {project-name}
Programming language: JavaScript
Package manager: Npm
UI Framework: Tailwind CSS
Nuxt.js modules: Axios
Linting tools: None or ESLint Testing Framework: None
Rendering mode: Single Page App
Server: Static
Deployment tools: jsconfig.json
Continuous integration: None
Version control system: Git

Create folders

• assets/
• assets/less
• assets/css

Notice that there are some special directorys

Enable file-watchers "less" or other pre-processor engine to transpile your less files

//assets/less/main.less

@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;400');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue');


body {
  p {
    &.debug {
      border-left: 2px solid red;
      padding-right: 5px;
    }
  }
}

Add your (compiled) css file to nuxtjs.config.js

//nuxtjs.config.js

css: [
    '@/assets/css/main.css',
  ],

Add tailwindcss config file

$ npx tailwindcss init

//tailwind.config.js

module.exports = {
  purge: {
    content: [
      `components/**/*.{vue,js}`,
      `layouts/**/*.vue`,
      `pages/**/*.vue`,
      `plugins/**/*.{js,ts}`,
      `nuxt.config.{js,ts}`
    ]
  },
  darkMode: false, // or 'media' or 'class'
  theme: {
    fontFamily: {
      sans: ['Roboto Condensed', 'sans-serif'],
      serif: ['Roboto Slab', 'serif'],
      display: ['Bebas Neue', 'cursive'],
    },
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Fontawesome support: This way provides only free Icons

$ npm install nuxt-fontawesome   
$ npm install @fortawesome/fontawesome-svg-core @fortawesome/free-brands-svg-icons @fortawesome/free-solid-svg-icons @fortawesome/vue-fontawesome

Add new module to nuxt.config.js

//nuxt.config.js

moules: [
[
      'nuxt-fontawesome',
      {
        component: 'fa',
        imports: [
          {
            set: '@fortawesome/free-solid-svg-icons',
            icons: ['fas']
          },
          {
            set: '@fortawesome/free-brands-svg-icons',
            icons: ['fab']
          }
        ]
      }
    ]
]

Use font-awesome in your files

<fa :icon="['fas', 'hashtag']" />
<fa :icon="['fas', 'twitter']" />

Remove a package, f.e. the linter, from your vue project use

$ npm remove eslint