viandwi24 / nuxt3-awesome-starter

a Nuxt 3 template and boilerplate with a lot of useful features. Nuxt 3 + Tailwindcss + Nuxt Layer

Nuxt 3 Awesome Starter

a Nuxt 3 starter template with a lot of useful features, integrated with TailwindCSS 3. Easy use and implemented in Nuxt Layer, you can extend this template with zero config.
Nuxt Awesome Starter v2 brings many changes, separating core component apps and main business logic into the /app folder. and also provides the option to also be integrated with the nuxt layer to make it easier to bring all of our Awesome features and components to your project.

• 📖  Demo
• 🕹  Play online (with Nuxt Layer)
• 👀  Play online (app)

NOTES

• This Project using "pnpm" or "bun" as package manager
• this is Nuxt 3 Awesome Starter V2, you can check V1 in this link

Preview

Live Demo

Features

• 📚 Nuxt Layer Support
• 💨 Tailwind CSS v3
• ✨ Headless UI
• 🔔 Nuxt Icon
• 🛹 State & Store Management (Pinia)
• 📦 Vue Composition Collection (Vueuse)
• 🪝 Built-in Awesome Component & Layout
• 🌙 Theme Manager (Color Mode)
• Configurable Theme (Easy to change)
  • Primary Colors
  • Font

To Dos

• Nuxt Layer Support
• Nuxt Awesome Modules Core
  • create modules ~/modules/awesome.ts
• Adding Pinia
  • auto import "defineStore" as "definePiniaStore"
  • auto import folder "stores"
• Eslint & Prettier
• 🌙 Theme Switcher (light, dark, system)
• 🇮🇩 Language Switcher
• Awesome Components
  • Card
  • Content (@nuxt/content bridge)
  • Form
    • Text Input
    • Switch
  • Action
    • Button
    • Link
  • Tabs
  • Pages
    • Welcome
    • Error
  • Action Sheet
  • Alert Banner
  • Modal
  • Toast

Getting Started

Installation

to use Nuxt Awesome Starter you can choose one of the following options:

• using nuxt layer
• using direct clone

Using with Nuxt Layer (Simple Way)

nuxt 3 have a new feature called "Nuxt Layer", with this feature you can create a new project with a template that has been provided by the community. you can see on .demo to see how to use this template with nuxt layer.
this is a simple way to use this template :

• create a new fresh nuxt 3 project with pnpm dlx nuxi@latest init my-app
• install nuxt awesome deps pnpm add @nuxt-awesome/theme
• add extends: '@nuxt-awesome/theme' on your nuxt.config.ts file

  # nuxt.config.ts
  export default defineNuxtConfig({
    devtools: { enabled: true },
    extends: [
      '@nuxt-awesome/theme',
    ]
  })

• after that, you can explorer app.config.ts to see what you can change on this template.
• remove your app.vue in root project if you want to use our nuxt awesome as root layout.

Using with Direct Clone

you can direct to clone this repository and just make change on app/ folder as your main project folder.

• clone this repository

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

• install dependencies

  pnpm install

• run development server

  pnpm dev

nuxt3-awesome-starter's Issues

aspect ratio doesn't work

The aspect-ratio is not working. The project is the same as yours, I just added the extra video.

Node.js version = v16.14.2

Sunsetting Windi

https://windicss.org/posts/sunsetting.html

Missing tests

one problem

When I refresh the page after switch languages, and the three-line prompt on the first page overlaps.

LINT WARNING: Type instantiation is excessively deep and possibly infinite.ts(2589)

On fresh install I see this warning 🤔 any idea about it?

The deployment problem

This happens after running yarn build and then yarn start

请问一下，如果打包npm run build 发生错误，说 no such file or directory, open 'D:/visual/\u535A\u5BA2/boke/pages/login.vue'

请问一下，如果打包npm run build 发生错误，说 no such file or directory, open 'D:/visual/\u535A\u5BA2/boke/pages/login.vue'

windicss websoket error

The console always prompts this after I install and run

But the 24678 port is normal

pnpm run dev cannot run project

When I execute 'pnpm run dev' command，I can open this project, but the console keeps returning 503 errors

Nuxt Awesome Modules Core

404 page only work with ` /404 ` route.

When entering any unknown route, it will only show Document not found unless I use the /404 route.

example

Pinia Types?

Aren't the Pinia types necessary?
https://pinia.vuejs.org/ssr/nuxt.html#typescript

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:

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

unable to run

vite_ssr_import_2.default is not a function

感觉也可以把请求封装等相关的东西写到模版中

