├── dotenv-example
├── .prettierrc
├── static
    ├── favicon.ico
    └── README.md
├── .npmrc
├── components
    ├── global
    │   ├── MbBox.vue
    │   ├── MbParagraph.vue
    │   ├── MbIcon.vue
    │   ├── MbHeading.vue
    │   ├── MbLink.vue
    │   └── MbButton.vue
    ├── README.md
    └── Footer.vue
├── fontawesome.config.js
├── pages
    ├── other.vue
    ├── index.vue
    ├── jokes.vue
    └── demo.vue
├── jsconfig.json
├── .editorconfig
├── layouts
    ├── README.md
    └── default.vue
├── assets
    └── README.md
├── plugins
    └── README.md
├── .eslintrc.js
├── middleware
    └── README.md
├── store
    └── README.md
├── package.json
├── tailwind.config.js
├── README.md
├── .gitignore
└── nuxt.config.js


/dotenv-example:
--------------------------------------------------------------------------------
1 | FONTAWESOME_NPM_AUTH_TOKEN=


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "semi": false,
3 |   "singleQuote": true
4 | }
5 | 


--------------------------------------------------------------------------------
/static/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themarcba/nuxt-template/HEAD/static/favicon.ico


--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | @fortawesome:registry=https://npm.fontawesome.com/
2 | //npm.fontawesome.com/:_authToken=${FONTAWESOME_NPM_AUTH_TOKEN}


--------------------------------------------------------------------------------
/components/global/MbBox.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div class="bg-elevatedSurface text-primary rounded-md shadow-md p-4">
3 |     <slot />
4 |   </div>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/fontawesome.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   icons: {
3 |     solid: ['faChevronRight', 'faChevronLeft', 'faHeart'],
4 |     brands: ['faGithub'],
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/pages/other.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <main>
 3 |     <mb-link :to="{ name: 'index' }">Back to main site</mb-link>
 4 |   </main>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {}
 9 | </script>
10 | 
11 | <style></style>
12 | 


--------------------------------------------------------------------------------
/components/README.md:
--------------------------------------------------------------------------------
1 | # COMPONENTS
2 | 
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 | 
5 | The components directory contains your Vue.js Components.
6 | 
7 | _Nuxt.js doesn't supercharge these components._
8 | 


--------------------------------------------------------------------------------
/components/Footer.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <footer class="text-secondary text-center py-3">
3 |     Made with <mb-icon icon="heart" type="solid" /> by
4 |     <mb-link href="https://twitter.com/themarcba" inverted>Marc Backes</mb-link>
5 |   </footer>
6 | </template>
7 | 


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "baseUrl": ".",
 4 |     "paths": {
 5 |       "~/*": ["./*"],
 6 |       "@/*": ["./*"],
 7 |       "~~/*": ["./*"],
 8 |       "@@/*": ["./*"]
 9 |     }
10 |   },
11 |   "exclude": ["node_modules", ".nuxt", "dist"]
12 | }
13 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | charset = utf-8
 9 | trim_trailing_whitespace = true
10 | insert_final_newline = true
11 | 
12 | [*.md]
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/layouts/README.md:
--------------------------------------------------------------------------------
1 | # LAYOUTS
2 | 
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 | 
5 | This directory contains your Application Layouts.
6 | 
7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts).
8 | 


--------------------------------------------------------------------------------
/assets/README.md:
--------------------------------------------------------------------------------
1 | # ASSETS
2 | 
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 | 
5 | This directory contains your un-compiled assets such as LESS, SASS, or JavaScript.
6 | 
7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked).
8 | 


--------------------------------------------------------------------------------
/plugins/README.md:
--------------------------------------------------------------------------------
1 | # PLUGINS
2 | 
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 | 
5 | This directory contains Javascript plugins that you want to run before mounting the root Vue.js application.
6 | 
7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/plugins).
8 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     browser: true,
 5 |     node: true,
 6 |   },
 7 |   parserOptions: {
 8 |     parser: 'babel-eslint',
 9 |   },
10 |   extends: [
11 |     '@nuxtjs',
12 |     'plugin:prettier/recommended',
13 |     'plugin:nuxt/recommended',
14 |   ],
15 |   plugins: [],
16 |   // add your custom rules here
17 |   rules: {},
18 | }
19 | 


