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
Related
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've created a brand new project with npm init vite bar -- --template vue. I've done an npm install web3 and I can see my package-lock.json includes this package. My node_modules directory also includes the web3 modules.
So then I added this line to main.js:
import { createApp } from 'vue'
import App from './App.vue'
import Web3 from 'web3' <-- This line
createApp(App).mount('#app')
And I get the following error:
I don't understand what is going on here. I'm fairly new to using npm so I'm not super sure what to Google. The errors are coming from node_modules/web3/lib/index.js, node_modules/web3-core/lib/index.js, node_modules/web3-core-requestmanager/lib/index.js, and finally node_modules/util/util.js. I suspect it has to do with one of these:
I'm using Vue 3
I'm using Vue 3 Composition API
I'm using Vue 3 Composition API SFC <script setup> tag (but I imported it in main.js so I don't think it is this one)
web3js is in Typescript and my Vue3 project is not configured for Typescript
But as I am fairly new to JavaScript and Vue and Web3 I am not sure how to focus my Googling on this error. My background is Python, Go, Terraform. Basically the back end of the back end. Front end JavaScript is new to me.
How do I go about resolving this issue?
Option 1: Polyfill Node globals/modules
Polyfilling the Node globals and modules enables the web3 import to run in the browser:
Install the ESBuild plugins that polyfill Node globals/modules:
npm i -D #esbuild-plugins/node-globals-polyfill
npm i -D #esbuild-plugins/node-modules-polyfill
Configure optimizeDeps.esbuildOptions to use these ESBuild plugins.
Configure define to replace global with globalThis (the browser equivalent).
import { defineConfig } from 'vite'
import GlobalsPolyfills from '#esbuild-plugins/node-globals-polyfill'
import NodeModulesPolyfills from '#esbuild-plugins/node-modules-polyfill'
export default defineConfig({
⋮
optimizeDeps: {
esbuildOptions: {
2️⃣
plugins: [
NodeModulesPolyfills(),
GlobalsPolyfills({
process: true,
buffer: true,
}),
],
3️⃣
define: {
global: 'globalThis',
},
},
},
})
demo 1
Note: The polyfills add considerable size to the build output.
Option 2: Use pre-bundled script
web3 distributes a bundled script at web3/dist/web3.min.js, which can run in the browser without any configuration (listed as "pure js"). You could configure a resolve.alias to pull in that file:
import { defineConfig } from 'vite'
export default defineConfig({
⋮
resolve: {
alias: {
web3: 'web3/dist/web3.min.js',
},
// or
alias: [
{
find: 'web3',
replacement: 'web3/dist/web3.min.js',
},
],
},
})
demo 2
Note: This option produces 469.4 KiB smaller output than Option 1.
You can avoid the Uncaught ReferenceError: process is not defined error by adding this in your vite config
export default defineConfig({
// ...
define: {
'process.env': process.env
}
})
I found the best solution.
The problem is because you lose window.process variable, and process exists only on node, not the browser.
So you should inject it to browser when the app loads.
Add this line to your app:
window.process = {
...window.process,
};
I have some base components that I use them in most of the page of my project. So I don't want to import them in each page and prefer to define them global. Related to nuxtjs source if I add components:true to nuxt.config.js my goal will achieved; but it doesn't work for me. And Version in use of nuxtjs is 2.15.2.
By the way, I'll be appreciated of any solution or idea.
You can register the component globally, so it won't be needed to import it in each page. In Nuxt, best way to do that is to create a plugin file.
Create for example the file myPlugin.js in your plugins folder, and use the following:
import Vue from 'vue';
import myComponent from '../components/MyComponent.vue';
Vue.use(myComponent);
Finally, in your nuxt.config.js, add your plugin:
plugins: [
'~plugins/myPlugin'
]
This is the second example presented in the Nuxt plugin doc.
This is not a bug and is totally working as expected, just a change that happened recently. More details can be found on my answer down here: https://stackoverflow.com/a/66336654/8816585
// nuxt.config.js
export default {
components: [
{
path: '~/components', // will get any components nested in let's say /components/test too
pathPrefix: false,
},
]
}
I'd recommend this solution, since it's the official way of doing.
I am trying to setup nuxtjs app with vue2-editor.if I try navigating to editor page via client navigation its loading but if i visit or refresh(eg.com/editor) page directly .i am getting document not defined error.
I have identified it because vue2 editor does not support ssr but i have disable it in nuxt-config.js for only client side.but error not going away.please share what i am doing wrong?
//plugin.quill-editor.js
import Vue from 'vue'
if (process.client) {
const VueEditor = require('vue2-editor') //tried normal import as wel
Vue.use(VueEditor)
}
//nuxt.config.js
plugins: [
{ src: '#plugins/quill-editor.js', mode: 'client' },
]
let VueEditor
if (process.client) {
VueEditor = require('vue2-editor').VueEditor
}
not doing anything in nuxt config or any plugin.
only import method changed.
its working now but i am still wondering why it is not working when i disable ssr in nuxt -config.js file
I solved this issue by adding
ssr: false
in nuxt.config.js because vue2 doesn't support server-side rendering
I spend a few days to setup a vue.js + vue-cli + typescript + vuetify project to run with IE 11 without success?
I found many posts on the net that explain how it should be done but without success. I tried to combine in almost all the ways possible the setup explained below without success, endind with many different errors up to a blank page
The application runs fine wit Chrome or FF
If someone has such an application running in IE 11 it would be greatly appreciated
Context (all the latest versions):
vue-cli
typescript
vue.js + vue-router + vuex + vuex-persistedstate
vuetify + vue-i18n + vuelidate
axios
Pardon me if some question seems stupid as I'm quite a newbie on babel/webpack dev..
What I've tried and questions :
(i've tried almost all the combinations the following)
Should I use npm install babel-polyfill --saveas explained in the vuetify setup for IE 11 here?
Should I addimport 'babel-polyfill'inmain.tsas explained in the vuetify setup for IE 11 here?
Or should I addimport '#babel/polyfill'inmain.tsas explained here
Should I use npm install #babel/preset-env --save-devas explained in the vuetify setup for IE 11 here or is it unnecessary due tovue-cli being used?
inbabel.config.js, should I replace the content initially created by vue-cli
presets: [
'#vue/app'
]
by as explained here
presets: ['#babel/preset-env']
or (as seen in many places)?
presets: [['#vue/app', useBuiltIns: 'entry' }]]
or add the 2 presets?
presets: [
['#babel/preset-env'],
['#vue/app', useBuiltIns: 'entry' }]
]
Should I add some plugins like explained here?
presets: ['#vue/app'],
plugins: ['#babel/transform-modules-commonjs']
Or change it like this as explained in the vue doc here?
presets: [
['#vue/app', {
polyfills: [
'es6.promise',
'es6.symbol'
]
}]
]
invue.config.js, should I add?
transpileDependencies: [
'vuetify',
'vue-i18n',
'vuelidate',
'axios'
]
[SOLUTION 2019-06-25]
We finally got it to work, the answer from #blackening was very helpful
It happened also that we had javsacript errors in IE 11 with google"reCaptcha"that disappeared after the following setup:
As a prerequisite,vue-cliis installed and the project is created by selecting`'Use Babel alongside TypeScript for auto-detected polyfills'
1) installcore-js#3
npm install core-js#3
2) editmain.tslike this:
import 'core-js/stable'
import Vue from 'vue'
import '#/plugins/vuetify'
{...}
3) editbabel.config.js
module.exports = {
presets: [
['#vue/app', { useBuiltIns: 'entry' }]
]
}
And that's it !
Now we are fighting with IE 11 CSS, but that's a know story... As a nexample, invue to apply a style only to IE, just code it like this
<style scoped>
/* Only for IE 11, wrap div text */
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.ieMaxWidth90 {
max-width: 90vw; /* 90% view width */
}
}
</style>
I'll do a partial answer.
1) #vue/app and babel presets are included in vue-cli.
https://cli.vuejs.org/guide/browser-compatibility.html#polyfills
This is stated clearly in the vue-cli documentation. But it also specifies:
"If one of your dependencies need polyfills, you have a few options:
If the dependency is written in an ES version that your target environments do not support: Add that dependency to the transpileDependencies option in vue.config.js"
2) You still need to put the babel polyfill in each entry file.
Traditionally: import '#babel/polyfill' in your main.ts.
What babel-preset-env does is that it detects your browserlist then replaces that line with whatever polyfills it deems necessary.
3) #babel/polyfill is deprecated. Who knew.
Some people need extra heavy duty polyfills. That's me. Because internet exploder in office-js + being too used to bleeding edge tech. That's where core-js # 3 comes in.
My webpack build is fully custom for that purpose. But i ripped it out of the vue-cli and modified from there.
My babel loader config :
const BABEL_LOADER = {
loader: 'babel-loader',
options: {
plugins: ['#babel/plugin-syntax-dynamic-import'],
presets: [
// '#vue/app',
['#babel/preset-env', {
targets: {
ie: '11',
browsers: 'last 2 versions',
},
useBuiltIns: 'usage',
corejs: { version: 3, proposals: true },
}],
],
},
};
This is the top of my entry file:
import Vue from 'vue';
import App from './App.vue';
// ------------ Polyfill ------------
import 'core-js/stable';
The core-js replaces #babel/polyfill.
More reading on core-js: https://github.com/zloirock/core-js/blob/master/docs/2019-03-19-core-js-3-babel-and-a-look-into-the-future.md
npm install --save core-js
Top two lines of main.js:
import "core-js/stable";
import "regenerator-runtime/runtime";
In vue.config.js:
module.exports = {
...,
transpileDependencies: ['vuetify']
}
According to this tutorial, after installing the vuetify using the following command:
npm install vuetify --save
Then, import the Vuetify in the main.ts file, like this:
import Vue from 'vue';
import App from './App.vue';
import store from './store';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';
Vue.use(Vuetify);
Vue.config.productionTip = false;
After that, using this command to install babel-polyfill:
npm install --save babel-polyfill
Then, add the import at the top of the main.ts file, the final code as below:
import 'babel-polyfill';
import Vue from 'vue';
import App from './App.vue';
import store from './store';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';
Vue.use(Vuetify);
Vue.config.productionTip = false;
new Vue({
store,
render: (h) => h(App),
}).$mount('#app');
Finally, using "npm run serve" command to run the application, it works well in IE 11.