[typescript template] not working - help wanted

Just downloaded the project. Installed all dependencies with pnpm, shamefully hoist and all those caveats known in PNPM.

Changed a few things in About page and then I noticed something.

I am getting Type checking in ts files. I am also getting Type checking within .vue files within the <script> tags.

However, when it comes to getting Type checking I do not get any type checking regarding props of imported components. I only get type inference for things within the "self" script tag.

See below:

Basically, any component that is external to the current file, used in template is being typed as any. I have no clue why this is happening. Do you have any ideia?

👀 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

<script lang="ts" setup> defineProps({ text: { type: String, default: '' } }); </script>

**{{ text }}**

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

the problem of theme color

The theme color is incorrect when refresh the page

changes lose due husky and lint stash backup

Hi i want to notice who's using this awesome template if u are noob like me git, lint stuffs you gonna lose ur works when you commit your updates. (i lost beacuse :(( ) to skip this one add --no-stash to pre-commit file in husky folder

and read those topics:
https://stackoverflow.com/questions/60334337/why-are-my-changes-gone-after-a-cancelled-git-commit-and-how-do-i-recover-them/60335168#60335168
https://stackoverflow.com/questions/69229095/pending-git-changes-are-lost-when-commit-fails-due-to-linting-error-husky-lin
https://stackoverflow.com/questions/12147042/lost-git-stash-changes
lint-staged/lint-staged#795

also for git commit
https://www.conventionalcommits.org/en/v1.0.0/
https://stackoverflow.com/questions/68261650/strange-error-when-attempting-to-commit-subject-empty

update the doc link to deploy a nuxt application (Read.me)

the link in the read.me is invalid

ERROR No "exports" main defined in /Users/****/node_modules/@nuxt/kit/package.json

Installing any dependencies will report the following error, please advise

 ERROR  No "exports" main defined in /Users/****/node_modules/@nuxt/kit/package.json                        21:45:18

  at new NodeError (node:internal/errors:393:5)
  at throwExportsNotFound (node:internal/modules/esm/resolve:358:9)
  at packageExportsResolve (node:internal/modules/esm/resolve:612:7)
  at resolveExports (node:internal/modules/cjs/loader:529:36)
  at Module._findPath (node:internal/modules/cjs/loader:569:31)
  at Module._resolveFilename (node:internal/modules/cjs/loader:981:27)                                                    21:45:18
  at Function.resolve (node:internal/modules/cjs/helpers:109:19)
  at resolveModule (node_modules/.pnpm/[email protected]/node_modules/nuxi/dist/shared/nuxi.f17c7643.mjs:17:29)
  at importModule (node_modules/.pnpm/[email protected]/node_modules/nuxi/dist/shared/nuxi.f17c7643.mjs:37:24)
  at loadKit (node_modules/.pnpm/[email protected]/node_modules/nuxi/dist/shared/nuxi.ede95f37.mjs:5:18)

Change default Nav Logo

How to change the Nav Logo?

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.

What is your opinion? About using tRPC with this project.

I thought it would be interesting to have this in the project. ( also Prisma )

similar to this create-t3-app but with Nuxt3

V2 Major Update

i plan to change the structure for the better, and work on integrating with Nuxt Layers.
this is one very nice feature, which is that others can easily extend this template with their own templates.

To Dos

• #60
  • create modules ~/modules/awesome.ts
• Adding Pinia
  • auto import "defineStore" as "definePiniaStore"
  • auto import folder "stores"
• Eslint & Prettier
• 🌙 Theme Switcher (light, dark, system)
• Easy App Config
  • App Meta (title, authors)
  • Layout (navbar menus)

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

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.

ERROR Cannot start nuxt: The requested module 'vite' does not provide an export named 'isCSSRequest'

VueUse

Hi i didnt know why this is red marked

.

.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

Where can i remove this startup animation

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

Using extendBuild in Nuxt 3 has no effect.

I keep getting this warn on yarn dev. How do one get rid of it

WARN [kit] [compat] Using extendBuild in Nuxt 3 has no effect. Instead call extendWebpackConfig and extendViteConfig.

What settings are you using to deploy to Vercel?

It seems the default Nuxt settings from Vercel are for Nuxt2, so I'm curious what build settings you used to get it to work?

vscode setup

Can you share or explain your vscode setup because I am getting lots of Unknown at rule @apply scss(unknownAtRules) in .vue files

Text input not reactive

I fixed issue for myself by replacing @input="onInput" and :value="modelValue" with v-model="modelValue"
and olso onInput method is not needed anymore