--------------------------------------------------------------------------------
/components/global/MbParagraph.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <p :class="elementClasses" class="my-4">
 3 |     <slot />
 4 |   </p>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   props: {
10 |     secondary: { type: Boolean, default: false },
11 |   },
12 |   computed: {
13 |     elementClasses() {
14 |       return this.secondary ? 'text-secondary' : 'text-primary'
15 |     },
16 |   },
17 | }
18 | </script>
19 | 


--------------------------------------------------------------------------------
/middleware/README.md:
--------------------------------------------------------------------------------
1 | # MIDDLEWARE
2 | 
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 | 
5 | This directory contains your application middleware.
6 | Middleware let you define custom functions that can be run before rendering either a page or a group of pages.
7 | 
8 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing#middleware).
9 | 


--------------------------------------------------------------------------------
/store/README.md:
--------------------------------------------------------------------------------
 1 | # STORE
 2 | 
 3 | **This directory is not required, you can delete it if you don't want to use it.**
 4 | 
 5 | This directory contains your Vuex Store files.
 6 | Vuex Store option is implemented in the Nuxt.js framework.
 7 | 
 8 | Creating a file in this directory automatically activates the option in the framework.
 9 | 
10 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store).
11 | 


--------------------------------------------------------------------------------
/static/README.md:
--------------------------------------------------------------------------------
 1 | # STATIC
 2 | 
 3 | **This directory is not required, you can delete it if you don't want to use it.**
 4 | 
 5 | This directory contains your static files.
 6 | Each file inside this directory is mapped to `/`.
 7 | Thus you'd want to delete this README.md before deploying to production.
 8 | 
 9 | Example: `/static/robots.txt` is mapped as `/robots.txt`.
10 | 
11 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#static).
12 | 


--------------------------------------------------------------------------------
/components/global/MbIcon.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <font-awesome-icon :icon="[iconType, icon]" />
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |   props: {
 8 |     type: { type: String, default: 'regular' },
 9 |     icon: { type: String, required: true },
10 |   },
11 |   computed: {
12 |     iconType() {
13 |       const iconTypeMap = {
14 |         solid: 'fas',
15 |         regular: 'far',
16 |         brand: 'fab',
17 |       }
18 |       return iconTypeMap[this.type]
19 |     },
20 |   },
21 | }
22 | </script>


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <main class="flex items-center justify-center flex-1">
 3 |     <section>
 4 |       <mb-heading accent>Nuxt Template</mb-heading>
 5 |       <mb-heading :level="2">
 6 |         Nuxt + Tailwind + FontAwesome + Google Fonts
 7 |       </mb-heading>
 8 | 
 9 |       <mb-paragraph>
10 |         Everything with some predefined components for the most important tasks.
11 |       </mb-paragraph>
12 |       <mb-button :to="{ name: 'demo' }">
13 |         Check out the component demo
14 |         <mb-icon icon="chevron-right" type="solid" />
15 |       </mb-button>
16 |       <mb-button :to="{ name: 'jokes' }">
17 |         Check out an API example <mb-icon icon="chevron-right" type="solid" />
18 |       </mb-button>
19 |       <mb-link href="https://github.com/themarcba/nuxt-template" boxed inverted>
20 |         Check out the repository
21 |         <mb-icon icon="github" type="brand" />
22 |       </mb-link>
23 |     </section>
24 |   </main>
25 | </template>
26 | 
27 | <style>
28 | .test {
29 |   align-items: center;
30 |   justify-content: center;
31 | }
32 | </style>
33 | 


--------------------------------------------------------------------------------
/components/global/MbHeading.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <h1 v-if="level === 1" :class="elementClasses"><slot /></h1>
 3 |   <h2 v-else-if="level === 2" :class="elementClasses"><slot /></h2>
 4 |   <h3 v-else-if="level === 3" :class="elementClasses"><slot /></h3>
 5 |   <h4 v-else-if="level === 4" :class="elementClasses"><slot /></h4>
 6 |   <h5 v-else :class="elementClasses"><slot /></h5>
 7 | </template>
 8 | 
 9 | <script>
10 | export default {
11 |   props: {
12 |     level: { type: Number, default: 1 },
13 |     accent: { type: Boolean, default: false },
14 |     primary: { type: Boolean, default: false },
15 |     secondary: { type: Boolean, default: false },
16 |   },
17 |   computed: {
18 |     elementClasses() {
19 |       const shared = ['font-bold']
20 |       if (this.accent) shared.push('text-accent')
21 |       else if (this.primary) shared.push('text-primary')
22 |       else if (this.secondary) shared.push('text-secondary')
23 |       if (this.level === 1) return [...shared, 'text-2xl']
24 |       if (this.level === 2) return [...shared, 'text-xl']
25 |       if (this.level === 3) return [...shared, 'text-lg']
26 |       if (this.level === 4) return [...shared, 'text-base']
27 |       else return shared
28 |     },
29 |   },
30 | }
31 | </script>
32 | 


