I have created a front development environment using docker compose.
The configuration is nginx + nuxt3 + vuetify3.
I created vue in the Pages directory.
It took 120000ms to display it.
It's so slow that I can't even develop.
I'm trying to see why it's taking so long.
and it looks like it is getting all the vuetify code.
Also some of the requests are giving errors.
http://host.docker.internal/_nuxt/node_modules/vuetify/lib/components/VChip/VChip.css
http://host.docker.internal/_nuxt/node_modules/vuetify/lib/components/VGrid/VGrid.css
http://host.docker.internal/_nuxt/node_modules/nuxt/dist/pages/runtime/app.vue
http://host.docker.internal/_nuxt/node_modules/vuetify/lib/components/VNoSsr/VNoSsr.mjs?v=afbc0ebb
http://host.docker.internal/_nuxt/node_modules/vuetify/lib/components/VColorPicker/util/index.mjs?v=afbc0ebb
http://host.docker.internal/_nuxt/node_modules/vuetify/lib/components/VList/VListChildren.mjs?v=afbc0ebb
http://host.docker.internal/_nuxt/node_modules/vuetify/lib/components/VProgressCircular/VProgressCircular.css?v=afbc0ebb
The access is from host.docker.internal:80 leading to host machine:80 -> nginx container:80 -> nuxt container:3000.
The nuxt server is run by this command.
npx nuxi dev
I don't know why the above massive requests are taking place.
It also does not appear to be normal. What is wrong?
I am new to both nuxt and vuetify.
I am also not familiar with how webpack works.
Having the same issue, maybe it would be wise to add your nuxt config.
Maybe someone can figure out what to do..
Mine is as followed:
{
...
css: ['vuetify/styles'],
build: {
transpile: ['vuetify'],
},
modules: [
// eslint-disable-next-line require-await
async (_options, nuxt) => {
// #ts-ignore
nuxt.hooks.hook('vite:extendConfig', (config) => config?.plugins && config.plugins.push(vuetify({ autoImport: true })))
},
],
...
And plugins/vuetify.ts
// #ts-ignore
import {defineNuxtPlugin, useRuntimeConfig} from '#app'
import {createVuetify} from 'vuetify'
import * as components from 'vuetify/components'
import {aliases, mdi} from 'vuetify/iconsets/mdi-svg'
import { md3 } from 'vuetify/blueprints'
import {useDark} from '#vueuse/core'
export default defineNuxtPlugin((nuxtApp) => {
const isDark = useDark().value
const vuetify = createVuetify({
ssr: true,
// https://next.vuetifyjs.com/en/features/blueprints/
blueprint: md3,
components,
icons: {
defaultSet: 'mdi',
aliases,
sets: {
mdi,
},
},
// https://next.vuetifyjs.com/en/features/theme/
theme: {
defaultTheme: isDark ? 'dark' : 'light',
themes: {
dark, // theme defined earlier
light, // theme defined earlier
},
},
})
nuxtApp.vueApp.use(vuetify)
})
Related
I have a simple NextJs app.
When I'm running the app on a localhost everything seems to work fine - All the images are shown as expected
When I use this script: next build && next export
and browse to my local build, I don't see the images, but instead its "alt" text
The way I import an image:
import React from 'react';
import Image from 'next/image';
import someImage from '../../../public/images/some-image.png';
const Main = () => {
return (
<div>
<Image
src={someImage}
alt="Some Image"
placeholder="blur"
/>
</div>
}
next.config.js
/** #type {import('next').NextConfig} */
const configuration = {
reactStrictMode: true,
eslint: {
dirs: ['./src'],
ignoreDuringBuilds: true,
},
images: {
loader: 'akamai',
path: '',
},
};
module.exports = configuration;
My code design:
Environment:
"next": "13.1.6",
"react": "18.2.0",
Moreover, I tried to use a normal img tag and it causes the same problem.
If anyone here faces the same issue ill appreciate any help!
Refer to this page:
https://nextjs.org/docs/messages/export-image-api
You are attempting to run next export while importing the next/image component using the default loader configuration.
However, the default loader relies on the Image Optimization API which is not available for exported applications.
So, when running static NextJS app with export you cannot use NextJS optimization, as it should run in your non-existent server. You should use cloud solution (https://nextjs.org/docs/api-reference/next/image#loader-configuration) or remove optimization:
module.exports = {
images: {
unoptimized: true,
},
}
(https://nextjs.org/docs/api-reference/next/image#unoptimized)
When importing something statically from the public folder it already knows youre inside it. You only need the following import:
import someImage from 'images/some-image.png';
I am trying to set up a basic (css) library with vanilla TS and Vite 4.
I want to have a main js and css file at the top level so you can import the whole thing in one go. I also want to have component level imports where you can chose to just import the components js + css. The combined css and JS files are working fine; and the individual component JS file is working fine too.
Currently I'm running into the problem where I can't seem to keep an isolated version of the CSS files next to the JS files after bundling. My build is currently creating :
I've gone over the docs of both Vite and Rollup but I can't seem to figure out how to do the same to my CSS as I'm doing to my JS.
dist
--components
----button
------button.js
--main.css
--main.js
My preferred output would be:
dist
--components
----button
------button.js
------button.css
--main.css
--main.js
In my `main.ts` I'm importing:
import './style.scss'
import './tokens.scss'
import './components/button/button.scss'
vite.config.js
import { defineConfig } from 'vite'
import { resolve } from 'path'
export default defineConfig({
build: {
cssCodeSplit: false,
manifest: true,
rollupOptions: {
output: {
assetFileNames: () => 'main[extname]',
}
},
lib: {
formats: ['es'],
entry: {
main: resolve(__dirname, 'src/main.ts'),
button: resolve(__dirname, 'src/components/button/button.ts')
},
name: 'CSSFramework',
fileName: (_, fileName) => fileName === 'main' ? '[name].js' : 'components/[name]/[name].js',
},
},
});
Thanks in advance !
I am trying to setup Material Design Icons, and I have the following config:
nuxt.config.ts
import { defineNuxtConfig } from 'nuxt';
export default defineNuxtConfig({
modules: ['#nuxtjs/tailwindcss'],
css: ['vuetify/lib/styles/main.sass', '#mdi/font/css/materialdesignicons.min.css'],
build: {
transpile: ['vuetify'],
},
vite: {
define: {
'process.env.DEBUG': false,
},
},
})`
```
But in terminal I am keep getting the same message whatever I try
[Vue Router warn]: No match found for location with path "/materialdesignicons.min.css.map"
I installed #mdi/font package and followed the vuetify3 official docs but no success.
Also, I have installed Nuxt 3 and Vuetify 3, and dev dependencies sass-loader and sass.
Icons are shown, no problems with display in <v-icon> tag but in terminal I keep getting the same error message.
I have been Googling a lot but I can't seem to find the answer.
Any ideas? Thanks
You need to tell vuetify to use the material icons as icon pack in your plugins/vuetify.ts.
To do so you have to install the mdi font, as you already did, and then set it in the vuetify icons Object in your defineNuxtPlugin.
When done, it should look like this:
import { createVuetify } from 'vuetify'
import {aliases, mdi} from "vuetify/lib/iconsets/mdi";
// make sure to also import the coresponding css
import '#mdi/font/css/materialdesignicons.css' // Ensure you are using css-loader
// Ensure your project is capable of handling css files
export default defineNuxtPlugin(nuxtApp => {
const vuetify = createVuetify({ // Replaces new Vuetify(...)
theme: {
defaultTheme: 'dark'
},
icons: {
defaultSet: 'mdi',
aliases,
sets: {
mdi
}
},
})
nuxtApp.vueApp.use(vuetify)
})
You can then simply use it like this:
<v-icon icon="mdi-minus" />
For a more detailed explanation, visit This Article
I just import materialdesignicons to plugins/vuetify.ts. It works for me.
first install "#mdi/font" and then use this config:
// plugins/vuetify.ts
import { createVuetify } from "vuetify";
import "#mdi/font/css/materialdesignicons.css";
export default defineNuxtPlugin((nuxtApp) => {
const vuetify = createVuetify({
ssr: true,
theme: {
defaultTheme: "light",
},
});
nuxtApp.vueApp.use(vuetify);
});
everyone.
This is my first time here, and I apreciate your helps.
I'm new with Vuejs, student actually.
Overview:
I'm trying build a plugin component to show simple notifications.
Then I'm using Vue3 and vite. I created a demo and run npm link to test in local.
Problem:
In my demo project when I run npm run dev everything working correctly, but when I run npm build something stop working in my plugin componet. I found that v-for is not working inside of my plugin component, in my demo project it's working normal. I think could be some setup in my vite.config to render it correctly.
This is my vite config:
// vite.config.js
import { resolve } from 'path'
import { defineConfig } from 'vite'
import vue from '#vitejs/plugin-vue'
export default defineConfig({
build: {
lib: {
entry: resolve(__dirname, 'src/index.js'),
name: 'Vue3SimpleNotification',
// the proper extensions will be added
fileName: (format) => `vue3-simple-notification.${format}.js`,
},
rollupOptions: {
// make sure to externalize deps that shouldn't be bundled
// into your library
external: ['vue'],
output: {
// Provide global variables to use in the UMD build
// for externalized deps
globals: {
vue: 'Vue'
}
}
}
} ,
plugins: [vue()]
})
I'm currently trying to use amcharts 5 in a Nuxt3 app, and had a couple of graphs working fine. However at some point amcharts has randomly stopped working and I get the following error:
[h3] [unhandled] H3Error: am5 is not defined
at createError (file:///home/johnr/Code/UrbanTide/socialconnect_ukpn/node_modules/h3/dist/index.mjs:196:15)
at Server.nodeHandler (file:///home/johnr/Code/UrbanTide/socialconnect_ukpn/node_modules/h3/dist/index.mjs:386:21) {
statusCode: 500,
fatal: false,
unhandled: true,
statusMessage: 'Internal Server Error'
}
I tried using amcharts5 according to the docs by importing it and using it in lifecycle hooks.
And initially had an issue related to ESM modules which was resolved by adding "type" : "module" to package.json. After that I made a couple of graphs and they worked fine. However shortly after writing a third graph I changed the ssr setting in nuxt.config.js to false and shortly after got the above error.
I've tried adding amcharts to the transpile array in the nuxt.config.ts:
import { defineNuxtConfig } from 'nuxt3'
export default defineNuxtConfig({
publicRuntimeConfig: {
VUE_APP_AUTH_COOKIE: process.env.VUE_APP_AUTH_COOKIE,
VUE_APP_ENV: process.env.VUE_APP_ENV,
VUE_APP_SESSION_HASH: process.env.VUE_APP_SESSION_HASH,
VUE_APP_USMART_ORIGIN: process.env.VUE_APP_USMART_ORIGIN,
MAP_BOX_ACCESS_TOKEN: process.env.MAP_BOX_ACCESS_TOKEN
},
css: ['vuetify/lib/styles/main.sass', 'mdi/css/materialdesignicons.min.css'],
build: {
transpile: ["vuetify", "#amcharts/amcharts5"]
},
vite: {
define: {
"process.env.DEBUG": false
}
},
buildModules: [
// ...
'#pinia/nuxt',
],
})
but didn't have any joy.
I have also tried setting up a plugin:
plugins/amCharts.client.ts
import * as am5 from "#amcharts/amcharts5";
import * as am5xy from "#amcharts/amcharts5/xy";
import * as am5radar from "#amcharts/amcharts5/radar";
import am5themes_Animated from "#amcharts/amcharts5/themes/Animated";
export default defineNuxtPlugin(() => {
return {
provide: {
am5: am5,
am5xy: am5xy,
am5radar: am5radar,
am5themes_Animated: am5themes_Animated,
}
}
})
and I'm retrieving it in the component like so:
const { $am5, $am5radar, $am5themes_Animated, $am5xy } = useNuxtApp()
The issue was a solved by removing a remaining piece of code calling the am5 instance as explained here.
Happens to anybody!