I am just curious, I installed jquery via npm locally, and created HTML code below
<body>
<script>
import jquery from "jquery";
</script>
</body>
but it got error.
my browser is chrome v65 https://caniuse.com/#feat=es6-module The import is supported and doesn't need compiler
You have to add the type="module" attribute on the <script> tag or else it won't know that you're trying to include ES6 modules. You do this by:
<script type="module">
</script>
Then the jQuery module from npm doesn't export anything by default, so you have to import the whole file like so:
<script type="module">
import './node_modules/jquery/dist/jquery.min.js'
</script>
So I'm importing everything from the jQuery file. Then what we get is the variable jQuery and the variable $ assigned to the global window var.
Try import * as $ from 'jquery'
Related
I know one can develop vue.js application without build process, for example by including
<script src="https://unpkg.com/vue#3"></script>.
But what about plugins? Let's say I want to use vue-good-table, should I find a link for every minified javascript file for every plugin, and their dependencies too?
Is there an easy way to do it?
The reasons are explained here, I need to add functionality to existent web applications.
vue-good-table-next (for Vue 3) has a "global" build that works via CDN, but it expects window.vue to already be defined, so you'd have to import vue first (which defines window.Vue), and assign a global vue to Vue:
<script src="https://unpkg.com/vue#3.2.33/dist/vue.global.js"></script>
<script>
// workaround: VueGoodTable expects 'vue' to be defined
window.vue = window.Vue;
</script>
<script src="https://unpkg.com/vue-good-table-next#0.1.0/dist/vue-good-table-next.global.prod.js"></script>
<link
rel="stylesheet"
href="https://unpkg.com/vue-good-table-next#0.1.0/dist/vue-good-table-next.css"
/>
Then, VueGoodTable.default is defined as the vue-good-table plugin, which can be installed on the app instance via app.use():
<div id="app">
<vue-good-table ⋯></vue-good-table>
</div>
<script>
const app = Vue.createApp({⋯})
app.use(VueGoodTable.default)
app.mount('#app')
</script>
demo
I have a simple view in Vite + Vue + Sass. For styling i'm using external sass files for each component/view by using module ='classes' in the style tag and #use to use the specific scss file that should style the component/view. This doesen't trigger Vite HMR, I have to manually trigger a refresh in the browser for styles to change. HMR works just fine if I include the styles locally in the style tag, but it doesn't work with an external scss file. Here is an example:
<script setup>
import LogoNav from "#/components/navs/LogoNav.vue";
</script>
<template>
<LogoNav />
<main :class="classes.main">
<div :class="classes.loader"></div>
</main>
</template>
<style lang="scss" module="classes">
#use '#/sass/views/loading-profile';
</style>
My sass folder structure looks like this:
Where im using the global scss files like abstracts, base and utilities in main.scss:
And importing the main.scss file in main.js
Am I missing something crucial here? Have anyone encountered the same problem?
I'm trying to import vuetify on my vue app but my UI components are not looking correctly as shown here:
I read that this is caused when you are not using the v-app tag on the app.vue component. However, when I try this, all the elements of the app disappear on the browser. I also get 3-5 console errors about not being able to recognize vuetify functions or calling functions from undefined variables.
app.vue:
<template>
<v-app>
<router-view>
</router-view>
</v-app>
</template>
main.js:
//imports
import vue from 'vue';
import vuetify from 'vuetify';
//bindings
vue.use(vuetify);
//export
new vue({
vuetify,
render: a => a(app),
}).$mount('#app');
index.html:
<html>
<body>
<div id="app"></div>
</body>
</html>
Any help is greatly appreciated.
You might be missing the css file.
In your main.js add import 'vuetify/dist/vuetify.min.css'
More info: Getting started for Vuetify 2.0
I think if you are just starting, using vue add vuetify would be easier if you do have #vue/cli 3.0 or above.
I use vue cli and want to use bootstrap 4. I installed the bootstrap npm package and imported the styles with #import '../node_modules/bootstrap/scss/bootstrap.scss'; in App.vue.
But I can't get the javascript for modal and dropdown working. I tried to include these files in the index.html but it doesn't helped:
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
I don't want to use vue-bootstrap.
npm install jquery bootstrap popper.js --save
After that, import js and css in your main.js file. Like below. Hope it help
import jQuery from 'jquery'
import bootstrap from 'bootstrap'
import 'bootstrap/dist/css/bootstrap.css'
global.jQuery = jQuery
global .$ = jQuery
I'm trying to implement Veutify's text field
This is what it looks like for me right now:
And this is what it looks like when the text field is in focus:
These are my imports in main.js
import Vue from 'vue';
import Vuetify from 'vuetify';
Vue.use(Vuetify);
Am I missing an import or something?
I ran in the same issue, you need to wrap your application in a <v-app>.
The reason is that the border's color depends on the theme you're using. If you try to inspect the documentation you will see that the border's rule is something like .application--light .input-group .input-group__details: application--light is indeed a class added by v-app.
Same issue
But I fixed by this solution.
Please add this link(CDN) to you html file.
<link rel="stylesheet" href="https://unpkg.com/vue-material/dist/vue-material.min.css">
<link rel="stylesheet" href="https://unpkg.com/vue-material/dist/theme/default.css">
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-material"></script>
Don't worry
no crashing.