--------------------------------------------------------------------------------
/layouts/default.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="h-screen flex flex-col">
 3 |     <Nuxt />
 4 |     <Footer />
 5 |   </div>
 6 | </template>
 7 | 
 8 | <style>
 9 | html {
10 |   font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',
11 |     Roboto, 'Helvetica Neue', Arial, sans-serif;
12 |   font-size: 16px;
13 |   word-spacing: 1px;
14 |   -ms-text-size-adjust: 100%;
15 |   -webkit-text-size-adjust: 100%;
16 |   -moz-osx-font-smoothing: grayscale;
17 |   -webkit-font-smoothing: antialiased;
18 |   box-sizing: border-box;
19 | }
20 | 
21 | *,
22 | *::before,
23 | *::after {
24 |   box-sizing: border-box;
25 |   margin: 0;
26 | }
27 | 
28 | .button--green {
29 |   display: inline-block;
30 |   border-radius: 4px;
31 |   border: 1px solid #3b8070;
32 |   color: #3b8070;
33 |   text-decoration: none;
34 |   padding: 10px 30px;
35 | }
36 | 
37 | .button--green:hover {
38 |   color: #fff;
39 |   background-color: #3b8070;
40 | }
41 | 
42 | .button--grey {
43 |   display: inline-block;
44 |   border-radius: 4px;
45 |   border: 1px solid #35495e;
46 |   color: #35495e;
47 |   text-decoration: none;
48 |   padding: 10px 30px;
49 |   margin-left: 15px;
50 | }
51 | 
52 | .button--grey:hover {
53 |   color: #fff;
54 |   background-color: #35495e;
55 | }
56 | </style>
57 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nuxt-starter",
 3 |   "version": "1.0.3",
 4 |   "author": {
 5 |     "name": "Marc Backes",
 6 |     "email": "hello@marc.dev",
 7 |     "url": "https://marc.dev"
 8 |   },
 9 |   "private": true,
10 |   "scripts": {
11 |     "dev": "nuxt",
12 |     "build": "nuxt build",
13 |     "start": "nuxt start",
14 |     "generate": "nuxt generate",
15 |     "lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
16 |     "lint": "yarn lint:js"
17 |   },
18 |   "dependencies": {
19 |     "@nuxtjs/axios": "^5.13.1",
20 |     "@nuxtjs/google-fonts": "^1.3.0",
21 |     "core-js": "^3.9.1",
22 |     "nuxt": "^2.15.3"
23 |   },
24 |   "devDependencies": {
25 |     "@fortawesome/free-brands-svg-icons": "^5.15.3",
26 |     "@fortawesome/free-solid-svg-icons": "^5.15.3",
27 |     "@nuxtjs/eslint-config": "^6.0.0",
28 |     "@nuxtjs/eslint-module": "^3.0.2",
29 |     "@nuxtjs/fontawesome": "^1.1.2",
30 |     "@nuxtjs/tailwindcss": "^4.0.1",
31 |     "babel-eslint": "^10.1.0",
32 |     "eslint": "^7.22.0",
33 |     "eslint-config-prettier": "^8.1.0",
34 |     "eslint-plugin-nuxt": "^2.0.0",
35 |     "eslint-plugin-prettier": "^3.3.1",
36 |     "eslint-plugin-vue": "^7.7.0",
37 |     "nuxt-vite": "^0.1.0",
38 |     "postcss": "^8.2.8",
39 |     "prettier": "^2.2.1"
40 |   }
41 | }
42 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | const defaultTheme = require('tailwindcss/defaultTheme')
 2 | 
 3 | module.exports = {
 4 |   theme: {
 5 |     // Custom font sizes
 6 |     fontSize: {
 7 |       xs: '.8rem',
 8 |       sm: '1rem',
 9 |       tiny: '1rem',
10 |       base: '1.2rem',
11 |       lg: '1.4rem',
12 |       xl: '1.75rem',
13 |       '2xl': '2rem',
14 |       '3xl': '2.2rem',
15 |       '4xl': '2.7rem',
16 |       '5xl': '3rem',
17 |       '6xl': '4rem',
18 |       '7xl': '5rem',
19 |     },
20 | 
21 |     extend: {
22 |       // You can cefine colors here, you can then access as
23 |       // bg-accent, text-accentContrast, border-secondary, etc
24 |       colors: {
25 |         surface: '#fff',
26 |         elevatedSurface: '#f9f3ff',
27 |         accent: '#8213b4',
28 |         accentContrast: '#fff',
29 |         primary: '#000',
30 |         secondary: '#777',
31 |         success: '#2ecc71',
32 |         danger: '#e74c3c',
33 |         warning: '#e67e22',
34 |         info: '#3498db',
35 |       },
36 |       fontFamily: {
37 |         // You can define fonts here
38 |         sans: ['Asap', ...defaultTheme.fontFamily.sans],
39 |         serif: ['Glegoo', ...defaultTheme.fontFamily.serif],
40 |       },
41 |     },
42 |     variants: {
43 |       background: ['responsive', 'hover', 'focus', 'active', 'group-hover'],
44 |     },
45 |   },
46 | }
47 | 


