A Nuxt 3 starter template or boilerplate with a lot of useful features. Nuxt3 + Tailwindcss 3

  • By Alfian Dwi Nugraha
  • Last update: Dec 27, 2022
  • Comments: 13

Nuxt 3 Awesome Starter

a Nuxt 3 starter template or boilerplate with a lot of useful features. and integrated with TailwindCSS 3.

Features

. .
Preview Preview On Mobile

Demo

Demo

WARNING
Nuxt 3 is still in beta and is not recommended for production use.

Built-in Components

  • Footer
  • Button
  • Anchor (link)
  • Navbar
    • Navbar Builder
    • Drawer (on mobile)
    • Options (on mobile)
  • Action Sheet
  • Theme Toggle / Switcher
  • Page Layout
    • Wrapper
    • Header
      • Title
    • Body
      • Section
  • Dashboard Layout
    • Sidebar
  • Modal
  • Alert

Notes

Styles

Tailwindcss import in :

/path/to/assets/sass/vendor.scss

and you can add custom styles in :

/path/to/assets/sass/app.scss

Theme (Dark Mode)

ThemeManager is a plugin that allows you to switch between themes. this lib in :

/path/to/utils/theme.ts

Thememanager is a function-class construct when app.vue before mounted. theme construct inside AppSetup() in /path/to/app.vue :

import { AppSetup } from '~/utils/app'; // app setup AppSetup() "> 

<script lang="ts" setup>
import { AppSetup } from '~/utils/app';
// app setup
AppSetup()
script>

To change theme, you can direct set theme from state theme.setting, example :

import { IThemeSettingOptions } from '~/utils/theme' const themeSetting = useState ('theme.setting') themeSetting.value = 'dark' "> 
<script lang="ts" setup>
import { IThemeSettingOptions } from '~/utils/theme'
const themeSetting = useState<IThemeSettingOptions>('theme.setting')
themeSetting.value = 'dark'
script>

When you change state theme.setting, it will automatically change theme.

Theme Setting have 4 options :

  • light
  • dark
  • system (operating system theme)
  • realtime (realtime theme, if 05:00 - 17:00, it will change to light theme, otherwise dark)

Icons

This project using unplugin-icons for auto generate and import icon as component.

You can see collection icon list in : https://icones.js.org/

you can use or .

in this project, configuration prefix as a "icon", you can see in nuxt.config.ts :

export default defineNuxtConfig({
    ...

    vite: {
        plugins: [
            ViteComponents({
                dts: true,
                resolvers: [
                    IconsResolver({
                        prefix: 'Icon',
                    }),
                ],
            }),
        ],
    },

    ...
})

Example :

// use icon from collection "Unicons" and name icon is "sun" "> 
// use icon from collection "Simple Icons" and name icon is "nuxtdotjs"
<IconSimpleIcons:nuxtdotjs />

// use icon from collection "Unicons" and name icon is "sun"
<IconUil:sun />

Quick Start

  • Clone this project to your computer git clone https://github.com/viandwi24/nuxt3-awesome-starter
  • Install dependencies npm install
  • Run npm run dev to start development server and open http://localhost:3000 in your browser
  • Run npm run build to build project and npm run start to start production server

Checkout the deployment documentation.

License

This project is licensed under the MIT license, Copyright (c) 2022 Alfian Dwi Nugraha. For more information see the LICENSE file.

Github

https://github.com/viandwi24/nuxt3-awesome-starter

