A Guide to Adding PostCSS Autoprefixer in Nuxt.js
A utility in Nuxt.js out of the box that really useful for older browser prefixes from PostCSS with autoprefixer.
Web StoryAutoprefixer is a PostCSS plugin for adding browser prefixes to your CSS so you don't have to add a prefix every time you update CSS properties that have prefixes, especially for browser compatibility, and you are really concerned about it. There are some CSS properties that in other browser needs to have prefixes on them.
.col {
display: flex;
}
Into:
.col {
display: -webkit-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
PostCSS autoprefixer plugins already reserved in Nuxt.js
project, this is how to add PostCSS autoprefixer to your Nuxt.js
project. Open up your package.json
file in the text editor, and add a browserlist to the very bottom of the page:
Browserlists:
"browserslist": [
">0.3%",
"not ie 11",
"not dead",
"not op_mini all",
"last 3 version",
"Chrome >= 35",
"Firefox >= 38",
"Edge >= 10",
"Explorer >= 10",
"ie >= 10",
"iOS >= 8",
"Safari >= 8",
"Android 2.3",
"Android >= 4",
"Opera >= 12"
]
After updating your package.json
:
{
"name": "nuxtjs-tailwind-website",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"lint:js": "eslint --ext .js,.vue --ignore-path .gitignore .",
"lint:style": "stylelint **/*.{vue,css} --ignore-path .gitignore",
"lint": "yarn lint:js && yarn lint:style"
},
"lint-staged": {
"*.{js,vue}": "eslint",
"*.{css,vue}": "stylelint"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"dependencies": {
"nuxt": "^2.15.3",
"prism-themes": "^1.7.0"
},
"devDependencies": {
"@nuxt/content": "^1.11.1",
"@nuxtjs/eslint-config": "^5.0.0",
"@nuxtjs/eslint-module": "^3.0.2",
"@nuxtjs/stylelint-module": "4.0.0",
"@nuxtjs/tailwindcss": "^3.4.2",
"babel-eslint": "10.1.0",
"eslint": "^7.17.0",
"eslint-config-prettier": "^7.1.0",
"eslint-plugin-nuxt": "^2.0.0",
"eslint-plugin-prettier": "^3.3.1",
"husky": "^4.3.7",
"lint-staged": "^10.5.3",
"prettier": "^2.2.1",
"stylelint": "13.8.0",
"stylelint-config-prettier": "8.0.2",
"stylelint-config-standard": "20.0.0"
},
"browserslist": [
">0.3%",
"not ie 11",
"not dead",
"not op_mini all",
"last 3 version",
"Chrome >= 35",
"Firefox >= 38",
"Edge >= 10",
"Explorer >= 10",
"ie >= 10",
"iOS >= 8",
"Safari >= 8",
"Android 2.3",
"Android >= 4",
"Opera >= 12"
]
}
The difference will be displayed on the CSS after you inspect the property. Hope this will help you in the future, thanks for stopping by, happy coding.
Original Post
Topics
Recent Blog List Content:
Most popular React.js UI Libraries - Exploring Mantine and Material-UI
How To Work With Relationship RESTful API Endpoints In React.js
Archive
Stories
Code Road’s Web Development Story List
Code Road
Material UI Administrator Dashboard with Next.js
Code Road
Nuxt.js and Chakra UI Website Template
Code Road
How To Use Apex Charts in Nuxt.js Web Application Dashboard
Code Road
Nuxt.js Dynamic Sitemap and Feed for Static Websites
Code Road
Nuxt.js SEO Head Component
Code Road
Chart.js in Nuxt.js: How To Implement
Code Road
On-page SEO List to Have in your Nuxt.js Static Website
Code Road
How To Build VueJS Geo Location Weather Application
Code Road
MySQL Docker Container with MySQL Workbench and PhpMyAdmin
Code Road