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
Related
I can run Office Add-ins with Vue 3 but I can't implement them into Nuxt 3. Does anyone have any experience with that?
Tried solutions:
https://github.com/nuxt/nuxt.js/issues/10097
Office.JS but in Nuxt
I want to see one working example in Nuxt 3 as Vue.
Example Doc for Vue:
https://learn.microsoft.com/en-us/office/dev/add-ins/quickstarts/excel-quickstart-vue
============ Edited ============
Working setup for Vue - This is Javascript;
vue create test-addin
yo office # Selecting manifest only.
Able to use "window.Office"
// ./src/main.js
import { createApp } from 'vue'
import App from './App.vue'
window.Office.onReady(() => {
createApp(App).mount('#app')
})
Didn't install any plugin or modules for Vue.
Same way for Nuxt 3 - This is TypeScript;
npx nuxi init test-addin
yo office # Selecting manifest only.
Cannot use "window.Office"
Error:
Property 'Office' does not exist on type 'Window & typeof globalThis'.ts(2339)
Installed #types/office-js but don't know how to implement it correctly for Nuxt 3.
Created a Vue3 + typescript project and added the rxjs 7 dependency using vue cli.
When I try import { Observable } from 'rxjs', I get Could not find a declaration file for module 'rxjs'
Trying to add #types/rxjs or adding a declare module 'rxjs' doesn't work.
Adding rxjs to the tsconfig types doesn't either.
RXJS 7 requires TS 4.2+
See the breaking changes section.
The version used by Vue 3 generator (at the moment of writing this), is ~4.1.5.
It is using ~ symbol, which won't use a 4.2.X version of TS.
I am following a tutorial on YouTube about Vue, everything was working fine until I installed Bootstrap Vue and I ran npm run serve, I keep getting this error:
98% after emitting CopyPlugin
WARNING Compiled with 2 warnings 2:21:24 AM
warning in ./src/main.js
"export 'default' (imported as 'Vue') was not found in 'vue'
warning in ./node_modules/bootstrap-vue/esm/vue.js
"export 'default' (reexported as 'Vue') was not found in 'vue'
BootstrapVue isn't compatible with Vue 3 yet:
BootstrapVue provides one of the most comprehensive implementations of the Bootstrap v4.5 component and grid system available for Vue.js v2.6
You'll either have to use Vue 2, use Vue 3 without Bootstrap or find another component library which is compatible with Vue 3.
Dear Stack Overflow / Vue.js / Rollup community
This could be a noob question for the master plugin developers working with Vue and Rollup. I will write the question very explicitly hoping that it could help other noobs like me in the future.
I have simple plugin that helps with form validation. One of the components in this plugin imports Vue in order to programatically create a component and append to DOM on mount like below:
import Vue from 'vue'
import Notification from './Notification.vue' /* a very simple Vue component */
...
mounted() {
const NotificationClass = Vue.extend(Notification)
const notificationInstance = new NotificationClass({ propsData: { name: 'ABC' } })
notificationInstance.$mount('#something')
}
This works as expected, and this plugin is bundled using Rollup with a config like this:
import vue from 'rollup-plugin-vue'
import babel from 'rollup-plugin-babel'
import { terser } from 'rollup-plugin-terser'
import resolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs'
export default {
input: 'src/index.js',
output: {
name: 'forms',
globals: {
vue: 'Vue'
}
},
plugins: [
vue(),
babel(),
resolve(),
commonjs(),
terser()
],
external: ['vue']
}
As you can see, Vue.js is getting externalised in this bundle. The aim (and the assumption) is that the client app that imports this plugin will be running on Vue, therefore there's no need to bundle it here (assumption).
The very simple src/index.js that the bundler uses is below:
import Form from './Form.vue'
export default {
install(Vue, _) {
Vue.component('bs-form', Form)
}
}
Rollup creates 2 files (one esm and one umd) and references them in in the plugins package.json file like below:
"name": "bs-forms",
"main": "./dist/umd.js",
"module": "./dist/esm.js",
"files": [
"dist/*"
],
"scripts": {
"build": "npm run build:umd & npm run build:es",
"build:es": "rollup --config rollup.config.js --format es --file dist/esm.js",
"build:umd": "rollup --config rollup.config.js --format umd --file dist/umd.js"
}
Everything works as expected up to this point and the bundles are generated nicely.
The client app (Nuxt SSR) imports this plugin (using npm-link since it's in development) with a very simple import in a plugin file:
/* main.js*/
import Vue from 'vue'
import bsForms from 'bs-forms'
Vue.use(bsForms)
This plugin file (main.js) is added to nuxt.config.js as a plugin:
// Nuxt Plugins
...
plugins: [{src: '~/plugins/main'}]
...
Everything still works as expected but here comes the problem:
Since the clients is a Nuxt app, the Vue is imported by default of course but the externalised Vue module (by the forms plugin) is also imported in the client. Therefore there is a duplication of this package in the client bundle.
I guess the client app can configure its webpack config in order to remove this duplicated module. Perhaps by using something like a Dedupe plugin or something? Can someone suggests how to best handle situation like these?
But what I really want to learn, is the best practice of bundling the plugin at the first place, so that the client doesn't have to change anything in its config and simply imports this plugin and move on.
I know that importing the Vue.js in the plugin may not be a great thing to do at the first place. But there could be other reasons for an import like this as well, for example imagine that the plugin could be written in Typescript and Vue.js / Typescript is written by using Vue.extend statements (see below) which also imports Vue (in order to enable type interface):
import Vue from 'vue'
const Component = Vue.extend({
// type inference enabled
})
So here's the long question. Please masters of Rollup, help me and the community out by suggesting best practice approaches (or your approaches) to handle situations like these.
Thank you!!!!
I had the same problem and I found this answer of #vatson very helpful
Your problem is the combination of "npm link", the nature of nodejs module loading and the vue intolerance to multiple instances from different places.
Short introduction how import in nodejs works. If your script has some kind of library import, then nodejs initially looks in the local node_modules folder, if local node_modules doesn't contain required dependency then nodejs goes to the folder above to find node_modules and your imported dependency there.
You do not need to publish your package on NPM. It is enough if you generate your package locally using npm pack and then install it in your other project npm install /absolute_path_to_your_local_package/your_package_name.tgz. If you update something in your package, you can reinstall it in your other project and everything should work.
Here is the source about the difference between npm pack and npm link https://stackoverflow.com/a/50689049/6072503.
I have sorted this problem with an interesting caveat:
The duplicate Vue package doesn't get imported when the plugin is used via an NPM package (installed by npm install -save <plugin-name> )
However, during development, if you use the package vie npm link (like npm link <plugin-name>) then Vue gets imported twice, like shown in that image in the original question.
People who encounter similar problems in the future, please try to publish and import your package and see if it makes any difference.
Thank you!
Hello SO community and Angularians!
So, I am midway developing a huge platform in Angular 2. And I realized that many external libraries and dependencies for Angular 2 are migrating to the new Angular 4. Giving me many errors, obviously.
I could fork these libraries and use the forked versions and subscribe to main library development or, I could just upgrade to Angular 4 my project.
Questions to be answered in order to determinate if it's worth for me to migrate:
Compatibility with Angular 2.4
I have found some adaptations to ensure compatibility with legacy, like this: https://github.com/angular/angular/commit/e99d721
Changes app wide
Do I have to go through my whole app and start fixing things?
I mean, are main functionalities reworked in such way that I will have to review many of them?
Or, are there many build/core incompatibilities that will keep me days occupied fixing compile errors/warnings instead of developing?
I am not asking for someone to do the research for me, I am asking people that maybe already went through this process or simply know well both versions in order to give me some experience tips, clarifications, etc.
At the moment, I am doing my research here:
https://github.com/angular/angular/blob/master/CHANGELOG.md
http://angularjs.blogspot.it/2017/03/angular-400-now-available.html
https://learninglaravel.net/angular-4-new-features-and-improvements
UPDATE
I just migrated to Angular 4. The link that #PierreDuc put in his answer is a very nice tool to have a decent guideline in the migration process.
I would recommend:
Read new features and update yourself with Angular 4. This was specially useful: https://angularjs.blogspot.it/2017/03/angular-400-now-available.html
Follow Angular's guideline and modify your project: https://angular-update-guide.firebaseapp.com/
I would also recommend to commit your current project, create a new branch in your dev repository and proceed with migration in that branch.
An issue that I encountered:
Input, Output and ContentChild will be imported from a wrong path.
My case:
import { Component, OnInit, OnDestro } from '#angular/core';
import { Input, ContentChild } from "#angular/core/src/metadata/directives";
Solution:
import { Component, OnInit, OnDestroy, Input, ContentChild } from '#angular/core';
If you check the changelog there are a couple things you need to keep in mind:
Before updating
Ensure you don't use extends OnInit, or use extends with any lifecycle event. Instead use implements <lifecycle event>.
Stop using DefaultIterableDiffer, KeyValueDiffers#factories, or IterableDiffers#factories
Stop using deep imports, these symbols are now marked with ɵ and are
not part of our public API.
Stop using Renderer.invokeElementMethod as this method has been
removed. There is not currently a replacement.
During the update
Update all of your dependencies to version 4 and the latest typescript.
If you are using Linux/Mac, you can use: npm install
#angular/{animations,common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router}#4.0.0
typescript#latest --save
If you use animations in your application, you should import
BrowserAnimationsModule from #angular/platform-browser/animations in
your App NgModule.
Replace RootRenderer with RendererFactory2.
Replace Renderer with Renderer2.
After the update
Rename your template tags to ng-template.
Replace OpaqueTokens with InjectionTokens.
If you call DifferFactory.create(...) remove the ChangeDetectorRef
argument.
Replace ngOutletContext with ngTemplateOutletContext.
Replace CollectionChangeRecord with IterableChangeRecord
source
Angular team has announced , let's not call angular 2 or angular 4 let's call it Angular and there will be major update for every 6 months.I have faced the issue in angular v4.0.0 so change the configuration in webpack
new webpack.ContextReplacementPlugin(
// The (\\|\/) piece accounts for path separators in *nix and Windows
/angular(\\|\/)core(\\|\/)#angular/,
helpers.root('./src'), // location of your src
{} // a map of your routes
),
And install #angular/animations package and import in app.module.ts file
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
#NgModule({
imports: [
BrowserAnimationsModule
]
})
I will prefer to update to latest version of angular. Angular V4.0.0 has reduced the packages weight and they have increased the performance.