Comments(13)

  • 1

    Vue Router and intlify Warning

    this is realy awesome starter for nuxt3 but I am getting Vue Router and intlify Warning etc:

    1. [Vue Router warn]: No match found for location with path "/__webpack_hmr"
    2. [intlify] Not found 'banners.welcome' key in 'ko' locale messages. [intlify] Fall back to translate 'banners.welcome' key with 'en' locale. Could you have solution?
  • 2

    Vscode bug on pages

    On pages inside a subfolder of pages folder (example: pages/post/index.vue) I have a bug with VScode: it says composables functions are not defined, and an error with the import, see the image below: image

    Do you have the same problem? It's a problem I have with my project too, and I didn't find a fix :/

  • 3

    Where can i remove this startup animation

    Screen Shot 2022-08-08 at 7 21 37 PM

    Because I will like to speed up my DX, so i will like to remove this animation but I can't find where is the code, even I empty entire APP.vue still the same

  • 4

    Why slut?

    Please explain the naming being slut.vue.

    I mean, Github starting using main instead of master coz of the whole slave-master thing despite the context being to computers. This a whole another level.

    Screenshot 2022-12-09 at 21 49 18
  • 5

    πŸ‘€ 3 Variable Problems

    😊 nice to again meet you πŸŽ‰

    βœ”First Problem const to = toRef(props, 'to') in Anchor.vue const to = props.to in Button.vue πŸ‘€ what is best way to get value from props?

    βœ”Second Problem const props = defineProps({ type: { type: String, default: 'primary' }, title: { type: String, default: undefined }, text: { type: String, default: undefined } }) in Alert.vue πŸ‘€why do you use default = undefined insteadof string empty?

    βœ”Third Problem CardTitle.vue

    why do you use tag with {{ text }}? I checked that it don't need right?

  • 6

    Template is unlicensed

    Hi there,

    I would love to use this template for my website. Unfortunately, there is no license. Would you be so kind and add one :)

    Thank you in advance

  • 7

    How move Global CSS from style tag to css file,

    build: { extractCSS: true }

    it's not work !!!!!!!!!!!!!

    https://nuxt3-awesome-starter.vercel.app/ I see is some css inside the style tag on the page

  • 8

    .husky/pre-commit: line 4: yarn: command not found husky - pre-commit hook exited with code 127 (error) husky - command not found in PATH=/Applications/GitHub Desktop.app/Contents/Resources/app/git/libexec/git-core:/usr/bin:/bin:/usr/sbin:/sbin

    I have cloned the repository, and made some changes. When I tried to commit, this error appear:

    .husky/pre-commit: line 4: yarn: command not found husky - pre-commit hook exited with code 127 (error) husky - command not found in PATH=/Applications/GitHub Desktop.app/Contents/Resources/app/git/libexec/git-core:/usr/bin:/bin:/usr/sbin:/sbin

    I have done all sorts of stuff, but error consists.. Please kindly help me.. https://dev.to/studiospindle/using-husky-s-pre-commit-hook-with-a-gui-21ch https://stackoverflow.com/questions/67063993/sh-husky-command-not-found

  • 9

    Question about some components like PageWrapper

    I'm looking at the templates you have in your .vue files and I'm seeing things like PageWrapper and PageBody PageSection PageHeader... where exactly are these things coming from? I can't find any references to them other than their uses.

  • 10

    Cannot find package 'c12' imported from

    after installing node modules i got this error ERROR Cannot start nuxt: Cannot find package 'c12' imported from C:\Users\Moham\Desktop\Git Repos\my-nuxt3-app\node_modules\nuxt-windicss\[email protected]\kit\dist\index.mjs

  • 11

    How to fix bug

    When I run yarn dev , the project is running but there are some bugs.

    [plugin:unplugin-vue-components] callback.apply is not a function

    How to fix them?

  • 12

    how to disable preflight in this project?

    I'm new to tailwind and I came across the default style removal from html elements. I found in the documentation how to disable it, but it doesn't work. Captura de Tela 2022-10-24 aΜ€s 09 46 43 Here the code I put in my project based on yours. Captura de Tela 2022-10-24 aΜ€s 09 51 22

  • 13

    pnpm dev error

    pnpm install

    ERROR Failed to resolve import "ufo" from "virtual:nuxt:/home/juno/Downloads/nuxt3-awesome-starter/.nuxt/paths.mjs". Does the file exist? 03:20:57

    ERROR Failed to resolve import "defu" from ".nuxt/app.config.mjs". Does the file exist? 03:21:00

    βœ” Nitro built in 1938 ms

    500 [vite-node] Failed to load ufo

    at ViteNodeRunner.directRequest (./node_modules/.pnpm/[email protected][email protected]/node_modules/vite-node/dist/client.mjs:180:13) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async ViteNodeRunner.cachedRequest (./node_modules/.pnpm/[email protected][email protected]/node_modules/vite-node/dist/client.mjs:128:12) at async request (./node_modules/.pnpm/[email protected][email protected]/node_modules/vite-node/dist/client.mjs:151:16) at async virtual:nuxt:./.nuxt/paths.mjs:1:238 at async ViteNodeRunner.directRequest (./node_modules/.pnpm/[email protected][email protected]/node_modules/vite-node/dist/client.mjs:251:5) at async ViteNodeRunner.cachedRequest (./node_modules/.pnpm/[email protected][email protected]/node_modules/vite-node/dist/client.mjs:128:12) at async request (./node_modules/.pnpm/[email protected][email protected]/node_modules/vite-node/dist/client.mjs:151:16) at async ./node_modules/.pnpm/[email protected]_3qgq5m7bqj7palvvc4uezrk4iq/node_modules/nuxt3/dist/app/entry.mjs:5:31 at async ViteNodeRunner.directRequest (./node_modules/.pnpm/[email protected][email protected]/node_modules/vite-node/dist/client.mjs:251:5)

Popular Tag

Related