Nuxt-3-Configuration

Basic workflow configuration

Create a new Nuxt 3 project by running the following command and following the prompts:

npx nuxi@latest init <project-name>

Once the project is created, navigate into the project folder:

cd [project-name]

Install the required dependencies with npm install

npm install

Start the Nuxt development server:

npm run dev

You can now access your Nuxt application by visiting http://localhost:3000

Nuxt Modules

TailwindCSS

Install Tailwind CSS and its dependencies by running the following command:

npm install --save-dev @nuxtjs/tailwindcss

Open the nuxt.config.js file in the root of your project directory and update the modules section to include the @nuxtjs/tailwindcss module:

{
	modules: ['@nuxtjs/tailwindcss']
}

Create a new file called tailwind.config.js in the root of your project directory and add the following code:

npx tailwindcss init

module.exports = {
	content: [
		'./components/**/*.{js,vue,ts}',
		'./layouts/**/*.vue',
		'./pages/**/*.vue',
		'./plugins/**/*.{js,ts}',
		'./nuxt.config.{js,ts}',
		'./app.vue'
	],
	theme: {
		extend: {}
	},
	plugins: []
};

Create a new tailwind.css file in your project's /assets/css/ and add the @tailwind directives for each of Tailwind’s layers.

@tailwind base;
@tailwind components;
@tailwind utilities;

Google Fonts

Open the nuxt.config.js file in the root of your project directory.

app: {
    head: {
      link: [
        {
          rel: "stylesheet",
          href: "https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap",
        },
      ],
    },
  },

TailwindCSS automatic class sorting with Prettier

Check out the plugin on GitHub learn more and get started.

To get started, install prettier-plugin-tailwindcss as a dev-dependency:

npm install -D prettier prettier-plugin-tailwindcss

Then add the plugin to your Prettier config:

// prettier.config.js
module.exports = {
  plugins: ['prettier-plugin-tailwindcss'],
}