I have a new project that was created with Vue-cli 3 using vue create my-new-project. I am using CSS grid for some layout things and i need to support IE11 and newer. Vue docs say that autoprefixer is loaded and enabled by default but its not working. I cant get it to work in either npm run build or npm run serve. Works fine in chrome but IE11 its not working. Im sure there is some config that needs to be done but im unsure what that may be.
.browserslistrc:
> 1%
last 4 versions
postcss.config.js:
module.exports = {
plugins: {
autoprefixer: {}
}
};
CSS Grid support is disable by default.
You can enable it by using either the grid: autoplace option or the /* autoprefixer grid: autoplace */ control comment.
module.exports = {
plugins: {
'autoprefixer': {
grid: 'autoplace'
},
}
};
Does Autoprefixer polyfill Grid Layout for IE?
Related
I try without success to apply a prerendering (or a SSG) to my Vue3 application to make it more SEO friendly.
I found the vue-cli-plugin-prerender-spa, and when I try it with the command line: vue add prerender-spa I have the error:
ERROR TypeError: Cannot read properties of undefined (reading 'endsWith')
After that I tried prerender-spa-plugin but I have an error when I make a npm run build:
[prerender-spa-plugin] Unable to prerender all routes!
ERROR Error: Build failed with errors.
Error: Build failed with errors.
at /Users/myusername/Workspace/myproject/node_modules/#vue/cli-service/lib/commands/build/index.js:207:23
at /Users/myusername/Workspace/myproject/node_modules/webpack/lib/webpack.js:148:8
at /Users/myusername/Workspace/myproject/node_modules/webpack/lib/HookWebpackError.js:68:3
What do you think about this? Do you have any idea?
Nuxt3 is a really powerful meta-framework with a lot of features and huge ecosystem. Meanwhile, it's in RC2 right now so not 100% stable (may still work perfectly fine).
If your project is aiming for something simpler, I'd recommend using Vitesse. It may be a bit more stable and it's probably powerful enough (check what's coming with it to help you decide).
Some solutions like Prerender also exist but it's paid and not as good as some real SSG (/SSR). Also, it's more of a freemium.
I struggled with the same error output until I found the prerender-spa-plugin-next. Then I notice the latest version of prerender-spa-plugin was published 4 years ago and prerender-spa-plugin-next is continually updating. It seems like that prerender-spa-plugin-next is a new version of prerender-spa-plugin with the same functions. So I use prerender-spa-plugin-next instead of prerender-spa-plugin then everything works fine!
Here is my step:
install the package
npm i -D prerender-spa-plugin-next
modify vue.config.js like
const plugins = [];
if (process.env.NODE_ENV === 'production') {
const { join } = require('path');
const PrerenderPlugin = require('prerender-spa-plugin-next');
plugins.unshift(
new PrerenderPlugin({
staticDir: join(__dirname, 'dist'),
routes: ['/'], //the page route you want to prerender
})
);
}
module.exports = {
transpileDependencies: true,
configureWebpack(config) {
config.plugins = [...config.plugins, ...plugins];
},
};
build
npm run build
Then check the index.html under the dist folder you can see the page is prerendered.
Further usage refers to the homepage of prerender-spa-plugin-next
Found and fix about the scss files to import.
In nuxt.config.ts use :
vite: {
css: {
preprocessorOptions: {
scss: {
additionalData: `
#import "#/assets/scss/_variables.scss";
#import "#/assets/scss/my-style.scss";
`
}
},
},
}
Now my 2 mains issue are : how to install vuetify properly, currently syles and components seems working but the JS not, for example, accordions don't expands on click.
And second topic is to have a i18n module, it seems that vue-i18N no longer works.
Thanks.
I'm using Nuxt with Vuetify.
I created a class and assigned it some padding.
The class is defined in a unscoped <style> in layouts/default.vue.
when I'm on development mode (npm run dev) everything looks great as I aimed for.
the class is on container element so the final html looks like
<div class="container container--fluid my-class">
the devtools look like that when I'm on dev mode:
so my-class is applied. But once I build the project (npm run generate) my-class is overridden by the container class rules:
I guess it is happening because of the order in which the classes combined into a single css but not sure it behaves differently for dev and built projects.
How can I fix it?
After some more digging it seems to be a known issue with nuxt.
It happens when declaring styles in non-scoped style tag, and using it somewhere else.
I followed these steps: https://stackoverflow.com/a/60925793/9103301
which is basically integrating Vuetify into nuxt manually and not with #nuxt/vuetify.
then I could control over the order the css is loaded in nuxt.config.js - first vuetify and then my styling (which I moved from the layout the a css file).
a more basic vuetify plugin that worked for me:
import Vue from "vue"
import Vuetify from "vuetify"
version "^2.1.1" ,
Vue.use(Vuetify)
export default (ctx) => {
const vuetify = new Vuetify({
theme: {
dark: false, // From 2.0 You have to select the theme dark or light here
},
})
ctx.app.vuetify = vuetify
ctx.$vuetify = vuetify.framework
}
You'll have to install icons as well, vuetify default is mdi which is installed with npm install #mdi/font -D
managed to fix this by disabling tree shaking for vuetify. Change the following in nuxt.config.js:
buildModules: [
["#nuxtjs/vuetify", { treeShake: false }],
],
I created new fresh project with latest VueJS-cli tool. Looks like VueJS CLI is using Webpack 4.43.0.
How to remove that Webpack section, that is visible under browser console/debugging tab?
All code with comments are visible and nothing is striped and uglified.
yarn build shows that it is building for production. Also I tried export NODE_ENV=production
Thanks in advance
I solved.
In : vue.config.js
module.exports = {
configureWebpack: {
devtool: false
}
}
How do we add PostCSS support to Vue cli 3 (I'm using beta 7)? Is there a plugin for it? Its not supported out of the box.
When I tried to import like this
import './index.pcss'
using the default cli generated project
./src/index.pcss
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .sofa {
| font-family: "sofachrome", serif;
| }
# ./src/main.js 5:0-22
my postcssrc.js:
module.exports =
{
'plugins': {
'autoprefixer': {},
'postcss-smart-import': {},
'postcss-custom-properties': {},
'postcss-nested': {}
}
}
Just use the .css extension, not .pcss. If you must use .pcss you'll have to configure that in webpack. As for how to properly tap into that rule to do that I'd need to research a bit. Though, I think just using .css is a clear win.
PostCSS (as pointed out by Bill and Yuriy) works by default, but the Webpack loader is only configured for .css extensions. To modify it, update your vue.config.js:
module.exports = {
chainWebpack: config => {
config.module
.rule('pcss')
.use('postcss-loader')
.tap(options =>
merge(options, {
sourceMap: false,
})
)
}
}
Modify the example according to your needs.
Read more in vue-cli docs
I am using vue.js inside Laravel 5.5.33 (not SPA). I am getting below error.
How can I enable DevTools?
Be sure you have this setting in your app.js file
Vue.config.devtools = true
If you are using mix, check the dist of vue in webpack.mix, be sure you don't use min version
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.webpackConfig({
resolve: {
alias: {
'vue$': 'vue/dist/vue.js'
}
}
});
Run your npm in dev
npm run watch
WARNING
If you refresh your page in your browser, the cache is not refreshed. Clean the cache to reload the app.js
This is an old issue when production grade build is used.
You are probably using Vue from CDN, and probably using a production build (dist/vue.min.js). Either replace it with a dev build (dist/vue.js) or add Vue.config.devtools = true to the main js file.
Check out the github link.
But, for me, the problem with DevTools was solved just when I put the line that is provided in the answer below after creating your Vue application.
Your code should look like this
new Vue({
el: '#app',
data () {
text: 'testData'
}
})
Vue.config.devtools = true