The target is to import module "mint-ui".(https://unpkg.com/mint-ui#2.2.13/)
Logic of my web: Guest will visit my index.html first, and then routed by vue to certain component.
I tried to import it with
<script src="">
in my index.html, but in my certain html, when i use some function of mint-ui, it doesn't work.
I tried to
import {component} from 'mint-ui' or from 'url' or from 'path/to/js/on/disk', the page just doesn't turns out.
How should I import this module?
Thank you all very much!
mint-ui doc guide:
https://mint-ui.github.io/docs/#/en2
import mint-ui:
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">
<!-- import JavaScript -->
<script src="https://unpkg.com/mint-ui/lib/index.js"></script>
usage:
<div id="app">
<mt-button #click="handleClick">Button</mt-button>
</div>
Related
I want to some js file load after page loading through laravel vite compilation.
Am doing all file compile in app.js
//plugins:css
import '../admin/assets/vendors/mdi/css/materialdesignicons.min.css';
import '../admin/assets/vendors/css/vendor.bundle.base.css';
// plugin
import '../admin/assets/vendors/jvectormap/jquery-jvectormap.css';
import '../admin/assets/vendors/flag-icon-css/css/flag-icon.min.css';
import '../admin/assets/vendors/owl-carousel-2/owl.carousel.min.css';
import '../admin/assets/vendors/owl-carousel-2/owl.theme.default.min.css';
import '../admin/assets/css/style.css';
//footer:files
import '../admin/assets/vendors/js/vendor.bundle.base';
// <!-- Plugin js for this page -->
import '../admin/assets/vendors/chart.js/Chart.min';
import '../admin/assets/vendors/progressbar.js/progressbar.min';
import '../admin/assets/vendors/jvectormap/jquery-jvectormap.min';
import '../admin/assets/vendors/jvectormap/jquery-jvectormap-world-mill-en';
import '../admin/assets/vendors/owl-carousel-2/owl.carousel.min';
// End plugin js for this page
// <!-- inject:js -->
import '../admin/assets/js/off-canvas'
import '../admin/assets/js/hoverable-collapse';
import '../admin/assets/js/misc';
import '../admin/assets/js/settings';
import '../admin/assets/js/todolist';
// <!-- endinject -->
// <!-- Custom js for this page -->
import '../admin/assets/js/dashboard';
These are some footer file i want to load in lastly not load before of page loading
why i cant import my class when i am using the app.js in my html file?
In the console is always Cannot use import statement outside a module
Html snippet
<!-- Scripts -->
<!-- Bootstrap -->
<script src="assets/plugins/bs/bs.js"></script>
<!-- APP -->
<script src="assets/js/SmashTheHamster.js"></script>
<script src="assets/js/Elements.js"></script>
<script src="assets/js/Session.js"></script>
<script src="assets/js/app.js"></script>
code in app.js (there is this error Cannot use import statement outside a module) and yes i exported my modules with export defaut MODULE
import elements from "./Elements";
import SmashTheHamster from "./SmashTheHamster";
thx for help
You have to specify the type of the script tag using type="module"
When importing AlertifyJS, I am able to successfully use script tags in the HTML like this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/AlertifyJS/1.13.1/alertify.min.js"></script>
But if I move the import into JS using import * as alertify from './AlertifyJS'; I can't get my project to recognise the library. But everything I have read says this should work, am I doing something wrong?
I have also tried other examples like;
import alertifyjs from 'alertifyjs';
import * as alertify from 'alertify.js';
var alertify = require('alertifyjs');
You can't export JS from HTML. You can import it however, using the type="module" attribute on the tag:
<script type="module">
import alertifyjs from 'alertifyjs';
alertifyjs.myAlert("Browser dialogs made easy!");
</script>
I was using Bootstrap v3.3.6 and jQuery v2.2.4
Do i need to change the version not to get this error.
I am having index.html like below
<html lang="en">
<head>
<link href="css/style.css" rel="stylesheet">
</head>
<body class="nav-md">
<div id="app"></div>
<script src="./js/jquery.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/custom.min.js"></script>
<script src="/bundle.js"></script>
</body>
</html>
Index.js file
import 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { Router, browserHistory } from 'react-router';
import routes from './routes';
import './css/bootstrap.min.css';
import './css/custom.min.css';
import './css/style.css';
import './js/jquery.min.js';
import './js/bootstrap.min.js';
import './js/custom.min.js';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import {indigoA200} from 'material-ui/styles/colors';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
const muiTheme = getMuiTheme({
palette: {
primary1Color: indigoA200,
primary2Color: indigoA200,
},
});
ReactDOM.render((
<MuiThemeProvider muiTheme={muiTheme}>
<Router history={browserHistory} routes={routes} />
</MuiThemeProvider>)
,document.getElementById('app')
);
I am unable to see the UI, I am getting Bootstrap's JavaScript requires jQuery
From the given messages your jQuery Bootstrap and other files seem to not be properly set up and contain some errors and javascript is run on a single thread and hence it is terminating execution without reaching the completion of file and throwing the error.
Please check your jQuery and Bootstrap files and try to use the CDN's from Getting Start with Bootstrap
As far as I am aware you have used imports wrong and if your index.html file has the src you are not required to import it within the index.js file and can use all the classes similarly. Please look at
How to include third party libraries in React
I'm having a difficult time importing client side javascript files with flow router. Without flow router, the imports work as expected but the second I introduce flow router the files aren't loaded properly.
Here are what my files look like. Anybody out there ever experienced this ? You help is greatly appreciated! If you help me I will be 100% sure to mark your answer as so :)
client/main.js
import '../imports/startup/client'; // initialize all relevant javascript
import './main.html';
client/main.html
<head>
<title>Welcome </title>
</head>
<template name="visitorLayout">
<body>
{{> Template.dynamic template=header }}
{{> Template.dynamic template=main }}
{{> Template.dynamic template=footer }}
</body>
</template>
<template name="adminLayout">
<body>
{{> Template.dynamic template=main }}
</body>
</template>
imports/startup/client/index.js
import '../../ui/pages/landing_page/modernizr-2.6.2.min.js';
import '../../ui/pages/landing_page/jquery.easing.1.3.js';
import '../../ui/pages/landing_page/bootstrap.min.js';
import '../../ui/pages/landing_page/jquery.waypoints.min.js';
import './routes';
imports/startup/client/routes.js
import { FlowRouter } from 'meteor/kadira:flow-router';
import { BlazeLayout } from 'meteor/kadira:blaze-layout';
FlowRouter.route('/', {
action() {
BlazeLayout.render('visitorLayout', {
header : "header",
footer : "footer",
main : "index"
})
}
});
FlowRouter.route('/admin', {
action() {
BlazeLayout.render('adminLayout', {
main : "admin"
})
}
});
I guess is that you have problem with files loading order. It seems like your routes.js is loaded before main.html therefore there is no template available to render. To fix, try one of the followings:
Remove the line import './main.html'; in client/main.js, files under client folder do not need imported they are loaded automatically.
Create a new html file including the two templates you want to render (visitorLayout and adminLayout) under import folder or sub-folder of import, then import this new html file in routes.js. You also need to remove body tag inside those two templates, use div instead, because body is a special tag in Meteor and are not treated like other tags