This is the documentation. I am doing what they show.
main.js
import VueSimpleAlert from 'vue3-simple-alert'
const app = createApp(App);
app.use(VueSimpleAlert);
app.mount('#app');
And in my component I use this inside a function in my methods:
this.$alert("Hello");
The problem is that I get an error in the console
Uncaught (in promise) TypeError: this.$alert is not a function
Probably it's not prepared for the app.use. Did you try this:
import Vue from "vue";
import VueSimpleAlert from "vue-simple-alert";
Vue.use(VueSimpleAlert);
Or you can use the SweetAlert2 I saw the github repository of VueSimpleAlert the latest commit is from 3 years ago.
Related
I am working on a static website that uses NextJS. And, I want to embed Github Gist into this website. I tried several npm packages which were created for React. But, those packages seem to use browser features that are not available when my NextJS website generates on the server side. As an example, I used the ReactEmbedGist package. And, it gives these errors: "regeneratorRuntime is not defined" and "ReferenceError: self is not defined". So, What is the most efficient way to embed a Github Gist in a NextJS static application?
This could be achieved using Dynamic imports in NextJS. I used the same npm package (react-embed-gist) which I mentioned in the question.
Step 1
Import the react-embed-gist using NextJs dynamic imports. The "ssr" option should be set to false to disable the server-rendering. More details: https://nextjs.org/docs/advanced-features/dynamic-import
const ReactEmbedGist = dynamic(() => import("react-embed-gist"), {
ssr: false,
});
Step 2
Using the "react-embed-gist" package. More details: https://github.com/msaracevic/react-embed-gist#readme
<ReactEmbedGist gist="DevLaka/2e99090627052bd300b21aa09089366e" />
Update
After a while, "react-embed-gist" package didn't work for me. After about two hours of trying to troubleshoot it, I switched to another package called "react-gist" which works fine for my requirements. More details: https://www.npmjs.com/package/react-gist. The process was the same as the earlier one. Only the import statement should be changed.
Extention of the solution
Step 1
Even though the above solution works fine, according to docs, the way I used the dynamic import is used to import components that we wrote, not 3rd party libraries ( https://nextjs.org/docs/advanced-features/dynamic-import ). So, I have created a new component that can be reused as well.
import Gist from "react-gist";
export default function CodeBlock() {
return (
<div>
<Gist id="c88ac8ea9a43e3379acdc7a1fec3538a" />
</div>
);
}
Step 2
Importing my CodeBlock component using NextJS dynamic import and using it.
import dynamic from "next/dynamic";
const CodeBlock = dynamic(() => import("../components/CodeBlock"), {
ssr: false,
loading: () => <p>Loading</p>
});
export default function Home() {
return (
<div>
<CodeBlock id="c88ac8ea9a43e3379acdc7a1fec3538a" />
</div>
);
}
I have a fresh MeteorJS project and I have only installed chessboardjs and chessjs as follows
meteor npm install --save chessboardjs
meteor npm install --save chess.js
In my client main.js I have also imported the above packages as follows;
import Chessboardjs from 'chessboardjs';
import Chessjs from 'chessjs';
According to chessboardjs documentation, the way to display a board is as follows;
For html
<div id="board1" style="width: 400px"></div>
and for JS
var board1 = Chessboard('board1', 'start')
My question is how do I get to display this in MeteorJS and how do I get the two chess npm packages to work together?
Any working examples will be highly appreciated.
Maybe I should also mention that the whole purpose is to have a two player game.
There are three issues here.
Imports typo
importing css
Rendering
First your imports and the function you call need to be the same. You imports are
import Chessboardjs from 'chessboardjs';
import Chessjs from 'chessjs';
but they should be
import Chessboard from 'chessboardjs';
import Chessjs from 'chess.js';
Second, the npm package import usually not automatically imports the css as well. You need to actively locate it's path within the node_modules/chessboardjs folder and import it:
import 'chessboardjs/www/css/chessboard.css'
Finally, the Chessboard function can't inject code into the DOM, if the target element (the div with id board1) has not been rendered, yet.
To fix this you need to call it within onRendered:
Template.myTemplate.onRendered(function () {
var board1 = Chessboard('board1', 'start')
})
It won't work in onCreated, because the onCreated callback is called before the first time the Template has been rendered.
See http://blazejs.org/api/templates.html#Template-onRendered
I installed bootstrap-colorpicker npm package and I'm trying to import to my meteor app.
I did read "Using npm packages" and I tried to use their example: "import moment from 'moment';". but the problem is the there is a hyphen/dash in the middle of the name and it throws an error.
where should I look in the package to know how to import a npm package?
here is what i did:
import bootstrap-colorpicker from 'bootstrap-colorpicker';
Template.Test.onRendered(function() {
$('#m-color-picker').colorpicker();
});
I want the #m-color-picker to turn into a color picker, but it gives me error for the hyphen/dash.
You can use any name you like for the module in your code, eg
import bootstrapColorpicker from 'bootstrap-colorpicker';
or
import colorpicker from 'bootstrap-colorpicker';
Easy as that
For the second part of your question:
Usually the 'getting started' part of the README file should tell you how to import a module, although some older packages only mention how to require a package, which I presume is where you are coming from.
Quite often the default export will be what you need, so for example, referring to the momentjs web site:
var moment = require('moment');
You can usually assume this:
import moment from 'moment';
Basically this is taking the top level object from the module.
Your specific package doesn't seem to export anything, but just has some side-effects (perhaps it monkey-patches itself into jQuery?), so you can even drop the first part of the import and just say:
import 'bootstrap-colorpicker';
My project is a react project.
My website is a mutilanguage website, when I change the web language. moment.locale(lang) not working.
My code is:
const startDate = moment.utc(start).locale(lang);
const endDate = moment.utc(end).locale(lang);
whatever I set lang I check the startDate.locale() always is 'en'
startDate.format('ll') result always is English.
If the project was created using create-react-app, moment locales were probably excluded by default.
This is now documented in the "Moment.js locales are missing" section of create-react-app's troubleshooting guide.
Solution: explicitly import locales in addition to 'moment':
import moment from 'moment';
import 'moment/locale/fr';
import 'moment/locale/es';
// etc. as required
According to this github issue, from 2022 on or so, it has to be imported like so:
import moment from 'moment';
import 'moment/dist/locale/de';
moment.locale('de');
if this doesn't work, try this change:
import moment from 'moment/dist/moment';
I think if you do
import 'moment/min/locales'
Instead of individual import of each locale.
In my case it resolve my problem
I found the solution here: https://stackoverflow.com/a/55334751/8318855
You should use the moment.updateLocale function
I'm restructuring my Meteor/Blaze app to keep related items in 'modules'. But I'm experiencing an issue with the first template.
My file structure is this:
/imports
/modules
index.js
/admin
index.js
methods.js
/client
adminPage.html
adminPage.js
The index.js files are loading fine. The adminPage.js is being imported alongside adminPage.html. But when I created Template.adminPage.onCreated(...) I got an error message, that I cannot call a function on undefined.
Calling console.log(Template) in the adminPage.js file returns this:
Section showing the admin page in console.log output.
But if I run console.log(Template.adminPage) I get undefined. I'm not sure what to look for next.
I found the issue. Instead of the correct:
import { Template } from 'meteor/templating';
I used
import Template from 'meteor/templating';
You are probably missing an import statement in /imports/modules/admin/client/adminPage.js. At the top of this file add the following:
import './adminPage.html';