Comments (4)
@frck006 : I have tried the same, but it seems that I adding vuetify 3 fails:
[vite] Internal server error: Failed to resolve import "vuetify/lib" from "src\pages\index.vue". Does the file exist?
Have you also changed the vite.config.ts
? Like adding VuetifyResolver()
?I have limited knowledge about the vite infrastructure, but it seems that the rollup/build for the new Vuetify requires something extra, but I'm not sure what.
Do you maybe havea working example?
from vitesse.
app
is accessible in ctx.app
https://github.com/antfu/vitesse/blob/0e40c550f811f3b695c0d34f72c75a099126b962/src/main.ts#L14
See the docs for Vite SSG for more details.
from vitesse.
Thank you.
For information, this is how to add Vuetify 3.
// modules/vuetify.js
import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/lib/styles/main.sass'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/lib/components'
import * as directives from 'vuetify/lib/directives'
export default createVuetify({
components,
directives,
})
// /src/main.ts
import './styles/main.postcss'
import { ViteSSG } from 'vite-ssg'
import generatedRoutes from 'pages-generated'
import { setupLayouts } from 'layouts-generated'
import vuetify from './modules/vuetify.js'
import App from './App.vue'
const routes = setupLayouts(generatedRoutes)
// https://github.com/antfu/vite-ssg
export const createApp = ViteSSG(
App,
{
routes,
// Decommenter pour la version Tomcat.
// base: 'dist',
},
(ctx) => {
ctx.app.use(vuetify)
// install all modules under `modules/`
Object.values(import.meta.globEager('./modules/*.ts')).map(i => i.install?.(ctx))
},
)
from vitesse.
@peterbud I got mine working by creating a custom version of VuetifyResolver to change the import path from vuetify/lib
to vuetify
. I'm not sure yet how this affects tree-shaking.
src/plugins/vuetifyResolver.ts
/**
* Resolver for Vuetify v3
*
* @link https://github.com/vuetifyjs/vuetify
*/
export function VuetifyResolver(): any {
return (name: string) => {
if (name.match(/^V[A-Z]/))
return { importName: name, path: 'vuetify' }
}
}
vite.config.ts
import { VuetifyResolver } from './src/plugins/vuetifyResolver'
export default defineConfig({
plugins: [
// https://github.com/antfu/vite-plugin-components
ViteComponents({
customComponentResolvers: [
// https://github.com/vuetifyjs/vuetify/
VuetifyResolver(),
],
}),
],
})
src/modules/vuetify.ts
import '@mdi/font/css/materialdesignicons.css'
import { createVuetify } from 'vuetify'
// import * as components from 'vuetify/lib/components'
import * as directives from 'vuetify/lib/directives'
import 'vuetify/lib/styles/main.sass'
import { UserModule } from '~/types'
// https://github.com/vuetifyjs/vuetify/
export const install: UserModule = ({ app }) => {
const vuetify = createVuetify({
// Components will be imported by vite-plugin-components
// components,
directives,
})
app.use(vuetify)
}
This should probably be turned into a pull request similar to unplugin/unplugin-vue-components#32
from vitesse.
Related Issues (20)
- Composable syntax HOT 1
- [bug ] : can't force my website visitors to get the new version HOT 3
- Font inconsistency between local run and online demo HOT 1
- 能放开对.d.ts文件的格式化不
- tsconfig error HOT 1
- carbon icon integration with VS Code HOT 1
- Consider using `unplugin-vue-router` HOT 1
- Language preferences are not preserved HOT 1
- I can‘t use ref in the vue^3.3.4and vite^4.4.5 HOT 2
- Page `hi` is missing dynamic route parameters
- layout feature doesn't work HOT 3
- Is there a plan to support jsx? HOT 3
- Format the contents of "<route lang='yaml'></route>" on save
- route layout not working
- Can anyone tell me how to use .env in this templete? HOT 2
- The eslint of this project is not working in vscode. HOT 2
- Running in subdirectory giving page not found.
- How to solve the console preload crossorigin warning problem HOT 1
- window type error HOT 1
- Module install order
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 vitesse.