[Question] Has eslint already been implemented in the starter?

I wanted to ask this because on the package's nuxt.config.ts, it appears commented out, but in the readme it appears as a ticked feature:

[unhandledRejection] Cannot set headers after they are sent to the client

When I execute npm run dev, Command line has an error.

Environment

- System:          `Windows 10`
- Node Version:     `v16.18.1`

Describe the bug

 ERROR  [unhandledRejection] Cannot set headers after they are sent to the client            17:33:19

  at new NodeError (node:internal/errors:387:5)
  at ServerResponse.setHeader (node:_http_outgoing:644:11)
  at sendError (/D:/Workplace/nuxt3-starter/node_modules/.pnpm/[email protected]/node_modules/h3/dist/index.mjs:189:18)
  at Server.toNodeHandle (/D:/Workplace/nuxt3-starter/node_modules/.pnpm/[email protected]/node_modules/h3/dist/index.mjs:927:15)
  at runMicrotasks (<anonymous>)
  at processTicksAndRejections (node:internal/process/task_queues:96:5)

Unable to select "none" as the Button component's type

If I select "none" for the Button's type prop, the selectedStyles defaults to "primary" classes as:
const selectedStyle = computed(() => styles[props.type] || styles.primary)
evaluates styles['none'] as false as it's an empty string.

Instead, it should return an empty string.

localePath is not a function

I'm trying to get the proper URLs for the locale but i get this : [nitro] [dev] [unhandledRejection] TypeError: _ctx.localePath is not a function

has this disappeared? :to="localePath('index')"

ERROR Cannot find module 'unplugin-vue-components/vite'

I created a new project in nuxt 3

npx nuxi@latest init testproject
cd testproject

Add a nuxt.config extends:

cat nuxt.config.ts 
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  extends: 'github:viandwi24/nuxt3-awesome-starter'
})

And install dependencies and get this error

pnpm install
Lockfile is up to date, resolution step is skipped
Already up to date

> nuxt-app@ postinstall /testproject
> nuxt prepare

Nuxi 3.6.2

 ERROR  Cannot find module 'unplugin-vue-components/vite'                                                                                                                                                         6:01:33 p. m.
Require stack:
- /home/jag2kn/.cache/c12/github_viandwi24_nuxt3-awesome-starter/nuxt.config.ts

  Require stack:
  - /home/jag2kn/.cache/c12/github_viandwi24_nuxt3-awesome-starter/nuxt.config.ts
  at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
  at Function.resolve (node:internal/modules/cjs/helpers:108:19)
  at _resolve (node_modules/.pnpm/[email protected]/node_modules/jiti/dist/jiti.js:1:250100)
  at jiti (node_modules/.pnpm/[email protected]/node_modules/jiti/dist/jiti.js:1:252409)
  at /home/jag2kn/.cache/c12/github_viandwi24_nuxt3-awesome-starter/nuxt.config.ts:1:198
  at evalModule (node_modules/.pnpm/[email protected]/node_modules/jiti/dist/jiti.js:1:255106)
  at Object.jiti (node_modules/.pnpm/[email protected]/node_modules/jiti/dist/jiti.js:1:253034)
  at resolveConfig (node_modules/.pnpm/[email protected]/node_modules/c12/dist/index.mjs:280:24)
  at processTicksAndRejections (node:internal/process/task_queues:96:5)
  at async extendConfig (node_modules/.pnpm/[email protected]/node_modules/c12/dist/index.mjs:217:21)

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.

Here the code I put in my project based on yours.

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

Question about dependencies

Just a simple question why did you put all the dependencies in devdependence ?

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\node_modules@nuxt\kit\dist\index.mjs

JWT Auth

Hello would you mind add JWT auth for this project? Thank you.

Document not found when deploying the project

I get a document not found after uploading the project to AWS S3.

Ran the commands
pnpm build
pnpm generate

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?

[vite] Internal server error: Undefined variable.

following the quickstart leads to an error on unspecified variables sass variables. I am not sure what I am missing

     Error: Undefined variable.
      ╷
   4 │       $color1 20%,
      │       ^^^^^^^
     pages/index.vue 4:7  root stylesheet

and also

Error: Undefined variable.
   ╷
 3 │   font-family: $fontFamily !important;
   │                ^^^^^^^^^^^
   ╵
   assets/sass/app.scss 3:16  root stylesheet
   ```

problem with hotReload..

sometimes i have to restart "yarn dev" and refresh browser..
maybe its just nuxt3 , maybe Tailwind

Upgrade to [email protected]