I want integrate meteor-client-side from NPM in a vue.js Webpack project.
The project is generated with vueCli.
This is my main.js file:
import Vue from 'vue'
import App from './App'
require('meteor-client-side')
console.log(Meteor.status())
/* eslint-disable no-new */
new Vue({
el: 'body',
components: { App }
})
With console.log i get a eslint error 'Meteor is not defined', but when i try Meteor.status() on the browser console it works fine.
What i doing wrong?
I don't want use vue in meteor, i need meteor-client-side in this non meteor project.
Many thanks for help
Try
var Meteor = require('meteor-client-side');
console.log(Meteor.status())
If you want to use a node module in the code you need to assign it to a variable, like var $ = require('jquery');. But if the JS just does things on its own and you don't need a reference to it, you can just require it, so like:
var $ = var jQuery = require('jquery'); //sets $ to jquery
require('bootstrap'); //just extends jquery, no need to save reference
Related
I am following a tutorial for Vue that uses the following code:
let app
auth.onAuthStateChanged(() => {
if (!app) {
app = new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
}
})
This is supposed to make sure that Firebase loads the authState before mounting the app, if a user reloads the page.
However, I am using Vue 3 and the thus I can't initialize via new Vue() anymore, as you have to use createApp now.
I'm initializing & mounting my app the following way:
createApp(App).use(store).use(router).mount('#app')
Unfortunately, I am lost on how I can make sure that the DB still initializes the same way, and I was unable to find a proper solution (spent the last hour on google & SO).
Any help is highly appreciated, maybe I am just missing a simple concept for promises or something similar.
Thank you very much, stay healthy!
The Vue 3's createApp is same as Vue 2's new Vue(), returning Vue app instance:
let app;
auth.onAuthStateChanged(() => {
if (!app) {
app = createApp(App).use(store).use(router).mount('#app')
}
})
I have a problem i can't understand :
webpack.config.js
Encore
// directory where compiled assets will be stored
.setOutputPath('public/build/')
.copyFiles({
from: './assets/media',
// if versioning is enabled, add the file hash too
to: 'media/[path][name].[hash:8].[ext]',
})
// public path used by the web server to access the output path
.setPublicPath('/build')
// only needed for CDN's or sub-directory deploy
//.setManifestKeyPrefix('build/')
.addEntry('app', ['./assets/js/app.js'])
.splitEntryChunks()
// will require an extra script tag for runtime.js
// but, you probably want this, unless you're building a single-page app
.enableSingleRuntimeChunk()
[...]
;
app.js
// require jQuery normally
const $ = require('jquery');
// create global $ and jQuery variables
global.$ = global.jQuery = $;
require('../../assets/vendors/general/jquery/dist/jquery.js');
require('../../assets/vendors/general/popper.js/dist/umd/popper.js');
require('../../assets/vendors/general/bootstrap/dist/js/bootstrap.min.js');
require('../../assets/vendors/general/js-cookie/src/js.cookie.js');
require('../../assets/vendors/general/tooltip.js/dist/umd/tooltip.min.js');
require('../../assets/vendors/general/perfect-scrollbar/dist/perfect-scrollbar.js');
require('../../assets/vendors/general/sticky-js/dist/sticky.min.js');
require('../../assets/vendors/general/wnumb/wNumb.js');
require('../../assets/js/demo1/scripts.bundle.js');
require('../../assets/css/demo1/style.bundle.css');
require('../../assets/css/demo1/skins/header/base/light.css');
require('../../assets/css/demo1/skins/header/menu/light.css');
require('../../assets/css/demo1/skins/brand/dark.css');
require('../../assets/css/demo1/skins/aside/dark.css');
But On my page i get this error :
jquery.js:3850 Uncaught ReferenceError: PerfectScrollbar is not
defined
I don't understand why because perfect scrollbar is well required. Same thing if i do it with import. And same thing if i remove perfect scroll bar i got the same message with sticky js.
Thanks for your help,
Alex
Ok found the solution with Metronic support :
Encore.addPlugin(new webpack.ProvidePlugin({
PerfectScrollbar: require.resolve("perfect-scrollbar"),
}));
Ihave a app that opens a new window with content. I need special CSS for that window.
Code for opening the window is this:
var Printwindow = window.open("","","width=360,height=188");
var cssFile = Printwindow.document.createElement("link");
cssFile.rel = "stylesheet";
cssFile.type = "text/css";
cssFile.href = "../../content/label.css";
Printwindow.document.write("<head>" + cssFile.outerHTML + "</head><body onload='window.print();'>" + this.label.innerHTML + "</body>");
Printwindow.document.close();
Printwindow.focus();
the label.css is there when i just run it in localhost. But when i build it and eploy it to server it is missing. How can i include this label.css in the bundle so that it can find it?
If you are using webpack, you should reference the file so webpack finds it:
cssFile.href = PLATFORM.moduleName("../../content/label.css");
and do the import of PLATFORM:
import {PLATFORM} from 'aurelia-pal';
Hope it helps.
Personally, I would recommend that you create a component and compose that within a dialog or new window. This will allow you to avoid building your presentation layer within JS. If you created a custom-component, you could do the following:
<template>
<require from="label.css"></require>
{Content Here}
</template>
You could then compose this into a dialog.
Alternatively, if you're unable to make structural changes, then you should import PLATFORM from aurelia-pal and use it as such:
import {PLATFORM} from 'aurelia-pal';
// .. other code here ..
cssFile.href = PLATFORM.moduleName("../../content/label.css");
If you are still having issues, then it may be because you need to resolve your production server's base URL.
Update : see edit at the end
Follow up of my previous question here : Include Vue.js component in Wordpress plugin without CDN
The very pertinent answer from Okba is causing me headaches. How do I build something with Vue.js that I can use in wordpress ?
I work with Vue-cli. I have tried to build my project as a library using this command line :
vue-cli-service build --target lib --name myVueLibrary ./src/main.js
And then importing the dist/* files in wordpress :
wp_enqueue_script('myPlugin', plugin_dir_url(__FILE__) . './my-plugin.js', [], '0.1', true);
wp_enqueue_script('myVueLibrary', './vue-plugin/myVueLibrary.common.js', [], '0.1.0');
where my-plugin.js looks like this (I am using shortcodes to replace a <div> content with whatever my plugin puts there) :
var elements = document.querySelectorAll('[my-plugin-atts]');
elements.forEach(function (element) {
var atts = JSON.parse(element.getAttribute('my-plugin-atts'));
var vm = new Vue({
el: element,
created: function () {
this.atts = atts;
},
template: '<div class="plugin-container">{{atts.id}}</div>'
});
});
And I get the following error :
Uncaught ReferenceError: Vue is not defined
But ! If I replace my vueBaoViz.common.js import by a Vue CDN import, my wordpress plugin displays what I want it to display.
wp_enqueue_script('myPlugin', plugin_dir_url(__FILE__) . './my-plugin.js', [], '0.1', true);
wp_enqueue_script('vue', 'https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js', [], '2.5.16');
My guess is my Vue build is not ok, how do I build something I can use like that, and that packs Vue.js within itself ?
So, turns out i'm an idiot, I forgot to add plugin_dir_url(__FILE__) before the path when loading a local file. This solved my problem.
1 - You can use vue js - non spa, from cdn or with webpack look at the https://v2.vuejs.org/v2/guide/#Composing-with-Components for how you will use vue js in regular js files.
2- You can use vue-cli like a standart spa project with wordpress rest api : https://developer.wordpress.org/rest-api/
I've installed a Meteor phone authentication package mys:accounts-phone, which should add a phone.number subfield into users collection. I try to access this field as follows:
Meteor.user().phone.number
but typescript shows error
Property 'phone' does not exist on type 'User'.
On the other hand, I have custom props in users.profile, and can easily access them in this way.
Insecure is not yet removed. Autopublish is ON.
this happens sometime when our angular component is initialized but our meteor data is not reached from server.
try to use user injection in place of Meteor.user()
import {Component} from "#angular/core";
import { InjectUser } from 'angular2-meteor-accounts-ui';//<--**** import this****
#Component({
selector: "login-buttons",
template
})
#InjectUser('user') //<--*** add this***
export class LoginButtonsComponent {
user: Meteor.User; //<--*** add this ***
constructor(private router: Router) {}
}
now in user variable you will have all values of Meteor.User
if you want to print in html part use this
<div *ngIf="user">
{{user.phone.number}}
</div>
don't forget to install
meteor add accounts-password
meteor npm install --save angular2-meteor-accounts-ui
and in app.module.ts file
import { AccountsModule } from 'angular2-meteor-accounts-ui';
#NgModule({
imports: [
... other modules here
AccountsModule
],
hope this will work. if this not work let me know i will tell you one other solution
Got probable answer from Meteor docs.
It explains why username property appears. By default, Meteor publish only a number of fields considered to be public. To exposure any additional fields they must be published explicitly.
Not yet have time to test, but think it should work.
The other reason, with the same sympthoms, when publication code do not executed at server side. Try to put
Meteor.startup(() => {
// code to run on server at startup
Meteor.publish('userData', function() {
if(!this.userId) return null;
return Meteor.users.find(this.userId
//, {fields: {lastname: 1,}}
);
});
});
in a file within /server folder of your application.