I tryed to replace momentjs in project on antdv, and find this advice:
"We also provide another implementation, which we provide with
antd-dayjs-webpack-plugin, replacing momentjs with Day.js directly
without changing a line of existing code. More info can be found at
antd-dayjs-webpack-plugin."
https://2x.antdv.com/docs/vue/faq
So then i tryed to do same steps like in instruction https://github.com/ant-design/antd-dayjs-webpack-plugin. But i just changed webpack-config.js on vue-config.js and in code:
const AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-plugin');
module.exports = {
plugins: [
new AntdDayjsWebpackPlugin()
]
}
// on
const AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-plugin');
module.exports = {
configureWebpack: (config) => {
config.plugins.push(
new AntdDayjsWebpackPlugin(),
);
}
}
But then i got mistake 502 Bad Gateway.
If i deleted configureWebpack mistake was still there. And then i deleted require and mistake was gone.
Also i found what in page with this plugin there was word about React but not about Vue.
So i had few questions:
Is it possible to use DayJs in antdv DatePickers? With plugins or any ways.
Is it mistake in FAQ? How i can tall about this issue (if it is)? I didnt found any method to communicate with them.
Related
I have similar issue as mentioned here, but with Pinia in my case. It's much harder to get Pinia to work outside of Vue components, because of "Uncaught Error: [🍍]: getActivePinia was called with no active Pinia. Did you forget to install pinia?", but in this case it is even harder.
Not the cleanest solution, because it requires to have Pinia installed and initialized in the project where your package will be used, but if you're doing this for internal use it is totally okay.
So, in my package it looks like this:
install(app, options = {}) {
greetings()
const { $pinia } = options
if (!$pinia) {
throw new Error(`No active Pinia instance was passed to your package`)
}
let core_store = useCoreStore($pinia)
// moar code
And in other project:
import MyPackage from '#rusinas/my-package'
app.use(ModernEditor)
const pinia = createPinia()
app.use(MyPackage, {
$pinia: pinia
})
app.use(pinia)
app.mount('#app')
I noticed that in SPA mode you may not need to provide active pinia to your package, it could figure it out itself, you just need to make sure to app.use(pinia) before you initialize you package. But this doesn't work in Nuxt SSR mode, so yeah, this workaround required :(
I think we should raise this question in Pinia's repository. I don't see why it have to work this way. Cases where you need stores outside of setup() are so often and even crucial sometimes for applications, so it should be much easier.
P.S.
Also, keep in mind the possibility of store names collisions. Names should be unique across entire application
P.P.S.
SSR solution:
plugins/MyPackage.plugin.js:
import { defineNuxtPlugin } from '#app'
import MyPackage from '#rusinas/my-package'
export default defineNuxtPlugin(nuxtApp => {
nuxtApp.vueApp.use(MyPackage, {
$pinia: nuxtApp.$pinia,
})
})
I'm on Nuxt 2.13 and I'm having an issue with window.__Nuxt__(function(a,b,c,d,.....)). I don't know if it will affect my SEO or not, but it's on my nerve and shows all my language file.
here is the situation : there is a lang.json file in my app. i read it and store it in a lang state in Vuex. but window.__Nuxt__ shows my lang which i don't want to!!
i have found three solutions so far to remove it:
1: by adding this code to nuxt.config.js
link to stack answer
hooks: {
'vue-renderer:ssr:context'(context) {
const routePath = JSON.stringify(context.nuxt.routePath);
context.nuxt = {serverRendered: true, routePath};
}
}
}
2: by commenting some codes in node_module/#nuxt/vue-renderer/dist/vue-renderer.js
link to article
3: by using cheerio package and scraping the script from body
link to article
const cherrio = const cheerio = require('cheerio');
export default {
//The rest configuration is omitted
hooks: {
'render:route': (url, result) => {
this.$ = cheerio.load(result.html,{decodeEntities: false});
//Since window.__nuxt__ is always located in the first script in the body,
//So I removed the first script tag in the body
this.$(`body script`).eq(0).remove();
result.html = this.$.html()
}
}
}
all three will do the job, BUT !! my components won't be lazy loaded anymore as i use an state in Vuex to give theme address for lazy load! for example:
computed:{
mycomponent(){
return ()=>import(`~/components/${this.$store.state.siteDirection}/mycomp.vue`)
}
}
it will give error that webpack cant lazy load this as this.$store.state.siteDirection is null.
how can i solve this??
a little strange question, but how to remove comments from the file chunk-vendors.js? I mean, there are automatically placed licenses and other information about plugins, including the vue, vuex, vue-router.
Is there any parameter responsible for this? I’m tired of removing these lines manually after each build
I use vue-cli
Assuming Vue CLI 3 or newer, this is handled by the minimizer's (terser) output options. Specifically, set output.comments=false to exclude comments from the minified output.
Edit vue.config.js to include:
module.exports = {
chainWebpack: config => {
config.optimization.minimizer('terser').tap((args) => {
args[0].terserOptions.output = {
...args[0].terserOptions.output,
comments: false // exclude all comments from output
}
return args
})
}
}
I get an error porting from Vue.js to Nuxt.js.
I am trying to use vue-session in node_modules. It compiles successfully, but in the browser I see the error:
ReferenceError window is not defined
node_modules\vue-session\index.js:
VueSession.install = function(Vue, options) {
if (options && 'persist' in options && options.persist) STORAGE = window.localStorage;
else STORAGE = window.sessionStorage;
Vue.prototype.$session = {
flash: {
parent: function() {
return Vue.prototype.$session;
},
so, I followed this documentation:
rewardadd.vue:
import VueSession from 'vue-session';
Vue.use(VueSession);
if (process.client) {
require('vue-session');
}
nuxt.config.js:
build: {
vendor: ['vue-session'],
But I still cannot solve this problem.
UPDATED AUGUST 2021
The Window is not defined error results from nodejs server side scripts not recognising the window object which is native to browsers only.
As of nuxt v2.4 you don't need to add the process.client or process.browser object.
Typically your nuxt plugin directory is structured as below:
~/plugins/myplugin.js
import Vue from 'vue';
// your imported custom plugin or in this scenario the 'vue-session' plugin
import VueSession from 'vue-session';
Vue.use(VueSession);
And then in your nuxt.config.js you can now add plugins to your project using the two methods below:
METHOD 1:
Add the mode property with the value 'client' to your plugin
plugins: [
{ src: '~/plugins/myplugin.js', mode: 'client' }
]
METHOD 2: (Simpler in my opinion)
Rename your plugin with the extension .client.js and then add it to your plugins in the nuxt.config.js plugins. Nuxt 2.4.x will recognize the plugin extension as to be rendered on the server side .server.js or the client side .client.js depending on the extension used.
NOTE: Adding the file without either the .client.js or .server.js extensions will render the plugin on both the client side and the server side. Read more here.
plugins: ['~/plugins/myplugin.client.js']
There is no window object on the server side rendering side. But the quick fix is to check process.browser.
created(){
if (process.browser){
console.log(window.innerWidth, window.innerHeight);
}
}
This is a little bit sloppy but it works. Here's a good writeup about how to use plugins to do it better.
Its all covered in nuxt docs and in faq. First you need to make it a plugin. Second you need to make your plugin client side only
plugins: [
{ src: '~/plugins/vue-notifications', mode: 'client' }
]
Also vendor is not used in nuxt 2.x and your process.client not needed if its in plugin with ssr false
In Nuxt 3 you use process.client like so:
if (process.client) {
alert(window);
}
If you've tried most of the answers here and it isn't working for you, check this out, I also had the same problem when using Paystack, a payment package. I will use the OP's instances
Create a plugin with .client.js as extension so that it can be rendered on client side only. So in plugins folder,
create a file 'vue-session.client.js' which is the plugin and put in the code below
import Vue from 'vue'
import VueSession from 'vue-session'
//depending on what you need it for
Vue.use(VueSession)
// I needed mine as a component so I did something like this
Vue.component('vue-session', VueSession)
so in nuxt.config.js, Register the plugin depending on your plugin path
plugins:[
...
{ src: '~/plugins/vue-session.client.js'},
...
]
In index.vue or whatever page you want to use the package... import the package on mounted so it is available when the client page mounts...
export default {
...
mounted() {
if (process.client) {
const VueSession = () => import('vue-session')
}
}
...
}
You can check if you're running with client side or with the browser. window is not defined from the SSR
const isClientSide: boolean = typeof window !== 'undefined'
Lazy loading worked for me. Lazy loading a component in Vue is as easy as importing the component using dynamic import wrapped in a function. We can lazy load the StepProgress component as follows:
export default {
components: {
StepProgress: () => import('vue-step-progress')
}
};
On top of all the answers here, you can also face some other packages that are not compatible with SSR out of the box and that will require some hacks to work properly. Here is my answer in details.
The TLDR is that you'll sometimes need to:
use process.client
use the <client-only> tag
use a dynamic import if needed later on, like const Ace = await import('ace-builds/src-noconflict/ace')
load a component conditionally components: { [process.client && 'VueEditor']: () => import('vue2-editor') }
For me it was the case of using apex-charts in Nuxt, so I had to add ssr: false to nuxt.config.js.
I try to implement gulp to my durandal project as explain on Durandal gulp doc
main.js file is successfully build, but when trying to click something that will open a modal dialog, it will show this error (firefox):
TypeError: req.toUrl is not a function
url = req.toUrl(nonStripName),
main.js (line 48306, col 16)
here my configuration on gulpfile.js
var gulp = require('gulp');
var durandal = require('gulp-durandal');
gulp.task('default', function(cb)
{
durandal({
baseDir: 'public_html/app',
main: 'main.js',
output: 'main.js',
almond: true,
minify: false
})
.on('error', function(err) {
console.error('error. ' + err);
})
.pipe(gulp.dest('public_html/build'))
.on('end', cb);
});
I'm also came across with this answer https://stackoverflow.com/a/23329383/1889014
But i'm not sure if this is related to my issue.
Can someone please help or guide me through this ? Thanks!
I also had this issue using gulp, Durandal and modal dialogs. Adding a getView function to the viewmodel that returns the url for the view fixes it.
eg
function getView() {
return "views/theView.html";
}
I am sure there must be a better way of solving this problem but this seems to work in the few places I have needed it.
I have experienced this error due to writing the view name using the wrong case. E.g. if the file is called myView.html but you require 'MyView'.
I am not building using gulp-durandal because it's giving very odd errors, and requirejs is working much better directly. I fixed this error by including all views manually in my requirejs build config.
include: [
'text!customWidgets/alertsSection/title.html', //custom
'text!customWidgets/alertsSection/body.html', //custom
'text!customWidgets/exclusions/body.html', //custom
'text!customWidgets/exclusions/title.html', //custom
'text!customWidgets/submit/body.html', //custom
'text!customWidgets/submit/title.html', //custom
]
There are many more files in my include due to the nature of durandal and the dynamic loading of views... but I don't want to spam everyone :)