I can't add svg icons to my navigation. I've tried doing
cssClass: require(`#/src/assets/med_icons/Icon_blood.svg) and still wont work. What I am doing incorrectly?
ul.navbar-nav
li.nav-item(v-for="navItem in navItems")
router-link.nav-link.py-4.text-uppercase(:to="navItem.to")
img(:src="navItem.cssClass")
data() {
return {
navItems: [
{
to: { name: "dietPhaseDefault" },
name: this.$t("mainNav.panel"),
cssClass: `#/src/assets/med_icons/Icon_blood.svg`
},
In the question, you mentioned that you tried using
cssClass: require(`#/src/assets/med_icons/Icon_blood.svg)
but here I see you have missed the end quote.
cssClass: require(`#/src/assets/med_icons/Icon_blood.svg`)
Please try this and see if your problem gets resolved else let me know.
Related
I am trying to figure out how to open a Vuetify dialog using the Vue router.
The vue-router is a new experience for me so still learning it. But Ive been working on this all day and have not come anywhere close to solving the issue.
Issue: I need to update the v-model to true to open the dialog when a router link is clicked
I have tried using meta tags and the beforerouterupdate() method to try and update the v-model but that has not worked.
This is my current route file
const routes = [
{
path: '/',
name: 'home',
component: Home,
},
{
path: '/backup',
name: 'backup',
component: BackupDialog,
children: [
{
path: '/backup/:options',
name: 'optionsModal',
component: DbBackupOptions,
meta: {
showModal: true
}
},
]
},
]
I am not sure I have the right configuration at this point. I also tried using dynamic routing but I could not figure that out either.
Is there some one that can give me some insight on how to resolve this issue or pointers in the right direction ?
I have figured out the issue mostly to the help of a video I found on Youtube.
Vue Router Based Modal
Seeing as Vuetify adds around 300-340kb worth of icons when using icons: 'mdi' with the nuxt#vuetify-module, I've found answers indicating that purgeCSS is a good solution to shave off the unnecessary and unused icons.
I initially imported the icons manually from 'mdi/font' but quickly realized this was a very ineffective solution because it forced me to constantly come up with solutions of adding the icons manually to components.
I can't seem to get purgecss to remove the icons though (which is the most important to me).
I installed "#nuxtjs/vuetify": "^1.11.3",
I installed "nuxt-purgecss": "^1.0.0",
I installed "#mdi/font": "^5.9.55",
Looking at this answer I tried to create my settings
why do i see vuetify css in view source?
They also discuss it here:
https://github.com/vuetifyjs/vuetify/issues/7265
vuetify: {
customVariables: ['~/assets/variables.scss'],
treeShake: true,
defaultAssets: {
font: {
family: 'Ubuntu',
},
icons: {
iconfont: 'mdi',
},
},
theme: {
dark: false,
themes: {
light: {
primary: '#fec655',
primarytext: '#23263e',
},
}
}
},
purgeCSS: {
enabled: true,
paths: [
'components/**/*.vue',
'layouts/**/*.vue',
'pages/**/*.vue',
'plugins/**/*.js',
'./node_modules/vuetify/dist/*.js',
'./node_modules/vuetify/dist/*.css',
'./node_modules/vuetify/src/**/*.ts',
'./node_modules/#mdi/fonts/*',
],
styleExtensions: ['.css'],
// whitelist: ['body', 'html', 'nuxt-progress', ''],
whitelist: ['v-application', 'v-application--wrap','layout','row','col'],
whitelistPatterns: [
/^v-((?!application).)*$/,
/^theme--*/,
/.*-transition/,
/^justify-*/,
/^p*-[0-9]/,
/^m*-[0-9]/,
/^text--*/,
/--text$/,
/^row-*/,
/^col-*/,
/leaflet/,
/marker/
],
whitelistPatternsChildren: [/^v-((?!application).)*$/, /^theme--*/],
extractors: [
{
extractor: content => content.match(/[A-z0-9-:\\/]+/g) || [],
extensions: ['html', 'vue', 'js']
}
]
},
Yet still, this request is being made with the original size, any ideas? What am I doing wrong here? The fonts clearly are pulled from locally and not the CDN.
Aside from working with PurgeCss, Have you tried using #mdi/js instead of mdi icons ?
This's from dev.materialdesignicons.com guide:
Using the webfont while easy to use is highly discouraged due to performance and overall request size
So you may roll that by switching to #mdi/js pachage:
https://www.npmjs.com/package/#mdi/js
then specify usage in vuetify options in nuxt.config.js
icons: {
iconfont: 'mdiSvg',
}
Now you have saved considerably in the bundle size.
Using Laravel Mix by the way... and trying to use Vue Apollo, it says we need to add this to babel config:
{
test: /\.vue$/,
use: [
{
loader: 'vue-loader',
options: {
transpileOptions: {
transforms: {
dangerousTaggedTemplateString: true
}
}
}
}
]
},
but that is giving me Failed to mount component: template or render function not defined. error that I haven't been able to find a solution for, except for a thread somewhere in Google saying it's because I'm using vue-loader twice..
So, what I'm trying to do now that may fix this error is to apply that dangerousTaggedTemplateString setting to the existing webpack configuration for .vue files.
Anyone knows how to do that?
Try this (untested), leave the mix.js line you mentioned untouched.
Then on a new line:
mix.options({
vue: {
transpileOptions: {
transforms: {
dangerousTaggedTemplateString: true
}
}
}
});
I have a React app, attempting for tailwind.macro to work within
emotion notations.
I am using customize-cra to rewire the app, and ${twWHATEVER} is successfully working.
However, it does not seem to inherit the original color themes from
tailwind and I am looking for a solution.
Here is the project:
https://github.com/minagawah/cra-ts-emotion-tailwind-solution
As described in the README, I tried
(1) using babel macro,
and (2) using PostCSS plugins.
I thought it's the backgroundSize problem
as it is discussed in
this issue, but no luck.
Here is how I use the tw macro notation in the app:
# ./src/App.tsx
import styled from '#emotion/styled';
import tw from 'tailwind.macro';
const Button = styled.button`
${tw`mt-4 p-2 text-white bg-red-600`}
`;
And it currently works
because I applied a workaround
for this.
It should apply the default tailwind color themes without the workaround I've applied.
I have been trying to figure out ways, but so far, no luck...
Please, I desperately need a help on this...
EDIT: (2019-09-22)
While I was struggling for bg-red to work, I just found out there's no such thing as bg-red by default... That was something I needed to manually add in tailwind.config.js.
Problem solved.
module.exports = {
theme: {
extend: {
colors: {
red: '#e53e3e',
},
},
},
variants: {},
plugins: [],
}
theme: {
extend: {
colors: {
red: '#e53e3e',
},
},
},
variants: {},
plugins: [],
}
i had the same issues i fixed by copying the default value from the tailwindcss github in tailwind.config.js.
here is the link to tailwindcss default value
https://github.com/tailwindcss/tailwindcss/blob/master/stubs/defaultConfig.stub.js#L5
I have attached 2 screenshots, one of my vue.config.js and another of a section of the unminified output my build is producing.
Whats happening is this: I want to change the icon paths and the path to the manifest. For whatever reason the official way of changing this is not working. Right now they are blank spaces, however it was not working when it was anything else either ( just tried with 'foo/bar' as the path as I was typing this to triple check ).
I am confused because I seem to be doing everything exactly as I should according to the official docs. Is there anything another set of eyes can spot that I am missing?
Greetings Erik White
At some point I had the same difficulty and solved it as follows:
Copy the images into the "public" folder
example:
We add the folder "favicon" to "public", "favicon" contains 5 images
[project]/public/favicon/favicon-32x32.png
[project]/public/favicon/favicon-16x16.png
[project]/public/favicon/apple-touch-icon-152x152.png
[project]/public/favicon/safari-pinned-tab.svg
[project]/public/favicon/msapplication-icon-144x144.png
To add images in your html: modify the "vue.config.js" and add.
// Inside vue.config.js
module.exports = {
// ... other vue-cli plugin options ...
pwa: {
// ...
iconPaths: {
favicon32: 'favicon/favicon-32x32.png',
favicon16: 'favicon/favicon-16x16.png',
appleTouchIcon: 'favicon/apple-touch-icon-152x152.png',
maskIcon: 'favicon/safari-pinned-tab.svg',
msTileImage: 'favicon/msapplication-icon-144x144.png'
}
// ...
}
}
To change the path and name of "manifest.json" modify the "vue.config.js" and add:
// Inside vue.config.js
module.exports = {
// ... other vue-cli plugin options ...
pwa: {
// ...
manifestPath: 'my_new_manifest.json',
// ...
}
}
To change the properties of the "manifest.json", (name, images, color, etc) modify the "vue.config.js" and add:
// Inside vue.config.js
module.exports = {
// ... other vue-cli plugin options ...
pwa: {
// ...
manifestOptions: {
name: 'etc ..',
short_name: 'etc ..',
theme_color: '# f44647',
background_color: '# f44647',
start_url: 'index.html',
display: 'standalone',
orientation: 'portrait',
icons: [
{
src: './favicon/favicon-32x32.png',
sizes: '32x32',
type: 'image/png'
},
{
src: './favicon/favicon-16x16.png',
sizes: '16x16',
type: 'image/png'
},
{
src: './favicon/apple-touch-icon-152x152.png',
sizes: '152x152',
type: 'image/png'
},
{
src: './favicon/safari-pinned-tab.svg',
sizes: '942x942',
type: 'image/svg+xml'
},
{
src: './favicon/msapplication-icon-144x144.png',
sizes: '144x144',
type: 'image/png'
},
]
},
// ...
}
}
NOTE
chucks is not a supported parameter.
excludeChucks is not a supported parameter.
If you need to test a service worker locally, build the application and run a simple HTTP-server from your build directory. It's recommended to use a browser incognito window to avoid complications with your browser cache.
Remember to see the VUE documentation, it is very detailed, I leave you a link below #vue/cli-plugin-pwa
Nevermind, solved by updating my dependencies.
guessing this was fixed in a patch i didnt catch