Javascript Vue

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

Nuxt 3 Awesome Starter

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

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

.
.


Demo

Demo

Features

💨 Tailwind CSS v3
Headless UI
🔔 Icon Pack Component (unplugin-icons)
🛹 State & Store Management (Pinia)
🌙 Switch Theme (light, dark, system, realtime)
🪝 Built-in Component UI
Localization
Lint & Prettier

Built-in Components

Footer
Button
Anchor (link)
Navbar

Navbar Builder
Drawer (on mobile)
Options (on mobile)

Action Sheet
Theme Toggle / Switcher
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 :

<div class="highlight highlight-text-html-vue position-relative overflow-auto" data-snippet-clipboard-copy-content="
<script lang="ts" setup>
import { AppSetup } from ‘~/utils/app’;
// app setup
AppSetup()
</script>”>

<!– /path/to/app.vue –>
<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 :

<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 <prefix-collection:icon /> or <PrefixCollection:Icon />.

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 “Simple Icons” and name icon is “nuxtdotjs”
<IconSimpleIcons:nuxtdotjs />

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

Nuxt 3 Development Notes

Setup

Make sure to install the dependencies

# npm
npm install

# yarn
yarn install

Development

Start the development server on http://localhost:3000

# npm
npm run dev

# yarn
yarn dev

Production

Build the application for production:

# npm
npm run build && npm run start

# yarn
yarn build && yarn start

Checkout the deployment documentation.

GitHub

View Github

Leave a Reply

Your email address will not be published.

Pin It on Pinterest