Unfortunate in current study migration of one big old JS project we can not use npm
I would like to add vuelidate support for Vue 3 but don't see how I can do it without npm
By official documentation from https://github.com/vuelidate/vuelidate/tree/next
I see that I should to do
npm install #vuelidate/core #vuelidate/validators
# or
yarn add #vuelidate/core #vuelidate/validators
But how to do this like it was done for browser read-only bundle vuelidate with Vue 2 https://github.com/vuelidate/vuelidate#installation ?
Here some example:
https://jsfiddle.net/b5v4faqf/
For Vue 3 I see this error
Update
So the problem is that since you're not bundling you can't include as a compiled dependency, and since you're using vue2 you can't use an available compiled dependency via CDN.
The problem is that even though vuelidate is available through the jsdelivr CDN for Vue 3, it is not a compiled package and will not run with your project. The available package might work for something like snowpack, but that's for local development.
You can...
wait until it is available for vue 3 as a bundled dependency that you can
include the way you can for vue 2
use vue2 (I've had to do this for a project, wasn't happy about it, but was the simplest way to do it)
or create your own bundle and serve it with your project
https://www.jsdelivr.com/?query=author%3A%20vuelidate
Related
I need help. I'm developing a vue-3 (Quasar/Electron) app with a separate component library. What I'm trying to get working is to develop the component library locally alongside the main app with hot reload.
It's pretty simple, I already have the component library configured as a Vue plugin. If I push to NPM and add it to my project as an npm dependency, everything works fine. What doesn’t work is when I use yarn link to symlink locally and then add it the same way:
import { MyComponentLib } from 'my-component-lib';
app.use(MyComponentLib);
This worked fine on vue-2 as any changes to the local component lib would get reloaded and immediately shown during development. However with vue-3, you can only load a plugin once (even in development). After the first load you will get a warning: "[Vue warn]: Plugin has already been applied to target app.".
You basically need to restart the app everytime to see changes to your local component library. Does anyone know how to get around this?
ASP.NET has a nuget package called ReactJS.net which is capable of running Facebook React v16+ code.
I'd like to integrate Office UI Fabric, but the react package is only available as an NPM package, where I'd run
npm install office-ui-fabric-react --save
Is it possible to take the contents of this code and integrate it into ASP.NET (MVC/Core)?
Should I "do something" with the github source and add it to my code? (e.g. rename the necessary files to jsx)
Should I create a temporary node project, install the package, and manually copy data over?
Is there another way I'm not listing (a utility, etc)
I have not used the ASP.NET ReactJS.net Plugin, but from what I can gather it requires you to generate a bundle that contains all the dependencies you want to use with it and include in your ASP.net template.
To create a bundle that excludes react from the office-ui-fabric-react module, I would use webpack to build the bundle and the exclude react as a dependency bundled in the bundle.
https://webpack.js.org/configuration/externals/
I'm building a meteor app with meteor-angular2 package. But with .css it's quite unfunny so far.. As soon is try to import a css file in a component, meteor is "modules-loader" is telling that this is not a module i'm trying to import (true basically :D)
Now i'm fiddling around with a basic webpack+ng2 setup and i can get it easily running with direct imports of .css files in typescript - just because i can configure the webpack loaders correctly (you can even get css-modules in this way with ng2!)
So, in the docs of the latest meteor angular2 package release it is somwhere written that it is basically packing all the stuff with webpack.
What's the right way to modify this underlaying webpack config? Is it even possible? Do i have to fork the package repo to change it? At a first shot i didn't find the webpack stuff in there..
I'm starting new app with meteor and I'm confuse when I have to install packages.
Meteor gives the possibility to install packages just like that:
meteor add <username>:<packagename>
Ok, very easy. The problem is that I would like use bower then, How I have to install the packages? For example angular.
meteor add urigo:angular
is the same as? what is the difference*? How I have to perform?
bower install angular
The logical conclusion could be use one of them, but I have seen in examples that they can be toguether.
*the package is recorded in different places, but the operation is the same?
With
meteor add <developer>:<packagename>
you add packages from the Meteor specific package database. Meteor packages are completely integrated into the Meteor eco-system and may contain both server and client side code.
You should use "meteor add" whenever possible.
To find Meteor packages you can use Atmosphere
Bower on the other hand is a framework independent package system for client side (mostly) JavaScript packages. It's not well integrated with Meteor - Although community packages exists to simplify usage of Bower packages with Meteor.
To answer you specific example:
meteor add urigo:angular
This command adds the Angular package of the Angular-Meteor project to your Meteor application. It's not only Angular but does also include some Angular services ($meteor) to provide integration of Meteor with Angular.
It even adds Angular support to the server side to some degree.
bower install angular
only downloads the official minified and non-minified javascript file of the latest Angular version for client side use.
You could use the Bower version with Angular but you wouldn't get the benefits of the integration.
While I don't use Bower myself, check out this package: https://atmospherejs.com/mquandalle/bower. I think it may help answer your question.
My understanding is that Bootstrap 3 is compiled using LESS. Meaning, if I want to customize Bootstrap's theming/look-and-feel, I would modify the variables in the various LESS files, and then compile my custom Bootstrap lib.
My understanding is that Grunt is a build system for JavaScript, that does things like minification, uglification, etc.; and that it has a pluggable architecture for defining custom behaviour.
My understanding is that Bower is a dependency management tool that can run standalone (from the shell) or as a Grunt plugin.
If anything I have said so far is not true or is mislead, please begin by correcting me!
Assuming I'm more or less correct with my understanding, then my question is:
How could I use LESS, Grunt and Bower together for creating a customized Bootstrap-based app? Would I use LESS for the custom Bootstrap, then use Bower to pull that custom Boostrap into my app as a dependency, and then use Grunt to compile/minify my app's JS/CSS resources? Or am I way off track and completely off-base here?
I think you are right.
Start by downloading Bootstrap's master.zip, also make sure you have installed Node.js and npm.
Than run:
npm install
grunt dist (which recompiles Boostrap, CSS and Javascript)
Now you can inspect Bootstrap's Gruntfile
and find out how to configure the Grunt task to build and extend Bootstrap.
Bootstrap does not use Bower for front-end package management (although you can install Bootstrap with bower too), but the Roots Wordpress theme does use Bower:
Roots uses Bower for managing Bootstrap, jQuery, Modernizr, and
Respond.js.
You can install any package with bower install --save <package-name>
Bower uses the .bowerrc file to install these packages.