I have a project created through Vue CLI and now I want to use Pug with my Single File Components i.e. the .vue files.
To do that I started following this vue-loader documentation and installed pug and pug-plain-loader with the command npm install -D pug pug-plain-loader. And the next step there proposes inserting the follows in webpack.config.js
// webpack.config.js -> module.rules
{
test: /\.pug$/,
loader: 'pug-plain-loader'
}
But, using Vue CLI, I do not have an explicit webpack config file, but vue.config.js.
So, how to add such a pug-plain-loader configuration in vue.config.js (preferably using webpack-chain)?
My current vue.config.js already featuring a svg-loader is as follows:
module.exports = {
// ...
chainWebpack: (config) => {
const svgRule = config.module.rule('svg')
svgRule.uses.clear()
svgRule
.use('vue-svg-loader')
.loader('vue-svg-loader')
//TODO: add pug-plain-loader configuration here
}
}
Accordingly with the example here, Vue CLI has it own way to define new rules in webpack. So this code seems to be the right way to define the pug loader (in your vue.config.js file - if doesn't exists, create it):
module.exports = {
chainWebpack: (config) => {
// Pug Loader
config.module
.rule('pug')
.test(/\.pug$/)
.use('pug-plain-loader')
.loader('pug-plain-loader')
.end();
},
};
This worked for me c:
(this apply only in .vue files that have lang="pug" specified in template tag)
Related
Is there a way with Webpack to exclude a specific .scss file from being compiled to css and included in the build?
I have tried adding the following to vue.config.js, but it does not work —
module.exports = {
chainWebpack: (config) => {
config.module.rule('scss').exclude.add("/src/themes/themes.scss");
}
..
I try to create some Vue libraries for internal use in our company.
As all of our projects use Vuetify, and our libraries expose some components that use it too, i don't want to bundle Vuetify in the libraries, but use the one installed with the "final" project.
I've look in the Webpack and Vue-cli documentation, and found the externals configuration key in webpack. But this vue.config.js file :
module.exports = {
configureWebpack: {
externals: {
vuetify: "commonjs2 vuetify",
},
},
chainWebpack: config => {
// These are some necessary steps changing the default webpack config of the Vue CLI
// that need to be changed in order for Typescript based components to generate their
// declaration (.d.ts) files.
//
// Discussed here https://github.com/vuejs/vue-cli/issues/1081
if (process.env.NODE_ENV === "production") {
config.module.rule("ts").uses.delete("cache-loader");
config.module
.rule("ts")
.use("ts-loader")
.loader("ts-loader")
.tap(opts => {
opts.onlyCompileBundledFiles = true;
opts.transpileOnly = false;
opts.happyPackMode = false;
return opts;
});
}
},
parallel: false,
};
Does'nt seems to works, as Vuetify is still in the bundle (And so, the weight of the output is BIG).
Since I don't want to load Vuetify multiple times... How can i achieve this ?
I have a simple project generated with vue-cli. When I run the vue-cli-service build command it produces CSS file correctly. When I run the vue-cli-service build --watch command it only builds JavaScript files. There are no CSS files.
How can I generate CSS files in watch mode?
You can achieve this by adding this line of code in your vue.config.js
//vue.config.js
module.exports = {
//adding extract css true solves this issue
css: {
extract: true
}
}
https://cli.vuejs.org/config/#css-extract
There is a good chance that you have to use an extract plugin for webpack.
I know that in my vue.config.js file I'm using :
chainWebpack: config => {
if (config.plugins.has('extract-css')) {
const extractCSSPlugin = config.plugin('extract-css');
extractCSSPlugin &&
extractCSSPlugin.tap(() => [
{
filename: 'build.css',
chunkFilename: 'build.css'
}
]);
}
}
Hopefully this help you. However vue inject your css in watch mode right at the top of your file for automatic re-rendering purpose I think.
I am using vue-cli3, when i build using npm run build -- --mode=production, it gives 2 css files and 2 js files.
Everytime i make a code change the name of the file also changes like app.de90cdf7.js and chunk-vendors.a9204242.js.
Is there a way in vue-cli to hardcode the files names as app.js and chunk-vendors.js ?
I'm little late to the party. We can chain webpack to apply name changes.
Using version #vue/cli 5.0.4 in year 2022
const { defineConfig } = require("#vue/cli-service");
module.exports = defineConfig({
transpileDependencies: true,
chainWebpack : (config) => {
config.output.filename('[name].js');
},
css: {
extract: {
filename: '[name].css',
chunkFilename: '[name].css'
}
}
});
Id like to read the contents of a text file which i have imported in my .vue file like import ToS from '~/static/terms-of-service.txt';
I want to access the contents as a String.
How can I do it?
VUE CLI 3
First install the raw loader
npm install raw-loader --save-dev
If you don't have a vue.config.js, make one at root and add
module.exports = {
chainWebpack: config => {
config.module
.rule('raw')
.test(/\.txt$/)
.use('raw-loader')
.loader('raw-loader')
.end()
}
}
To get the text file as string (if placed in src/assets/txt/):
import file from '#/assets/txt/file.txt'
N.B. Remember to rebuild
I'm using nuxt (created with vue cli 3), and this is what worked for me:
npm install --save-dev raw-loader
Update nuxt.config.js
build: {
/*
** You can extend webpack config here
*/
extend (config, ctx) {
config.module.rules.push({
enforce: 'pre',
test: /\.txt$/,
loader: 'raw-loader',
exclude: /(node_modules)/
});
}
}
I ended up using https://github.com/webpack-contrib/raw-loader
Seems that you need a loader to read files in vue