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.
Related
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
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.
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 am looking at the example files of vuetify. They all seem to be *.vue files. I am only familiar with *.html *.css *.js files where vue is used with CDN. How to convert/modify these vue files for CDN use? what are the steps? What are the pitfalls in doing so?
I am a beginner in vue.js and currently prototyping a tiny application to input/output few data and nothing fancy is required. CDN fits well for that.
So at first I would always recommend going with the Vue CLI instead of the CDN usage because it brings you a lot of benefits and a overall smoother developer expierence.
Coming to your question: Here is the starter template for Vuetify with a CDN https://codepen.io/pen?template=OJJeVge
They simply use the vuetify components inside a <script> tag with an id and mount that and initialize the vue instance with it.
You would put all other data stuff inside the <script> tag like you would do inside the script tag of a normal .vue file.
Is there a config option in Vue to make a separate CSS file?
I tried using the webpack plugin to extract CSS. However, Vue still loads the same styles inline.
Is there something I’m missing about Vue? Or is this purely my misunderstanding of webpack?
webpack.config.js