nuxt3-pinia-vuetify starter kit
This starter kit features Nuxt.js 3, Pinia for client-side state management, and Vuetify for styling.
How to use this Starter Kit:
(use any of
npm create @this-dot/starter -- --kit nuxt3-pinia-vuetify
- Vue v3.x
- TypeScript - Type checking
- Sass - CSS preproccesor
- ESLint - Code linting
- Prettier - Code formatting
A note about testing and Storybook
Storybook was not included for this starter.dev kit due to incompatibility with Nuxt.js 3. We will add support when it becomes avaialble.
Vitest and other testing is excluded. The current Nuxt.js 3 testing story is still being developed and is not production ready.
- Node.js 16.8 or later installed
- start by creating a new Starter Kit project
cdinto your project directory and run
npm run devto start the development server.
- Open your browser to
http://localhost:3000to see the included example code running.
yarn start- Starts the development server.
yarn build- Creates a
.outputdirectory with all your application, server and dependencies ready for production.
yarn preview- Starts a server to preview your Nuxt application after running the build command.
yarn generate- Pre-renders every route of your application and stores the result in plain HTML files that you can deploy on any static hosting services. The command triggers the
nuxt buildcommand with the
prerenderargument set to
yarn postinstall- Creates a
.nuxtdirectory in your application and generates types. This can be useful in a CI environment or as a
postinstallcommand in your
yarn lint:js- Runs ESLint on the project.
yarn lint:prettier- Runs Prettier on the project.
yarn lint- Runs both
yarn lint:fix- Runs ESLint and Prettier on the project and fixes any errors.
Kit Organization / Architecture
We’ve chosen to split out a
components directory for interactive UI components, and a
store directory for the Pinia stores used for both global and some component state management.
nuxt3-pinia-vuetify kit you will find the
FetchExample directories in the components folder.
CounterExample directory component uses
Pinia to control the state of the component.
FetchExample directory component uses
useLazyFetch to fetch data from the example
Styling and Theme
Configurations are done in the
vuetify.ts file, which is located in the
plugins directory. In here is where you will make Vuetify configurations for your application. This particular configuration file exports a Nuxt plugin, defined using defineNuxtPlugin, which applies the Vuetify setup to the Nuxt app.
The file begins by importing the
createVuetify function from the
Vuetify library. This function is used later to generate a Vuetify instance for application-wide use. In addition, all Vuetify components and directives are imported for incorporation into this instance, offering broad flexibility for the application’s UI.
Within the defined Nuxt plugin, the
createVuetify function is invoked, establishing a Vuetify configuration object. Notably, server-side rendering (SSR) is enabled by setting
ssr: true which boosts the performance and SEO of your application.
In terms of theming, a
customTheme is defined with a primary color of
#3B82F6. This theme is set as the
defaultTheme. Remember, theming can be expanded to add more color specifications and other themes, following the same pattern. To learn more: Layouts and theming in Vuetify 3.
Post-configuration, all components and directives are passed to the
createVuetify function, ensuring that they’re accessible throughout the application.
Finally, the constructed Vuetify instance is applied to the Nuxt application using
nuxtApp.vueApp.use(Vuetify). This essential step ensures that Vuetify, with all its components, directives, and theme settings, becomes available in the Vue application.
In essence, this file outlines a pattern to configure Vuetify within a Nuxt.js context, making optimal use of theme customization and SSR, while incorporating all available Vuetify components and directives.
build command creates a working Nuxt 3 app, so you can deploy it to any hosting provider that supports Nuxt.js.