I am trying to integrate the material design from https://mdbootstrap.com/vue/ into my NuxtJS project but i failed to find any indication on how to add that to nuxt.
For bootstrap-vue, I added it into my nuxt.config.js as it follows :
modules: [
'bootstrap-vue/nuxt',
],
but it doesn't seem to work for mdbootstrap.
If you have a nuxt project standing, all you need to do is
yarn add mdbvue bootstrap-css-only
OR
npm install mdbvue bootstrap-css-only
...then edit your nuxt.config.js, so it adds necessary styles and transpiles the library's ES6:
css: [
'bootstrap-css-only/css/bootstrap.min.css',
'mdbvue/build/css/mdb.css'
]
...
build: {
extend(config, ctx) {},
transpile: [
'mdbvue'
]
}
and voilà! Checkout out the official guide for some extra details and start using MDB with Nuxt today!
Best
Related
I'm trying to migrate big project, about 2000 components and I have a lot of packages that not relevant in Vue3, 'Element-UI' for instace.
After upgrade Vue to version 3.1.0-0 and add #vue/compat version 3.1.0-0 and #vue/compiler-sfc version 3.1.0-0, I fix all errors and trying to 'npm run dev', than I saw this error
In addition, I have update vue-loader to version 16.0.0 and changed main.js to this:
My package.json:
How can I solve this issue?
This question ranks high in google, so I would add a settings for Vue 3. With Webpack 5 and Vue 3, the webpack config alias changes to this:
resolve: {
extensions: [ '.tsx', '.ts', '.js', '.vue' ],
alias: {
'vue': '#vue/runtime-dom'
}
},
Alternatively this may be the solution, if the are transpilation errors:
alias: {
'Vue': 'vue/dist/vue.esm-bundler.js',
}
I am trying to obfuscate the Nuxt project with javascript-obfuscator. Looking at their documentation it looks like we have to import their plugin in Webpack plugins. But they dont have the documentation for Vue or Nuxt way to do it. I also tried searching on google, but there aren't no relevant examples.
I also want to exclude node_modules from obfuscation.
Nuxt js documentation has something like
import webpack from 'webpack'
export default {
build: {
plugins: [
new webpack.ProvidePlugin({
// global modules
$: 'jquery',
_: 'lodash'
})
]
}
}
And Obsufaction has
var WebpackObfuscator = require('webpack-obfuscator');
// webpack plugins array
plugins: [
new WebpackObfuscator ({
rotateStringArray: true
}, ['excluded_bundle_name.js'])
]
How can i use it with nuxt and also exclude the node_modules folders?
I have a class where I use some static properties like this:
class Entity {
static LIMIT = 10;
}
So, i can do:
Entity.LIMIT
In order to do that I'm using babel plugin-proposal-class-properties and in my .babelrc I have:
{
"presets": ["#babel/preset-env"],
"plugins": [
["#babel/plugin-proposal-class-properties", { "loose": true }]
]
}
I'm using jest and my test passes using that config. Now I need to use funcionality of Entity class inside a vuejs component. But I got the error:
Module parse failed: Unexpected token. You may need an appropriate loader to handle this file type
I also tried a babel config file in my project root: babel.config.js
module.exports = {
presets: ["#babel/preset-env"],
plugins: [
["#babel/plugin-proposal-class-properties", { "loose": true }]
]
};
But didn't work.
How can i configure vuejs, to make work this babel plugin?
I'm using vue2.6.11 and vue-cli 3
I got this exact same issue when trying to use "importabular" with vuejs (vuejs 2, vue-cli-3). Importabular uses class properties, after some research I found this babel plugins (plugin-proposal-class-properties), I installed it and added it in vue.config.js.
To finally make it work, I had to add "importabular" (or the nested path) in the transpileDependencies: option. Why that? Because, by default, Babel ignores whatever is in node_module, so you have to tell Babel to not ignore this specific folder.
So, if you want to use babel or some babel plugins with some node_module with vue you should modify the vue.config.js as follow :
module.exports = {
transpileDependencies: [
'path/in/node_module',
],
}
and change the babel.config.js as follow:
module.exports = {
"presets": [
"#vue/cli-plugin-babel/preset"
],
"plugins": [
["#babel/plugin-proposal-class-properties"],
]
}
I'm not sure what I'm doing wrong here. I have VueJs 3 with Vuetify. Works great with Chrome and Firefox, but it is not loading in IE and Edge. I am attempting to load polyfills with Babel and forcing Vue CLI to transpile dependencies for Vuetify.
package.json
"babel": {
"presets": [
[
"#babel/preset-env",
{
"useBuiltIns": "entry"
}
]
]
}
vue.config.js
module.exports: {
transpileDependencies: ['vuetify']
}
main.ts
import 'core-js/es6';
import 'regenerator-runtime/runtime';
The imports are included at the top of my main.ts file. I have been using the official documentation to set this up.
What am I missing here?
If you created the project using vue-cli and added vuetify using vue add vuetify, then the solution to make it work in Edge should be to add transpileDependencies: ['vuetify'] to the vue.config.js file.
But in my case I added vue/vuetify to an already existing project and did not use vue-cli. So to make it work I installed core-js npm install core-js#2 --save and added this to the rules in my webpack.config.js
{
test: /\.js$/,
exclude: /node_modules\\(?!(vuetify)).*/,
use: [
{
loader: 'babel-loader',
options: {
configFile: './babel.config.js',
}
}
]
}
Then I added the babel.config.js file to the root of the project.
module.exports = {
presets: [
['#babel/preset-env', {
debug: true,
useBuiltIns: 'usage',
corejs: { "version": 2, "proposals": true }
}],
],
plugins: [
'#babel/plugin-proposal-object-rest-spread',
'#babel/plugin-transform-spread',
]
}
A little late reply, but I couldn't find this solution anywhere else and this was one of the first posts showing up when I was searching for it myself. So I figured I'll post what worked for me here.
I ended up just removing Vuetify (I was only using one feature from it which was easily replaced) and using the babel polyfill cdn. Probably not the best solution but got it working for now.
I know vue-quill-editor.
However, I am having difficulties.
First, I started with
vue vue-init nuxt / express myProject
and
npm install --save vue-quill-editor
~plugins/quill.js
import Vue from 'vue'
if (process.BROWSER_BUILD) {
require('quill/dist/quill.snow.css')
require('quill/dist/quill.bubble.css')
require('quill/dist/quill.core.css')
Vue.use(require('vue-quill-editor/ssr'))
}
nuxt.config.js
plugins: [
{ src: '~plugins/quill.js' }
]
Is this the right way?
How do I add modules here?
For example,
Import {ImageImport} from '../modules/ImageImport.js'
Import {ImageResize} from '../modules/ImageResize.js'
Quill.register ('modules / imageImport', ImageImport)
Quill.register ('modules / imageResize', ImageResize)
I could refer to the following,
but it does not seem to be an example of a nuxt.js environment. So I failed.
https://github.com/surmon-china/vue-quill-editor/tree/master/examples
Thank you for your help.
You should take a look this package: Vue Quill Editor. This package has example for NuxtJS in here. I've been successful with this.
The best pratice is to use the ssr: false option in plugins to run the file only on the client-side.
nuxt.config.js
module.exports = {
plugins: [
{ src: '~plugins/quill.js', ssr: false }
],
}
Check the Nuxt doc: https://nuxtjs.org/guide/plugins#client-side-only
quills is for vue2 and vue3. if you are using nuxtjs that use vue2 you have to use this enter link description here
if you are using vuejs 3 you can use this enter link description here