--------------------------------------------------------------------------------
/pages/jokes.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="flex-1">
 3 |     <mb-button :to="{ name: 'index' }">
 4 |       <mb-icon icon="chevron-left" type="solid" /> Back to home
 5 |     </mb-button>
 6 | 
 7 |     <div class="jokes flex flex-col items-center">
 8 |       <mb-heading accent>Jokes</mb-heading>
 9 | 
10 |       <mb-button @click="fetchJokes">Fetch jokes</mb-button>
11 |       <div v-show="!jokes.length" class="my-4">Loading jokes...</div>
12 |       <div v-show="jokes.length">
13 |         <mb-box v-for="joke in jokes" :key="joke.id" class="m-6">
14 |           <mb-heading :level="2">{{ joke.setup }}</mb-heading>
15 |           <mb-heading :level="3">{{ joke.punchline }}</mb-heading>
16 |         </mb-box>
17 |       </div>
18 |     </div>
19 |   </div>
20 | </template>
21 | 
22 | <script>
23 | import MbHeading from '~/components/global/MbHeading.vue'
24 | export default {
25 |   components: { MbHeading },
26 |   data({ $axios }) {
27 |     return {
28 |       jokes: [],
29 |     }
30 |   },
31 | 
32 |   created() {
33 |     this.fetchJokes()
34 |   },
35 | 
36 |   methods: {
37 |     async fetchJokes() {
38 |       this.jokes = []
39 |       const { data } = await this.$axios.get(
40 |         'https://official-joke-api.appspot.com/random_ten'
41 |       )
42 |       this.jokes = data
43 |     },
44 |   },
45 | }
46 | </script>
47 | 
48 | <style></style>
49 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Nuxt Template
 2 | 
 3 | ## Nuxt + Tailwind + FontAwesome + Google Fonts
 4 | 
 5 | This project includes a complete ready-to-go template of Nuxt, including Tailwind CSS, FontAwesome icons, and Google Fonts.
 6 | 
 7 | Furthermore, some basic components are already included as well:
 8 | 
 9 | - Link
