I just migrated my Vue 3 app from Webpack to Vite and I'm having an issue with the require statements that I had in my templates. From what I managed to find our that is valid syntax for Webpack but not for Vite but I couldn't find out what's 1-on-1 equivalent.
More precisely for icons I had something like this:
<div
class="icon"
v-html="require(`../assets/icons/${name}.svg`)"
/>
And like this (if I wanted to use an external link)
<div
class="icon"
v-html="require(src)"
/>
What would be the Vite equivalent for the require in those v-html?
Vue v.3.2.31
Vite v.2.8.4
Related
i try this solution to use external js but did't work
<template>
<div>
<script
type="application/javascript"
defer
src="/assets/javascript/jquery.flexslider-min.js"
></script>
</div>
</template>
the error shown
GET http://localhost:3000/assets/javascript/jquery.flexslider-min.js net::ERR_ABORTED 404 (Not Found)
If you're planning to use some NPM packages, the way to go is Nuxt plugins.
If you're more into loading 3rd party scripts, the approach explained here is the way to go: https://stackoverflow.com/a/67535277/8816585
By the look of your jQuery file, you will probably be interesting by this article: https://vueschool.io/articles/vuejs-tutorials/how-to-load-third-party-scripts-in-nuxt-js/
But if you can, try to either use NPM packages or look for packages in the Vue ecosystem rather than using jQuery.
When you use vue or nuxt, the proper way to use external packages is by installing them on your projects using npm or yarn or another package manager.
I experience problem with Vuetify.js v2.2. When I use container, row or col classes. These styles works fine on 'dev'.
Once I build npm run build the project, these styles are not applied anymore.
I could use workaround noted here https://github.com/vuetifyjs/vuetify/issues/8013#issue-472862385, but as mentioned https://github.com/vuetifyjs/vuetify/issues/7978 this should not be the case anymore.
Anybody experienced the same and found official solution?
Examples below:
Live https://www.exchangehours.com/
Local Dev (sorry, no public domain)
The problem was in my lack of knowledge of VuetifyJs and te Vue itself.
# What I used
<div class="container"> </div>
# What needs to be used
<v-container> </v-container>
I did not check it directly, but my bet is that tree shaking logic of VuetifyJs is the cause. Where on dev you have loaded all vue css & js but after build just needed css & js is added to chunk.js / chunk.css files.
Therefore if you do not use Vue components to create container or other grid elements, styles are not included to chunk.
So all works perfectly fine if you follow docs completely.
Any way to change the default lang attr for Vue single file components loaded with Webpack?
I'm referring to
<script lang='coffee'>
<template lang='pug'>
<style lang='stylus'>
That's my preferred list of loaders (lang / languages), and I mostly use the same ones.
How to setup this in Webpack so that <template> would mean pug instead of html, which would then need <template lang='html'>?
Thanks
If developing with VS Code and the Vetur plugin, it has customizable snippets you can use to achieve your preferred starting point. This doesn't have anything to do with Webpack per se, I'm not sure how Webpack is coming into play for you in this case.
i am working on a vue project,
on a route for example /app there are components that not using scss.
and on another route for example /admin there are components that using scss.
when i import /app route and its childs in project it creates errors like this:
font-size: $font-size-base;
^
Undefined variable: "$font-size-base".
when i remove /app and its child routes from router file errors will solve and works fine.
i imported scss in /admin parent component to only use scss in this route but it didnt solve the error.
any idea?
Webpack needs to process SCSS when your project runs. You're seeing this on routes because things aren't rendered in Vue until they're called by either a route or a parent component.
Vue can use regular CSS and SASS together. You have to set it up to process the files though.
I'm assuming that you have CSS or SCSS in each template file
<template> ... </template>
<script> ... </script>
<style> CSS or SCSS rules </style>
In that case you need to tell Vue to preprocess the stuff inside the style tags. Do that with the lang attribute in the template where you have SCSS.
<style lang="SCSS"> ... </style>
You also need to include the node-sass and sass-loader packages.
Note: You need to define the SCSS variable $font-size-base in the component that uses it since by default each template is self-contained.
i was using require to address an image file in one of my components. that was the problem.
I'm new to Aurelia, so I'm not really sure how this should work. I created a new Aurelia project and also installed bootstrap simply by doing jspm install bootstrap. I saw in console that this also pulled in jquery 3.0.0.
Now my question is, how do I use bootstrap.css, bootstrap.js and jquery.js in my project?
First attempt:
In app.html I tried to do thhe following:
<require from="bootstrap"></require>
I tried that because I have the following line in my config.js:
map: {
...
"bootstrap": "github:twbs/bootstrap#3.3.6",
...
}
This sort of works in the sense that it loads bootstrap.js, but then gives an error in browser that it's missing jquery.js. So it's not automatically loading jquery for me. Is this normal?
Second attempt:
I changed my require to this in app.html:
<require from="jquery/dist/jquery.js"></require>
<require from="bootstrap/css/bootstrap.css"></require>
<require from="bootstrap/js/bootstrap.js"></require>
I'm not sure how it knows where to look for the bootstrap.js and bootstrap.css file, since they are located in: jspm_packages/github/twbs/bootstrap#3.3.6/css/bootstrap.css etc. But it knows how to find the bootstrap files. But not the jquery file.
I have this in my config.js for jquery:
map: {
...
"github:twbs/bootstrap#3.3.6": {
"jquery": "npm:jquery#3.0.0"
},
....
}
So basically my question is, how should this work? Should require autoload all the necessary files when I <require from="bootstrap">. Or should I still load them as individual files? If so, how do I then load jquery in this case?
The require element is for pulling in Aurelia components, html templates (which are Aurelia components), or css files. It isn't for loading javascript files.
The Aurelia skeleton shows how to load Bootstrap in its main.js file:
import 'bootstrap';
is the first line in the file. This will initialize Bootstrap's javascript code.
In app.html a require element is used to load Bootstrap's css:
<require from="bootstrap/css/bootstrap.css"></require>
Importing jQuery in to a file is pretty simple as well:
import $ from 'jquery';
Then you can use the $ function however you would like.
I had this problem then installed latest node and npm, and then from the tutorial page on the aurelia site:-
To get Bootstrap setup, we begin by installing the library itself with NPM. Execute the following on the command line to do this:
npm install bootstrap --save
Next, because Bootstrap uses jQuery, we want to install jQuery as well, like this:
npm install jquery#^2.2.4 --save
then restarted the app as packages were updated and ran it again ... FIXED!
after adding
import 'bootstrap';
in main.js, you may need to stop the app (Ctrl + c) and run it again with
au run --watch
to make it work.