Comments (2)
@andrejsharapov Guess what?
I got you a solution:))
The built remains more or less the same, but few modifications must be done in order for it to properly work in the new environment.
(1) I transformed the style in scss from sass (I like it more, and I do have everything else in scss so I wanted to avoid syntattic conflicts).
the new file will be _vuetify_css_grid.scss and it is stored in a folder extends.
(2) I use directly the vuetify variable that I can overwrite for the grid-breakpoints, and import it in the new css grid file.
I build everything in the final settings.scss and I use this specific file in the nuxt.config.ts
I am using vite, so it will be included in the following way:
vite: {
css: {
preprocessorOptions: {
scss: {
additionalData: `@use './assets/styles/settings.scss' as *;`,
},
},
},
},
hooks: {
'vite:extendConfig': (config) => {
config.plugins?.push(
vuetify({
autoImport: true,
styles: { configFile: 'assets/styles/settings.scss' },
})
)
},
},
This is the clean way to let vuetify works properly in Nuxt 3. The vite scss is used to share the variables in the components (so I can access them directly in the <style> tag); the hook instead is used to extend vite config with vuetify (there is an order problem so we need to push after).
Hope this can be useful to use the new config and enjoy Nuxt3 and Vuetify 3 :)) Feel free to reach out if you need anything.
from nuxt-app.
Message that will be displayed on users' first issue
from nuxt-app.
Related Issues (20)
- Mobile navbar
- Dependency Dashboard HOT 1
- Add new accounts
- page/quiz
- [Request]: codecov connect HOT 3
- remove postcss or update to v8.x.x HOT 2
- remove precss
- remove purgecss
- update nuxt from v2 to v3 HOT 2
- page/articles + slug HOT 1
- page/cases/design/websites
- Layouts
- page/cases/development/websites
- page/cases/design/apps
- page/cases/development/banners
- page/index
- page/pricing HOT 3
- Refresh navigation of lang HOT 1
- Recent projects
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from nuxt-app.