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.
I'm trying to use bootstrap-vue on my Vue-JS 3 project, but i got an error
Using npm run serve
And in my browser I got
Error on the browser
i used this command in my terminal
npm install vue bootstrap bootstrap-vue
and here is my main.js code
import { createApp } from 'vue'
import App from './App.vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
// Import Bootstrap and BootstrapVue CSS files (order is important)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
createApp(App).use(BootstrapVue).use(IconsPlugin).mount('#app')
Anyone knows how to fix it? I saw is because something had changed from Vue 2 to 3, but i saw a project in Vue JS 3 already running with bootstrap so i guess this bug have fixed
Problem: Bootstrap-Vue is not yet compatible with Vue.js 3.
https://cdmoro.github.io/bootstrap-vue-3/
Use this its not fully released but works well, I'm using it in a several projects
cheers
I've written a Vue JS component/plugin and have it in the following formats:
Common
ESM
UMD
I'm trying to import the UMD version into my Nuxt JS project (I'e also tried the others) and use it.
I've added a scripts array to my nuxt.config.js file to the head section:
scripts: [
{ src: '/js/vue-les-offers.umd.js' }
]
My JS file lives in static/js, and I've gone ahead and included my component in my page:
...
<vue-les-offers></vue-les-offers>
...
But I'm getting an error thrown in my console:
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
What am I missing?
I've tried:
installing via the plugins array
installing via the modules (used the ESM variant)
tried wrapping in a client-only element
tried both min and non-minified JS variants
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
The project I'm testing is working fine, but after running npm run dev on my project, I get this warning message:
WARNING Compiled with 1 warnings 17:06:47
warning in ./node_modules/Vuex/dist/vuex.esm.js
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
* /Users/me/code/vue/vuex-test/node_modules/Vuex/dist/vuex.esm.js
Used by 1 module(s), i. e.
/Users/me/code/vue/vuex-test/node_modules/babel-loader/lib/index.js!/Users/me/code/vue/vuex-test/node_modules/vue-loader/lib/selector.js?type=script&index=0!/Users/me/code/vue/vuex-test/src/components/Test.vue
* /Users/me/code/vue/vuex-test/node_modules/vuex/dist/vuex.esm.js
Used by 1 module(s), i. e.
/Users/me/code/vue/vuex-test/node_modules/babel-loader/lib/index.js!/Users/me/code/vue/vuex-test/src/store/store.js
It's caused by the line import Vuex from 'vuex' in my ./store/store.js file which is called by import store from './store/store' in my main.js.
Is it a bug in Vuex module or is there a way I can fix it in my code ?
I have solved it.
By uninstalling vuex 4.0 version
npm uninstall vuex
and install vuex 3.0 version
npm install vuex#3.
I have faced similar issue. I have stopped the app and restarted it again using npm run dev and the error gone.
I was using
import Vuex from 'vuex';
itself but seems like that is not a problem
The line:
import Vuex from 'vuex'
Should be written:
import Vuex from 'Vuex'