10 | - Button
11 | - Headings
12 | - Paragraph
13 | - Rounded corner box
14 | - Icons
15 | 
16 | Check out the [live demo](https://nuxt-starter-template.netlify.app).
17 | 
18 | I have no documentation of those elements yet, but you can check out the [demo](/pages/demo.vue) page, where the elements are included.
19 | 
20 | I also made an [example page](/pages/jokes.vue) on how to consume a REST API (thanks [FrancescoXX](https://github.com/FrancescoXX) for the suggestion!)
21 | 
22 | ## Build Setup
23 | 
24 | ```bash
25 | # install dependencies
26 | $ yarn install
27 | 
28 | # serve with hot reload at localhost:3000
29 | $ yarn dev
30 | 
31 | # build for production and launch server
32 | $ yarn build
33 | $ yarn start
34 | 
35 | # generate static project
36 | $ yarn generate
37 | ```
38 | 
39 | ## FontAwesome
40 | 
41 | If you want to use FontAwesome, you have to add your FontAwesome NPM Auth Token to the `.env` file. Copy the [dotenv-example file](/dotenv-example) and paste your key in there.
42 | 
43 | For detailed explanation on how things work, check out [Nuxt.js docs](https://nuxtjs.org).
44 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Created by .ignore support plugin (hsz.mobi)
 2 | ### Node template
 3 | # Logs
 4 | /logs
 5 | *.log
 6 | npm-debug.log*
 7 | yarn-debug.log*
 8 | yarn-error.log*
 9 | 
10 | # Runtime data
11 | pids
12 | *.pid
13 | *.seed
14 | *.pid.lock
15 | 
16 | # Directory for instrumented libs generated by jscoverage/JSCover
17 | lib-cov
18 | 
19 | # Coverage directory used by tools like istanbul
20 | coverage
21 | 
22 | # nyc test coverage
23 | .nyc_output
24 | 
25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
26 | .grunt
27 | 
28 | # Bower dependency directory (https://bower.io/)
29 | bower_components
30 | 
31 | # node-waf configuration
32 | .lock-wscript
33 | 
34 | # Compiled binary addons (https://nodejs.org/api/addons.html)
35 | build/Release
36 | 
37 | # Dependency directories
38 | node_modules/
39 | jspm_packages/
40 | 
41 | # TypeScript v1 declaration files
42 | typings/
43 | 
44 | # Optional npm cache directory
45 | .npm
46 | 
47 | # Optional eslint cache
48 | .eslintcache
49 | 
50 | # Optional REPL history
51 | .node_repl_history
52 | 
53 | # Output of 'npm pack'
54 | *.tgz
55 | 
56 | # Yarn Integrity file
57 | .yarn-integrity
58 | 
59 | # dotenv environment variables file
60 | .env
61 | 
62 | # parcel-bundler cache (https://parceljs.org/)
63 | .cache
64 | 
65 | # next.js build output
66 | .next
67 | 
68 | # nuxt.js build output
69 | .nuxt
70 | 
71 | # Nuxt generate
72 | dist
73 | 
74 | # vuepress build output
75 | .vuepress/dist
76 | 
77 | # Serverless directories
78 | .serverless
79 | 
80 | # IDE / Editor
81 | .idea
82 | 
83 | # Service worker
84 | sw.*
85 | 
86 | # macOS
87 | .DS_Store
88 | 
89 | # Vim swap files
90 | *.swp
91 | 


--------------------------------------------------------------------------------
/nuxt.config.js:
--------------------------------------------------------------------------------
 1 | import tailwind from './tailwind.config'
 2 | import fontawesome from './fontawesome.config'
 3 | 
 4 | export default {
 5 |   // Disable server-side rendering: https://go.nuxtjs.dev/ssr-mode
 6 |   ssr: false,
 7 | 
 8 |   // Target: https://go.nuxtjs.dev/config-target
 9 |   target: 'static',
10 | 
11 |   // Global page headers: https://go.nuxtjs.dev/config-head
12 |   head: {
13 |     title: 'Nuxt Template',
14 |     htmlAttrs: {
15 |       lang: 'en',
16 |     },
17 |     meta: [
18 |       { charset: 'utf-8' },
19 |       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
20 |       { hid: 'description', name: 'description', content: '' },
21 |     ],
22 |     link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
23 |     bodyAttrs: {
24 |       class: [
25 |         'font-sans bg-surface transition-colors duration-300 ease-in-out m-4',
26 |       ],
27 |     },
28 |   },
29 | 
30 |   // Global CSS: https://go.nuxtjs.dev/config-css
31 |   css: [],
32 | 
33 |   // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
34 |   plugins: [],
35 | 
36 |   // Auto import components: https://go.nuxtjs.dev/config-components
37 |   components: true,
38 | 
39 |   // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
40 |   buildModules: [
41 |     '@nuxtjs/eslint-module',
42 |     '@nuxtjs/tailwindcss',
43 |     '@nuxtjs/google-fonts',
44 |     '@nuxtjs/fontawesome',
45 |     'nuxt-vite',
46 |   ],
47 | 
48 |   // Modules: https://go.nuxtjs.dev/config-modules
49 |   modules: [
50 |     // https://go.nuxtjs.dev/axios
51 |     '@nuxtjs/axios',
52 |   ],
53 | 
54 |   // Axios module configuration: https://go.nuxtjs.dev/config-axios
55 |   axios: {},
56 | 
57 |   // Build Configuration: https://go.nuxtjs.dev/config-build
58 |   build: {},
59 | 
60 |   tailwind,
61 |   fontawesome,
62 |   googleFonts: {
63 |     families: {
64 |       Glegoo: true,
65 |       Asap: true,
66 |     },
67 |   },
68 | }
69 | 


--------------------------------------------------------------------------------
/components/global/MbLink.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <nuxt-link v-if="isNuxtLink" :to="to" :class="elementClass">
 3 |     <slot />
 4 |   </nuxt-link>
 5 | 
 6 |   <a v-else-if="isAnchor" :href="href" :class="elementClass">
 7 |     <slot />
 8 |   </a>
 9 |   <button v-else :class="elementClass" @click="handleClick">
10 |     <slot />
11 |   </button>
12 | </template>
13 | 
14 | <script>
15 | export default {
16 |   props: {
17 |     // A link can be boxed in order to align better with buttons
18 |     boxed: { type: Boolean, default: false },
19 |     inverted: { type: Boolean, default: false },
20 | 
21 |     // If if color should not be the accent color,
22 |     // it can be either of success, danger, warning, info
23 |     success: { type: Boolean, default: false },
24 |     danger: { type: Boolean, default: false },
25 |     warning: { type: Boolean, default: false },
26 |     info: { type: Boolean, default: false },
27 | 
28 |     // If the element should be a <nuxt-link>
29 |     to: { type: Object, default: null },
30 | 
31 |     // If the element should be an <a>
32 |     href: { type: String, default: '' },
33 |   },
34 |   computed: {
35 |     isNuxtLink() {
36 |       return Boolean(this.to)
37 |     },
38 |     isAnchor() {
39 |       return Boolean(this.href)
40 |     },
41 | 
42 |     colorSpecificClasses() {
43 |       if (this.success) {
44 |         return [
45 |           'text-success',
46 |           this.inverted ? 'hover:border-success' : 'border-success',
47 |         ]
48 |       }
49 |       if (this.danger) {
50 |         return [
51 |           'text-danger',
52 |           this.inverted ? 'hover:border-danger' : 'border-danger',
53 |         ]
54 |       }
55 |       if (this.warning) {
56 |         return [
57 |           'text-warning',
58 |           this.inverted ? 'hover:border-warning' : 'border-warning',
59 |         ]
60 |       }
61 |       if (this.info) {
62 |         return [
63 |           'text-info',
64 |           this.inverted ? 'hover:border-info' : 'border-info',
65 |         ]
66 |       } else {
67 |         return [
68 |           'text-accent',
69 |           this.inverted ? 'hover:border-accent' : 'border-accent',
70 |         ]
71 |       }
72 |     },
73 | 
74 |     elementClass() {
75 |       const classes = [
76 |         ...this.colorSpecificClasses,
77 |         'inline-block',
78 |         'font-bold',
79 |         'border-b-2',
80 |         'transition-border',
81 |         'duration-300',
82 |         'ease-linear',
83 |       ]
84 | 
85 |       if (this.inverted) classes.push('border-transparent')
86 |       else classes.push('hover:border-transparent')
87 | 
88 |       if (this.boxed) classes.push('my-2', 'mx-4')
89 |       return classes
90 |     },
91 |   },
92 |   methods: {
93 |     handleClick(ev) {
94 |       this.$emit('click', ev)
95 |     },
96 |   },
97 | }
98 | </script>
99 | 


--------------------------------------------------------------------------------
/components/global/MbButton.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <nuxt-link v-if="isNuxtLink" :to="to" :class="elementClass">
  3 |     <slot />
  4 |   </nuxt-link>
  5 | 
  6 |   <a v-else-if="isAnchor" :href="href" :class="elementClass">
  7 |     <slot />
  8 |   </a>
  9 | 
 10 |   <button v-else :class="elementClass" @click="handleClick">
 11 |     <slot />
 12 |   </button>
 13 | </template>
 14 | 
 15 | <script>
 16 | export default {
 17 |   props: {
 18 |     // Secondary buttons have only an outlined border
 19 |     secondary: { type: Boolean, default: false },
 20 | 
 21 |     // If if color should not be the accent color,
 22 |     // it can be either of success, danger, warning, info
 23 |     success: { type: Boolean, default: false },
 24 |     danger: { type: Boolean, default: false },
 25 |     warning: { type: Boolean, default: false },
 26 |     info: { type: Boolean, default: false },
 27 | 
 28 |     // If the element should be a <nuxt-link>
 29 |     to: { type: Object, default: null },
 30 | 
 31 |     // If the element should be an <a>
 32 |     href: { type: String, default: '' },
 33 |   },
 34 |   computed: {
 35 |     isNuxtLink() {
 36 |       return Boolean(this.to)
 37 |     },
 38 |     isAnchor() {
 39 |       return Boolean(this.href)
 40 |     },
 41 |     colorSpecificClasses() {
 42 |       let classes = []
 43 |       if (this.secondary) {
 44 |         if (this.success) {
 45 |           classes = ['text-success', 'border-success', 'hover:bg-success']
 46 |         } else if (this.danger) {
 47 |           classes = ['text-danger', 'border-danger', 'hover:bg-danger']
 48 |         } else if (this.warning) {
 49 |           classes = ['text-warning', 'border-warning', 'hover:bg-warning']
 50 |         } else if (this.info) {
 51 |           classes = ['text-info', 'border-info', 'hover:bg-info']
 52 |         } else {
 53 |           classes = ['text-accent', 'border-accent', 'hover:bg-accent']
 54 |         }
 55 |       } else if (!this.secondary) {
 56 |         if (this.success) {
 57 |           classes = ['border-success', 'bg-success', 'hover:text-success']
 58 |         } else if (this.danger) {
 59 |           classes = ['border-danger', 'bg-danger', 'hover:text-danger']
 60 |         } else if (this.warning) {
 61 |           classes = ['border-warning', 'bg-warning', 'hover:text-warning']
 62 |         } else if (this.info) {
 63 |           classes = ['border-info', 'bg-info', 'hover:text-info']
 64 |         } else {
 65 |           classes = ['border-accent', 'bg-accent', 'hover:text-accent']
 66 |         }
 67 |       }
 68 |       return classes
 69 |     },
 70 |     elementClass() {
 71 |       const shared = [
 72 |         'mx-1',
 73 |         'rounded-md',
 74 |         'py-2',
 75 |         'px-4',
 76 |         'font-bold',
 77 |         'border-2',
 78 |         'border-with',
 79 |         'transition-colors',
 80 |         'duration-300',
 81 |         'ease-linear',
 82 |         'inline-block',
 83 |       ]
 84 |       if (this.secondary) {
 85 |         return [
 86 |           ...shared,
 87 |           ...this.colorSpecificClasses,
 88 |           'hover:text-accentContrast',
 89 |         ]
 90 |       } else {
 91 |         return [
 92 |           ...shared,
 93 |           ...this.colorSpecificClasses,
 94 |           'hover:bg-transparent',
 95 |           'text-accentContrast',
 96 |         ]
 97 |       }
 98 |     },
 99 |   },
100 |   methods: {
101 |     handleClick(ev) {
102 |       this.$emit('click', ev)
103 |     },
104 |   },
105 | }
106 | </script>
107 | 
108 | <style></style>
109 | 


--------------------------------------------------------------------------------
/pages/demo.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <main class="m-4">
  3 |     <mb-button :to="{ name: 'index' }">
  4 |       <mb-icon icon="chevron-left" type="solid" /> Back to home
  5 |     </mb-button>
  6 | 
  7 |     <mb-heading :level="1">Heading 1</mb-heading>
  8 |     <mb-heading :level="2">Heading 2</mb-heading>
  9 |     <mb-heading :level="3">Heading 3</mb-heading>
 10 |     <mb-heading :level="4">Heading 4</mb-heading>
 11 | 
 12 |     <mb-heading :level="2" class="mt-8">Sans-Serif Text</mb-heading>
 13 |     <mb-paragraph class="font-sans">
 14 |       Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
 15 |       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
 16 |       veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
 17 |       commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
 18 |       velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
 19 |       cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
 20 |       est laborum.
 21 |     </mb-paragraph>
 22 | 
 23 |     <mb-heading :level="2" class="font-serif">
 24 |       Serif And Secondary-Colored Text
 25 |     </mb-heading>
 26 |     <mb-paragraph secondary class="font-serif">
 27 |       Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
 28 |       doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo
 29 |       inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
 30 |       Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut
 31 |       fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem
 32 |       sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit
 33 |       amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
 34 |       incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
 35 |     </mb-paragraph>
 36 | 
 37 |     <mb-box class="my-6">
 38 |       <mb-heading accent>Box</mb-heading>
 39 |       <mb-paragraph>This is a box. Just for fun!</mb-paragraph>
 40 |     </mb-box>
 41 | 
 42 |     <mb-heading :level="2" class="mt-8">Buttons</mb-heading>
 43 |     <mb-heading :level="3" class="mt-8">"Real" Buttons</mb-heading>
 44 |     <mb-paragraph>(Click to increment this number: {{ count }})</mb-paragraph>
 45 |     <div class="my-2">
 46 |       <mb-button @click="count += 1">Primary accent</mb-button>
 47 |       <mb-button secondary @click="count += 1">Secondary accent</mb-button>
 48 |     </div>
 49 |     <div class="my-2">
 50 |       <mb-button success @click="count += 1">Primary success</mb-button>
 51 |       <mb-button success secondary @click="count += 1">
 52 |         Secondary success
 53 |       </mb-button>
 54 |     </div>
 55 |     <div class="my-2">
 56 |       <mb-button danger @click="count += 1">Primary danger</mb-button>
 57 |       <mb-button danger secondary @click="count += 1">
 58 |         Secondary danger
 59 |       </mb-button>
 60 |     </div>
 61 |     <div class="my-2">
 62 |       <mb-button warning @click="count += 1">Primary warning</mb-button>
 63 |       <mb-button warning secondary @click="count += 1">
 64 |         Secondary warning
 65 |       </mb-button>
 66 |     </div>
 67 |     <div class="my-2">
 68 |       <mb-button info @click="count += 1">Primary info</mb-button>
 69 |       <mb-button info secondary @click="count += 1"> Secondary info </mb-button>
 70 |     </div>
 71 | 
 72 |     <mb-heading :level="3" class="mt-8">
 73 |       Nuxt Links that look like real buttons
 74 |     </mb-heading>
 75 |     <mb-paragraph>They redirect you to another page on the site.</mb-paragraph>
 76 |     <mb-button :to="{ name: 'other' }">Nuxt-Link Button</mb-button>
 77 |     <mb-button :to="{ name: 'other' }" secondary> Nuxt-Link Button </mb-button>
 78 | 
 79 |     <mb-heading :level="3" class="mt-8">
 80 |       Anchors that look like real buttons
 81 |     </mb-heading>
 82 |     <mb-paragraph>They redirect you to another site.</mb-paragraph>
 83 |     <mb-button href="https://marc.dev">Anchor Button</mb-button>
 84 |     <mb-button href="https://marc.dev" secondary> Anchor Button </mb-button>
 85 | 
 86 |     <mb-heading :level="2" class="mt-8">Links</mb-heading>
 87 | 
 88 |     Link that can be <mb-link :to="{ name: 'other' }">embedded</mb-link> in
 89 |     regular text.
 90 | 
 91 |     <mb-heading :level="3" class="mt-8">Boxed</mb-heading>
 92 |     <mb-paragraph>
 93 |       They can also be "boxed", to align better with the buttons
 94 |     </mb-paragraph>
 95 |     <mb-button :to="{ name: 'other' }">Register</mb-button>
 96 |     <mb-button :to="{ name: 'other' }" secondary>Log in</mb-button>
 97 |     <mb-link :to="{ name: 'other' }" boxed>Forgot password</mb-link>
 98 | 
 99 |     <mb-heading :level="3" class="mt-8">Inverted</mb-heading>
100 |     <mb-paragraph>
101 |       They can also be "inverted". This means that the underline is not
102 |       regularly visible, but appears on hover.
103 |     </mb-paragraph>
104 |     <mb-button :to="{ name: 'other' }">Register</mb-button>
105 |     <mb-button :to="{ name: 'other' }" secondary>Log in</mb-button>
106 |     <mb-link :to="{ name: 'other' }" boxed inverted>Forgot password</mb-link>
107 | 
108 |     <mb-heading :level="3" class="mt-8">Colors</mb-heading>
109 |     <mb-link :to="{ name: 'other' }" boxed success>Success link</mb-link>
110 |     <mb-link :to="{ name: 'other' }" boxed danger>Danger link</mb-link>
111 |     <mb-link :to="{ name: 'other' }" boxed warning>Warning link</mb-link>
112 |     <mb-link :to="{ name: 'other' }" boxed info>Info link</mb-link>
113 |   </main>
114 | </template>
115 | 
116 | <script>
117 | export default {
118 |   props: {
119 |     level: { type: Number, default: 1 },
120 |   },
121 |   data() {
122 |     return {
123 |       count: 0,
124 |     }
125 |   },
126 | }
127 | </script>
128 | 
129 | <style></style>
130 | 


--------------------------------------------------------------------------------