I always used npm to import backend modules.
Now, I see that you can import front-end modules as jquery, ChartJS etc.
In backend I can import modules with require("MyModule"), how can I import the frontend modules?
Thanks
Browsers don't natively support require like Node.js does.
However, browserify is a tool that will bundle your code containing require statements into a single JS bundle that you can load in the browser via a <script> tag.
Related
I'm creating a Vue-app that runs in the browser, but that can also be packed into a Capacitor app. I use Vite as bundler.
I use the #capacitor/camera plugin, which needs the following import in a component that uses the camera:
import { Camera, CameraResultType } from '#capacitor/camera';
The project is a Quasar framework app, which uses a separate src-capacitor folder for the Capacitor setup. Since the camera plugin is only installed in src-capacitor (not in package.json in the root of the project), this gives an error when running the app in a browser.
Is there any way to make the import conditional?
npm is great to download some js libraries, but including the into a vue app is really hard. i have no idea if there is an "official" way, but searching online i see so many different approaches.
sometimes it is imported in the app.js file, sometimes in the .vue files inside the tags. i have also seen that there are vue plugins that handle differently. how should i know if i have a vue plugin or not? i don't even know what the other option would be. like a vue module instead of a vue plugin?
is there a way that the vue app just includes/imports the stuff from node_modules so i can use it? so that after doing some npm install it is all available?
Npm just downloads the library into the node_modules folder and let's you access it where you need it.
If it's a vue component you need to import it in a vue file, because that's where you need it.
If it's a vue plugin you have to import it in the main js file because that's where it gets initalized in the whole app.
Looks like you are new to vue, I suggest you to take a look at this simple guide where you can learn some basic stuff.
I am using Electron-vue to create desktop application. I was trying to use boostrap-vue in my app. When I open the app I can see all the functionality of boostrap(button tables) but none of the styling associated with it (color, font etc..)
Am I doing something wrong or is bootstrap vue not compatible with electron style apps ?
The right installation procedure is described into the documentation: https://bootstrap-vue.org/docs
Into your project root folder, install prerequesites:
# With npm
npm install vue bootstrap-vue bootstrap
# With yarn
yarn add vue bootstrap-vue bootstrap
After that, you have to open the main.js file ant had this portion of code just before the "new Vue(...)" call:
// Activate bootstrap vue
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.use(BootstrapVue)
A blog post describe it perfectly: https://www.digitalocean.com/community/tutorials/vuejs-using-bootstrap4
BootstrapVue does support beig run under Electron.
See https://github.com/loopmode/electron-webpack-quick-start/tree/bootstrap-vue-ts and https://github.com/electron-userland/electron-webpack/issues/302#issuecomment-508911966
I was reading some blogs and apparently boostrap-vue does not work with desktop apps. I had more luck with using element UI
Could you please explain what is the main difference between different Vue installation methods for building a one-page website (page routing) with Vue and an Electron app using Vue:
importing Vue.js library via <script>
installing it via Vue-CLI
This installation guide doesn't really help understand the difference.
Is my site / app going to work slower if I just import Vue via <script>?
The <script> include is for including the Vue library in your webpage just like you would any other JavaScript library. Vue will be available on the window object for you to access globally. All external JavaScript must be included like this one way or another, even if you use vue-cli.
vue-cli is just a tool which generates Vue projects from templates. The setup really depends on the template that you use; I imagine most people would probably use the webpack template for medium to large sized Vue projects. This will initialize a node project directory containing all files necessary to develop, debug, test and build a Vue project. Webpack takes care of bundling all modules into a single JavaScript bundle which is included into the webpage via <script>. You can also benefit from vue-loader which allows you to write Vue components in *.vue files.
Is my site / app going to work slower if I just import Vue via <script>?
I mean, not really, no (your development speed might be hindered though since you won't benefit from all the bells and whistles that vue-cli sets you up with). Your question applies more to the development approach that you will follow for developing a Vue web application.
How can I use VueJS plugins if I don't use any Javascript Package Managers (NodeJS, NPM)?
I'm building an app made from a Bootstrap template and Server Side framework in Coldfusion (CFWheels).
I wanted to use some of VueJS's functionality such as two-way data-binding, easier integration of animation using animate.css, etc. I included it via
<script src="https://unpkg.com/vue"></script>
However, I can't use NPM as the app will be continually be improved and maintained in production.
I wanted to use some VueJS plugin such as VueJS typeahead.
When I include the script, and try the documentation, there are errors in the Javascript like being unable to import, export module, require. I think these are modern Javascript coding style that are not recognized in my setup because I didn't use the NPM and require those polyfills.
Is there a way that I can make those VueJS plugins work? Or if I can just include the polyfills needed and proceed with the plugin documentations so the browser will understand those new JS terms without using NPM or other Javascript Package Manager.