changing vue version inside a project - npm

Hi I would like to change a projects version of Vue using npm.
I tried :
npm install vue#latest --save
But when I tried :
npm v vue
I got the following :
vue#2.6.14 | MIT | deps: none | versions: 362
Reactive, component-oriented view layer for modern web interfaces.
https://github.com/vuejs/vue#readme
keywords: vue
dist
.tarball: https://registry.npmjs.org/vue/-/vue-2.6.14.tgz
.shasum: e51aa5250250d569a3fbad3a8a5a687d6036e235
.integrity: sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ==
.unpackedSize: 3.0 MB
maintainers:
- posva <posva13#gmail.com>
- yyx990803 <yyx990803#gmail.com>
dist-tags:
beta: 3.2.0-beta.8
csp: 1.0.28-csp
latest: 2.6.14
next: 3.2.23
published 5 months ago by posva <posva13#gmail.com>
Indicating that I still was on Vue 2.6.14.
Does anyone know how to solve this problem.

Well if you check the #latest tag on the versions tab on npm the latest version is really 2.6.14.
To use a Vue 3, you need to use a #next tag instead. But that version is not 100% compatible with 2.x so please check the migration guide before doing so (also lot of tooling is not compatible as well and because JS projects usually involve "a lot" of tooling, migration might be not that simple)

Related

How to connect Vue 3 with Vuetify?

I initialized a new, empty Vue application using Vue version 3. I then tried to add the plugin Vuetify with the command vue add vuetify, but received the following error. Any ideas on how to solve it?
Currently possible with Vuetify 3 Alpha:
Installation
In order for the installation to proceed correctly, vue-cli 4.0 is required. Further instructions are available at vue-cli. (check with vue -V)
Once installed, generate a project with the following command using the vue-cli 4.0:
vue create my-app
When prompted, choose Vue 3 Preview:
? Please pick a preset:
Default ([Vue 2] babel, eslint)
> Default (Vue 3 Preview) ([Vue 3] babel, eslint)
Manually select features
It is recommended to commit or stash your changes at this point, in case you need to rollback the changes.
cd my-app
vue add vuetify
Once prompted, choose v3 (alpha):
? Choose a preset: (Use arrow keys)
Default (recommended)
Prototype (rapid development)
Configure (advanced)
> v3 (alpha)
Usage
With Vue 3.0, the initialization process for Vue apps (and by extension Vuetify) has changed. With the new createVuetify method, the options passed to it have also changed. Please see the pages in the Features section of the documentation for further details.
Next, navigate to your project directory and add Vuetify to your project:
import { createApp } from "vue";
import vuetify from "./plugins/vuetify";
import App from "./App";
const app = createApp(App);
app.use(vuetify);
app.mount("#app");
Source:
https://next.vuetifyjs.com/en/getting-started/installation/#installation
https://next.vuetifyjs.com/en/introduction/roadmap
As of July 2020 Vue 3 is unsupported by Vuetify 2.x. All components are being refactored for Vue 3 per Vuetify's task task list: https://www.notion.so/d107077314ca4d2896f0eeba49fe8a14?v=5cc7c08e9cc44021a7c86a20f189b0ba
While there is no Vuetify 3, I'd use Vue 2.x with Vuetify 2.x and install the Composition API as a package/plugin:
npm install #vue/composition-api
Then importing to your project (in main.js):
import Vue from 'vue'
import VueCompositionAPI from '#vue/composition-api'
Vue.use(VueCompositionAPI)
And finally using it in your component:
// use the APIs
import { ref, reactive } from '#vue/composition-api'
Just be aware of the limitations of this method.
Vuetify is not currently compatible with Vue 3.
Given the number of breaking changes and implementation differences in Vue 3, the entire library needs to be rewritten.
As of Jan 2021, they are targetting a Quarter 1, 2021 release for an alpha version, but the average user shouldn't expect to see a release version until late in the year, possibly even early 2022.
Until then, there are other alternatives that are Vue 3 compatible, such as Prime Vue. I believe they have Material Design themes that can be connected and a decent number of components (albeit slightly lacking in the v-app style feature coordination).
EDIT: The Vuetify v3 BETA is now available with a full release likely in Summer/Autumn of '22.
You can try vue 3 with the alpha of vuetify https://next.vuetifyjs.com/
You Must Install Vuetify 3 using the command
npm i vuetify#3.0.0-beta.11
and add it using the instruction from https://next.vuetifyjs.com/en/
As of today Dec-4-2022 Vue 3 is released for Months,
even vuetify#3.0.3 is released but the latest npm is'nt updated it is still in next even its not in beta anymore,
also the vue-cli is in Maintenance mode and for a new Vue project they recommend using the Vite base install
so the best solution is to install it from npm with the latest release from GitHub like
npm i vuetify#^3.0.0
I hope they update it soon so you can install it without the version number

