We use to download folders and files and while on the Visual studio we started to use the nuget. Now when I am working on the angular js, I am seeing bower and npm. I want to ask are the equivalent to download? If it is, what benefits they give us? Or they worked after the download?
For example see the below extract from the website.
via bower:
$ bower install angular-loading-bar
via npm:
$ npm install angular-loading-bar
via CDN:
<link rel='stylesheet' href='//cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.7.1/loading-bar.min.css' type='text/css' media='all' />
<script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.7.1/loading-bar.min.js'></script>
Related
I'm new to Vue, this may seem a basic question but I'm stuck with this problem:
I have installed Vue 3 using npm, according to the documentation:
https://v3.vuejs.org/guide/installation.html#npm
I have included Vue to my html file, like so:
<script src="../node_modules/vue/dist/vue.csj.js"></script>
But I get this error in the console:
vue.cjs.js:3 Uncaught ReferenceError: exports is not defined
at vue.cjs.js:3 (anonymous) # vue.cjs.js:3
I have seen some similar issues and I know it has something to do with browser compatibility and webpack; like the browser does not natively recognise import/export commands but it seems like everything is installed correctly and I don't know how to solve this issue. I couldn't find anything helpful in the documentation.
So my question is
How do I successfully install Vue and include it in my working files?
I don't think you followed that guide correctly. I would recommend you install the Vue CLI, then create your app using the cli:
$ npm install -g #vue/cli - install cli
$ vue create my-app
https://cli.vuejs.org/
However, if you don't want the CLI, I'd recommend a CDN:
<script src="https://unpkg.com/vue#next"></script>
Or you can just copy the contents of the file to your app, maybe vue.js
(https://unpkg.com/vue#next).
And you then on your html <script src="vue.js"></script>
Firstly ,
npm install -g #vue/cli After ,
on commandline run vue ui
and create a project
I am using laravel 8 and now I want install Vue.js. I am trying like this
composer require laravel/ui
php artisan ui vue
php artisan ui vue --auth
UPDATE: If you want to completely avoid Inertia / Livewire (Alpine.js) scaffolding in your Laravel ^8.0 applications and use Vue instead - install Laravel UI, which will most likely be maintained indefinitely (scaled to practical software lifetime).
Instructions for installing Vue (and old auth scaffolding) in your Laravel app:
run composer require laravel/ui
run php artisan ui vue for just installing Vue.
run php artisan ui vue --auth for scaffolding out the auth views.
run npm install && npm run dev
How ever, if you still want to use Vue.js with Livewire scaffolding, use the following instructions.
IMPORTANT: Please note that Vue.js takes control of the DOM once installed, detaching nodes and replacing it, removing other JS listeners. So, if you are using Livewire on the same page with Vue, the Alpine.js that comes with Livewire scaffolding wont work. As a workaround you can use Livewire VueJS support plugin.
run npm install --save vue
Add the following to your resources/js/app.js:
window.Vue = require('vue');
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
const app = new Vue({
el: '#app',
});
Create an ExampleComponent.vue in the resources/js/components directory
<template>
<div>Hello World.</div>
</template>
<script>
export default {
mounted() {
console.log("Example component mounted");
}
};
</script>
Add <script src="{{ asset('js/app.js') }}" defer></script> in the <head> section of your layout file (resources/views/layouts/app.blade.php)
Add id="app" to <body> or main <div> in your layout file (resources/views/layouts/app.blade.php)
Add <example-component /> to your view
Run npm run dev or npm run watch
Finally, open up the devtools, and in the console log you should see Example component mounted
In laravel 8 project run following commands to install vue.js
run composer require laravel/ui
Install Vue php artisan ui vue
Install Vue with auth php artisan ui vue --auth
run npm install && npm run dev
I wasted so much time with this and don't want people to go through the same, so I will teach you how to install Vue.js and make it work fast.
If you want to start from scratch
replace the LaravelProject with your project name
laravel new LaravelProject
Install Vue.js on your Laravel 8 application
run the following commands
composer require laravel/ui
php artisan ui vue
php artisan ui vue --auth
npm install
npm run dev
npm run watch
Now that you have installed everything you need, go to a blade view and add the following code inside <body></body>
<div id="app">
<example-component />
</div>
<script src="{{ mix('/js/app.js') }}"></script>
If you did everything right you will see the following text on the rendering of your view
Example Component
Im an example component.
And in your console:
Component mounted.
You can install Vue 3 on your laravel project via three different ways:
Import it as a CDN package on the page
Download the JavaScript files and host them yourself
Install it using npm
1. Via CDN
include following code in your HTML file:
<script src="https://unpkg.com/vue#next"></script>
or use the following link for production:
https://cdnjs.com/libraries/vue
2. Download and Host yourself:
Download it from GitHub here:
https://github.com/vuejs/vue-next
3. Via npm
npm is the recommended installation method when building large scale applications with Vue. It pairs nicely with module bundlers such as Webpack (opens new window)or Rollup (opens new window). Vue also provides accompanying tools for authoring Single File Components.
Run this command in your terminal to get the latest stable version
$ npm install vue#next
Followed by:
npm install
Run a Command
npm install vue
In resources/js/bootstrap.js
window.Vue = require("vue/dist/vue.min");
And then run command
npm run dev
You can try npm install --save vue
You can install vue on laravel 8 by simply running below commands to install laravel ui:
composer require laravel/ui
And if you want authorizations such as login page, registartion page scaffolding then run below command from the folder where laravel project is installed:
php artisan ui vue
After running above commands run to install all dependencies and compile all style resources:
npm install
npm run dev
npm run watch
Setting up Vue in Laravel
run composer require laravel/ui
Install Vue php artisan ui vue
if you Install Vue with auth use php artisan ui vue --auth
add after in page master
run npm install
run npm run dev
run PHP artisan serve
In existing project of Laravel 8 it's better to do this installation which gets in one line:
npm i -D vue#next #vue/compiler-sfc vue-loader#next
For your project to work correctly it's also important to check webpack.mix.js, it should look this way:
mix.js('resources/js/app.js', 'public/js').vue()
.postCss('resources/css/app.css', 'public/css', [
//
]);
As well while working with project don't forget:
npm run watch
Hope it was helpful!
A pretty simple and straightforward set of instructions
https://laravel2020.com/2022/01/25/how-to-install-vue-3-on-an-existing-laravel-8-project/
**Install Vue + Laravel 8
composer create-project laravel/laravel projectName --prefer-dist
composer require laravel/ui
php artisan ui vue
npm install
npm run dev
npm i vue-loader
npm install vue-router vue-axios
npm run dev
Success.
suppose i am working with asp.net mvc with VS2013 IDE. we can download angular-ui-router js file from any web site and copy that file in script folder of my project and refer those js file in web pages.
so my question is why i should use bower or npm to download js files like below example. please tell me extra advantage of using bower or npm to download js files ?
bower install
$ bower install angular-ui-router
npm install
$ npm install angular-ui-router
thanks
If the library evolves/updates or if the project is moved, those package managers allows to keep up to date with all the needed plugins, without having to look for each one, download the last/needed version of each one, and moving them where you need.
You don't need to use them if you don't need them. As any tool, they are there if you need them.
I installed node.js, run apache via xampp, and configured my apache server so that I can use www.example.com as my practice server domain on my local machine.
I started my command prompt as admin and typed the following lines but and they all ran successfully:
install vue-cli
$ npm install --global vue-cli
create a new project using the "webpack" template
$ vue init webpack my-project
install dependencies and go!
$ cd my-project
$ npm install
$ npm run dev
I followed the cli installation section on https://v2.vuejs.org/v2/guide/installation.html
When I go to my folders, all the vue.js files are installed inside 'my-project', but when I go to my apache server at www.example.com or www.example.com/my-project, a blank page shows. And if I got into my index.html file in the 'my-project' folder and edit it to:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>project3</title>
</head>
<body>
<div id="app">sdfsf</div>
<!-- built files will be auto injected -->
</body>
</html>
I just get a blank page with the text sdfsf. What am I doing wrong? why isn't vue.js hello install screen page loading?
When you run:
npm run dev
It starts a Node JS server. The exact command can be found in package.json, and you can see the result by going to http://localhost:8080/.
I'm trying to use Polymer on a new project, and was trying to avoid using Bower in favor of NPM for front-end dependency management.
The getting started page gives instructions for using Bower (and using a .zip file, etc...) but no mention of NPM.
I have used NPM by pointing directly at a GitHub repo before, but I cannot seem to get this to work for Polymer.
When I run this:
npm install git#github.com:Polymer/polymer.git#v1.0.5
I get this error:
npm ERR! notarget No compatible version found: git#'github.com:Polymer/polymer.git'
npm ERR! notarget Valid install targets:
npm ERR! notarget ["0.1.0","0.1.1","0.1.2","0.1.3","0.1.4","0.1.5"]
Is there something I'm missing, or do I need to bite the bullet and use Bower?
Since the earlier answers, Polymer has now indeed become available on NPM. To install it:
npm i Polymer
Note that it doesn't include the standard elements collection; those can be found here:
npm i npm-polymer-elements
You can then include them in your HTML:
<!-- for custom elements -->
<link rel="import" href="/node_modules/#polymer/polymer/polymer.html"/>
<!-- for standard elements -->
<link rel="import" href="/node_modules/paper-button/paper-button.html"/>
<paper-button>click</paper-button>
Unfortunately loading Polymer through webpack currently doesn't seem possible yet, meaning if your node_modules (or bower_components) folder isn't in a publicly accessible location, you may want to make a Grunt/Gulp task to copy it over for after future updates...
The main problem with Polymer is that the tagged build commits don't have a package.json, making it impossible to install them with npm (e.g. see v1.1.1). This means that in order to install Polymer with npm you'll need some helper tool. Perhaps the best candidate for this is Napa.
Napa is a package for installing git projects that do not have a (valid) package.json. The npm page already explains how to use it, here a quick summary for Polymer:
npm install napa --save-dev
Update your package.json to include this (replace x.y.z with the version you want):
{
"scripts" : {
"install" : "napa"
},
"napa" : {
"polymer" : "polymer/polymer#vX.Y.Z"
}
}
Note that napa just clones the repo into the node_modules folder, hence no dependencies of polymer will be installed alongside of it, but you can keep all of the configuration in your package.json instead of having to use bower.
EDIT 2016/10/25
The Polymer team announced at the Polymer Summit 2016 that they will be looking into supporting npm via yarn.
[sudo] npm install -g yarn
yarn add Polymer
yarn install --flat
OLD AWNSER
There is currently no way I know of to get polymer running with NPM.
Polymer is meant to work with Bower. All dependencies of a Polymer that are declared in https://github.com/Polymer/polymer/blob/master/bower.json like webcomponentsjs will not be downloaded. Therefor if you don't want to download every dependency manually you should use bower.
Try installing bower method!
"npm install -g bower"
Then type inside your folder:
"bower init"
Follow the instructions, then type:
"bower install --save Polymer/polymer
Create an index.html file and start to work!!!