Creating a New Nuxt 3 Application with Pinia and TailwindCSS

First of all: I'm not saying that it's been too long since I last posted on here, but I am saying that I had to google options for developer blogs to remember which site I was using -.-'

Creating a Nuxt3 application

I had a really rough time because I didn't have nvm installed before. I vaguely remembered it being fairly difficult on my Mac M1 laptop, but I powered through 🥳

But I am using v18.12.1.

They changed the startup script that we are supposed to use. It's located in the documentation

npx nuxi init <project-name>

Then I started following this blog with its instructions.

I DO NOT USUALLY ALLOW YARN ANYWHERE NEAR MY PERSONAL PROJECTS. IT IS REALLY UNNECESSARY.

However, there is a bug and you cannot currently install Pinia without forever errors without using it so just this time

yarn add pinia
yarn add @pinia/nuxt

then go to the nuxt.config.ts file

export default defineNuxtConfig({
  modules: ['@pinia/nuxt'],
})

and then finally, we'll import this into a page/component:

// stores/images.js

import { defineStore } from 'pinia'

export const useImagesStore = defineStore({
  id: 'image-store',
  state: () => {
    return {
      images: [
        {src: 'https://upload.wikimedia.org/wikipedia/commons/b/bc/Juvenile_Ragdoll.jpg'}, 
        {src: 'https://cdn.hpm.io/wp-content/uploads/2018/04/26174519/Roger-H-Goun.jpg'}
      ],
    }
  },
  actions: {},
  getters: {
    ImageList: state => state.images,
  },
})

NOW ONTO TAILWIND!

There is now going to be forever problems due to using yarn that one time to install Pinia. For the most part followed the github instructions

npm install --save-dev --legacy-peer-deps @nuxtjs/tailwindcss

Then add the following to the modules section in the nuxt.config.js

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

The basic Nuxt application is now setup!

Comments

[Konstantin BIFERT]

Hey, welcome back here! 👋🏻
Why don't you like yarn? I have to say that I had far less issues overall with it than NPM (especially all those legacy deps etc).
Especially because here, you will have both a yarn.lock and package-lock.json at the same time? 🤔

I saw some issues regarding the Pinia install, give a try to one of my answers here: stackoverflow.com/a/74004089/8816585 (npm i pinia -f should be enough to fix it).

[Konstantin BIFERT]

GTFO with your spam. :)