Build iohook from source (with electron 4.0.0 and vue)

I used vue-cli to create a vue app and then i added electron(4.0.0) via a plugin called vue-cli-plugin-electron-builder. Everything is ok and works properly.
The problem is with iohook which, as stated on their documentation, has prebuild versions for electron ABI <= 57 (in reality it's <= 64). It seems that on my project it automatically downloads and uses electron ABI(64) which is electron(3.0.0) (verified with node-abi).
electron(4.0.3/4) is ABI(69) (which is not supported). Judging by these circumstances i'm also considering that electron 4.0.0 has ABI(69) as well
iohook needs things specified in package.json [arch type, etc..] which i did specify.
iohook also wants me to npm run build but as of now it doesn't generate any build folder what so ever.
My solutions are:
Go back to electron 3.0.0
What are the differences between electron 3.0.0 and electron 4.0.x
Manually build iohook from source
Their documentation on manual building seems poor, at least for me. How do i actually do that? It's always throwing me errors / saying to cd in the lib's directory and npm run compile which doesn't work because arch type doesn't match.
As of now i want to manually build iohook.
UPDATE
I tried with electron 3.0.0 (barebones) and it's still throwing:
Error: Cannot find module 'F:\DOCS\OneDrive\Programming\NODE\type_analysis\dist_electron\builds\electron-v64-win32-x64\build\Release\iohook.node'
at webpackEmptyContext (webpack:///./node_modules/iohook_sync?:2:10)
at eval (webpack:///./node_modules/iohook/index.js?:10:80)
at Object../node_modules/iohook/index.js (F:\DOCS\OneDrive\Programming\NODE\type_analysis\dist_electron\index.js:252:1)
at __webpack_require__ (F:\DOCS\OneDrive\Programming\NODE\type_analysis\dist_electron\index.js:20:30)
at eval (webpack:///./src/background.js?:15:16)
at Module../src/background.js (F:\DOCS\OneDrive\Programming\NODE\type_analysis\dist_electron\index.js:1395:1)
at __webpack_require__ (F:\DOCS\OneDrive\Programming\NODE\type_analysis\dist_electron\index.js:20:30)
at eval (webpack:///multi_./src/background.js?:1:18)
at Object.0 (F:\DOCS\OneDrive\Programming\NODE\type_analysis\dist_electron\index.js:1406:1)
at __webpack_require__ (F:\DOCS\OneDrive\Programming\NODE\type_analysis\dist_electron\index.js:20:30)
UPDATE 2
Doesn't work with electron 2.0.0 either...
I also added the cmake-js thing in package.json
"cmake-js": {
"runtime": "electron",
"runtimeVersion": "2.0.0"
}
Tried electron-rebuild -f -w iohook as well, didn't solve the problem either
Support for Electron v2+ is here now (try iohook version 0.4+). We are currently working on the Win32/64 support for electron 4. All other platforms are fine. You can follow the debug here : https://github.com/wilix-team/iohook/pull/157

Nuxt generate show error: Cannot read property 'normalModuleFactory' of undefined

Recently I upgrade Nuxt from 1.4.0 to 1.2.x and Vuetify from 1.0.9 to 1.2.x. After that npm run dev works fine. but when I run Nuxt generate I get below error. I am stuck on this error since last night and can't find any idea why it's occurring. Any guidance will be helpful. Thank in advance.
nuxt:build Generating files... +138ms
nuxt:build Generating routes... +13ms
nuxt:build Building files... +314ms
ERROR
TypeError: Cannot read property 'normalModuleFactory' of undefined
- IgnorePlugin.js:96 IgnorePlugin.apply
[vue]/[webpack]/lib/IgnorePlugin.js:96:18
- Tapable.js:375 Compiler.apply
[npm]/[nuxt]/[tapable]/lib/Tapable.js:375:16
- webpack.js:33 webpack
[npm]/[nuxt]/[webpack]/lib/webpack.js:33:19
- builder.js:524 compilers.compilersOptions.map.compilersOption
[npm]/[nuxt]/lib/builder/builder.js:524:24
- Array.map
- builder.js:523 Builder.webpackBuild
[npm]/[nuxt]/lib/builder/builder.js:523:39
- builder.js:168 Builder.build
[npm]/[nuxt]/lib/builder/builder.js:168:16
package.json can be find here.
nuxt.config.js can be found here.
I tried to dig about it, but it seems to be generated through webpack. So I updated to webpack 4 too. But still it's throwing this error.
If you need any more details, I would be happy to provide.
After a long talk with developer community of nuxtjs. Here is solution.
This problem occur when we try to run nuxt generate but our local nuxt version !== global nuxt version.
So solution is either update global nuxt version by npm i -g nuxt or run project from local nuxt version node_modules/.bin/nuxt generate

How to install plugins in CKEditor 5?

I install CKEditor 5 in my project by npm:
npm install --save #ckeditor/ckeditor5-build-classic
Then i follow the Doc to install some plugins eg : alignment
See the Alignment plugins install Doc
npm install --save #ckeditor/ckeditor5-alignment
And i change my code like this:
import Alignment from '#ckeditor/ckeditor5-alignment/src/alignment';
ClassicEditor
.create( document.querySelector( '#editor' ), {
plugins: [ Alignment],
toolbar: [ 'alignmentDropdown']
} )
.then( ... )
.catch( ... );
Then something went wrong:
Failed to compile.
./node_modules/#ckeditor/ckeditor5-alignment/src/alignmentui.js
Module not found: Error: Can't resolve '#ckeditor/ckeditor5-ui/src/dropdown/button/createbuttondropdown' in '/Users/wangyao/project/katabat-demo/ckeditor5/node_modules/#ckeditor/ckeditor5-alignment/src'
I think it is because of the version,
On the official website,i saw the ckeditor5-build-classic version info :
And the the plugin Alignment version info :
Am I doing this wrong?
is CKEditor 5 incomplete because of the alpha version ?
It is appropriate to use CKEditor 5 in alpha version ?
EDIT (19.09.2018): The text alignment, table, highlight and font size/family features are all available for installation. The situation about which #KingOfSocket asked was a temporary situation when some of these plugins were under development. Check out those feature guides to learn how to install them.
OUTDATED: You were unfortunate to find the alignment feature before its first official release. It doesn't work because the 0.0.1 version is published only to satisfy our development environment's requirement that a package we work on is on npm (actually, this is Lerna's requirement).
The first working version of the alignment feature will be released together with CKEditor 5's 1.0.0-beta (within a ~month). For now, you can find its demo in the nightly docs (see Text alignment). You can also try to build the editor with it, but you will need to set up the CKEditor 5's development environemnt.

angular bootstrap older versions removed from npmjs?

We had been using version 0.11.0 of angular-bootstrap from npmjs. It appears that version is no longer available on npmjs. From the commands below does this mean that someone actually unpublished the older packages?
prompt:~$ npm view angular-bootstrap time
{ modified: '2015-01-12T06:48:54.881Z',
created: '2014-01-29T21:54:32.213Z',
'0.0.1': '2014-01-29T21:54:37.589Z',
'0.0.2': '2014-01-29T22:03:08.814Z',
'0.0.3': '2014-01-29T22:51:49.998Z',
'0.0.4': '2014-02-11T15:14:17.078Z',
'0.11.0': '2014-06-24T07:06:56.435Z',
'0.13.0-SNAPSHOT': '2014-12-02T13:05:43.151Z',
'0.12.0': '2015-01-12T06:46:41.986Z' }
prompt:~$ npm view angular-bootstrap versions
0.12.0
I agree, the package seems to have been unpublished. You can still access it from the github history, as follows:
$ npm install "angular-ui/bootstrap#0.11.0"
(note that you may not need quoting, but some shells will interpret the # as a comment-begin character.) You can also use this syntax in dependencies inside package.json
If you have a project in production that depends on this, you should probably make a fork of the angular-ui/bootstrap repository and point towards that.
(I had some difficulty making this work on Windows, but it looks like you're on a Unixy system, so you should be fine.)
Ticket discussing this and the future is at https://github.com/angular-ui/bootstrap/issues/1636