Final Goal : Include SVG icons from files with the possibility to use CSS on it (mainly on the fill parameter). This seems to mean having a way to inline the SVG file in the Vue template.
I have found plenty of solutions involving webpack loaders (vue-svg-inline-loader, vue-svg-loader, and 2 or 3 others), but I also want to be able to choose dynamically which file I load by using a v-bind directive on the source parameter. Something like :
<img :src="`path/to/${file}.svg`" />
or
<custom-component :src="`path/to/${file}.svg`" />
And none of the webpack loaders seems to allow that. I found no vue plug-in with this feature.
My porject is a quasar-framework project, if this can help.
You can do like that:
<template v-html="svgFile"></template>
...
computed:{
svgFile(){
require(`path/to/${this.file}.svg`)
}
}
But you also need config your webpack to out put your svg as raw html. Using some plugin like svg-inline-loader or whatever you want. See more
{ test: /\.svg$/, loader: 'svg-inline-loader' }
Related
I have a Nuxt project and I need to make custom functions and Vue mixins to reuse in Vue components and pages.
In which folder should I put the files containing these? Should I create a 'lib' folder at the top level of the Nuxt project and put the files in there?
Extra details if that can help:
These functions will be imported only when needed (not global)
These functions will be tested
Nuxt Directory Structure Documentation
in my nuxt project, I usually add four folders at the root directory level of the project which is mixins for all of my mixins, models for the models or classes which I use throughout the app, services which contains all my API's endpoints and utils which contains all my utility functions and other general functions like my input's validation functions and my directory looks like this:
in the case of mixins you can then import the required mixin into the desired component and use them like you normally would:
import someMixin from '#/mixins/someMixin'
...
export default {
mixins: [someMixin],
...
}
you can put the mixins file into 2 folders.
you can create global-mixin.js into the plugins folder and after that set this file into plugins: [] part in nuxt.config. link
you can create a mixins folder and create mixin.js into that. link
But the nuxt.js's documents suggested that the first solution was correct
As Nuxt has not any specific directory for mixins, you can create them like any other plugin you have in your project. I prefer to have my overly used plugins in a folder named common. It is your choice really. But as you want to reuse them throughout your project, then you may want to use global mixins, which are similar, But they can lead to memory leakage when not handled correctly. So we need some kind of flag to prevent it from registering multiple times.
Therefore, create a directory you like (for example myMixinFolder). For example I am going to create a mixin file. I create a file inside myMixinFolder and name it my-mixin-plugin.js.
import Vue from "vue"
if (!Vue.__my_mixin__) {
Vue.__my_mixin__ = true
Vue.mixin({
methods: {
sayIt(name) {
console.log(`Hello dear ${name}`)
}
}
})
}
Then add it to nuxt.config.js file:
plugins: [
{ src: '~/plugins/my-mixin-plugin.js' },
],
Now you can use it in any component like this:
<template>
<span>{{ sayIt('Batman') }}</span>
</template>
Or inside script:
this.sayIt('Batman')
This way you don't need to import mixins again and again (Although, you need to be careful if you have more than one mixin file to prevent memory leakage).
I have the feeling I'm thinking way too much into this, but I cannot find what I'm looking for in this pattern.
I have a VueJS app with several components and it all works. I'm using style-resources-loader to pull in my global variables and mixins and such into each component. This works as intended.
module.exports = {
pluginOptions: {
'style-resources-loader': {
preProcessor: 'scss',
patterns: [
path.resolve(__dirname, './src/styles/variables.scss'),
path.resolve(__dirname, './src/styles/text-mixins.scss'),
path.resolve(__dirname, './src/styles/interactive-mixins.scss'),
],
}
},
}
I also have an app-level style sheet. Resets, general layouts, etc. These are not things I want pulled into the SCSS processing of each component - just something I want output in the final CSS for the application.
Everything I find when looking for "how to add SCSS file to Vue" is all about the resource loader for the component processing. I cannot include the global styles in this way and then rely on de-duping to remove the extraneous ones - the imported global styles are being scoped by the built-in component scoping, which is causing bloat and is just generally a bad pattern.
I also don't want a separate Webpack build and CSS file as the end product if I can avoid it.
I can put this inside say the root level App style block, but that's not a great place to work with page-level CSS. It would be ideal to have this a/a set of SCSS files separate from components, but part of the Vue App's SCSS compiling.
Update
Had a big block of stuff here, not sure how it got in that state but that is not the case now and I cannot recreate it.
Throw them in your entrypoint.
Literally include the scss within the start. Like this in your app.ts or app.js :
import Vue from 'vue'
import Buefy from 'buefy'
import 'buefy/dist/buefy.css' <-- like this
Vue.use(Buefy)
If your webpack is setup correctly, e.g. Vue cli, then it doesn't care how the scss is found. It will just inject it globally. Vue components are also global unless you specify scoped scss.
Example from https://buefy.org/documentation/start/
I am trying a new way of writing my ui and I am using straight ESM loading with Vue. As such I am trying to load my HTML files like I would with say Webpack. I have a simple example of what I am talking about. I basically want to take...
export default {
template: "<div>Here is the component. I want this template to be an html file without webpack</div>"
// I want this to be from a url say mysite.net/viewport.html
}
I tried the simple things like
import Template from "/viewport.html"
But of course that didn't work
I think there might be something I can do with dynamic components. Has anyone tried this an come up with a good solution?
What is the correct way of importing javascript modules into vue-components?
I currently have a vue-component component.js:
Vue.component('component', {
name: 'component',
props: ['pdf'],
template: ` ...
I want to take a pdf-url as a prop and use pdf.js within the component, but I'm having trouble finding the right way/standard way to import pdf.js into my project.
Worth noting is that I'm not using vue-cli, or any other kind of bundler like Webpack, so my project structure might be a bit different from standard project structures. I access my components from a main.html file in which I have imported both vue and the components in script-tags in the head of the html. Would I simply import pdf.js in the same manner (head in the main.html file), or is there a "vue"-way of doing it?
If you are not using webpack or any other packager, then I will recommend you to stick to the old fashion way, just use pdf.js as script in your html and make use of the API as it is in the official documentation, such as: pdf.getPage(1).then(...)
Hope it helps.
Cheers
How do I get Less to work with an aurelia cli project?
I've added a style.less file under src and I can see it's bundled into app-bundle.js. But I am not sure if or how I need to add reference to it in app.html?
I've added a div tag
<div class="test-less">Test less</div>
in app.html using a class in my style.less file but when I run the app the css is not used - even though I can see the css in the app-bundle.js:
define('text!style.css', ['module'], function(module) { module.exports = ".test-less {\n color: #FF0000;\n background-color: green;\n}\n"; });
I'm not sure what the 'define..' actually does - ie does it inject the css into the DOM? It is listed beneath the define statement which includes the app.html - so maybe it's out of scope - so not usable in app.html???? If so, how should one use Less with Aurelia (project created by aurelia CLI)
Thanks
Tim
As #Rabah-g stated - I needed to add a require eg:
<require from="style.css"></require>
To figure out what path to use - I just used what was stated in the 'define' statement in app-bundle.js. In this case simply 'style.css'.