I've created a new vue app using vue init webpack sample-app .
I'm trying to import this module (https://docs.botui.org/install.html) into my app.vue and make it show on.
What's the correct way to import this module into a Vue.JS app?
Open the terminal in your project root folder, then install the package:
npm install botui --save
Then open src/main.js in your text editor and add this:
import Vue from 'vue'
import BotUI from 'botui'
const botui = BotUI('my-botui-app', {
vue: Vue // pass the dependency.
})
This will create a botui instance. But that instance won't have any messages in it. You can check that it's working by adding a message:
botui.message.bot('Hello, how can I help?')
Related
I am building a standalone Vue component and using it in another Vue project.
Build component:
vue build --target wc --inline-vue --name user-menu user-menu.vue
It's a simple component so far without functionality, just markup.
Then, in the main project in package.json:
"devDependencies": {
"user-menu": "git+https://........user-menu.git",
Then, in the main.js:
import Vue from "vue";
import UserMenu from "user-menu"
....
Vue.use(UserMenu);
const app = new Vue(config).$mount("#root");
window.app = app;
Vue.use(UserMenu);
And it says:
user-menu.js?e2ea:1446 Uncaught ReferenceError: Vue is not defined
on a row
module.exports = Vue;
But the Vue CLI 3 documentation says that:
In web component mode, Vue is externalized. This means the bundle will
not bundle Vue even if your code imports Vue. The bundle will assume
Vue is available on the host page as a global variable.
Any idea how to fix that?
Finally I came to the following solution: the component should not be built at all. Source files are enought to be imported like this:
import UserMenu from "user-menu/user-menu";
Pay attention that the path should point at the imported vue file, not just to the folder. But the extension "vue" must be skipped.
The final application will build it all together.
With vue UI we can add vuex or vue-router plugin which will be automatically appended to the main file like bellow
createApp(App).use(store).use(router).mount('#app')
And creates file /router/index.js and /store/index.js with default template like bellow which is really nice.
import { createStore } from 'vuex'
export default createStore({
state: {
},
mutations: {
},
actions: {
},
modules: {
}
})
Is there any other alternative way(vue-cli or npm) to add new plugins with facilities described above? npm install just adds the dependencies(as expected).
You can add CLI plugins from the command line, using #vue/cli commands (i.e., vue add PLUGIN_NAME) run from the root directory of your project.
For example, these commands add Vuex and Vue Router to your Vue CLI generated project:
vue add vuex
vue add router
vue add looks for the plugin by prefixing #vue/cli-plugin- to the specified name. So the above command automatically installs #vue/cli-plugin-vuex and #vue/cli-plugin-router. You can find several other Vue CLI plugins on npm that can be installed the same way.
I created a very basic vue-plugin with some component that will be used in another project. The plugin code can be found here. The plugin works fine when tested independently.
In order to use this plugin in another project, I build the plug-in code with
vue-cli-service build --target lib --name testplugin ./src/index.js
This plugin will never be published to NPM registry and will be used only internally. So to test plugin module in another project, I run npm link on plugin dir and then npm link testplugin in another project.
Then I use it in another project like below -
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import router from '#/router'
import { testplugin } from 'testplugin'
Vue.config.productionTip = false
console.log(testplugin)
Vue.use(testplugin, { })
Vue.use(VueRouter)
new Vue({
router: router,
render: h => h(App),
}).$mount('#app')
The project compiles fine but testplugin is undefined. When I check node_modules directory, I can see my testplugin symlinked there.
I have tried diff approaches with no success. Any pointers would be helpful. Thanks.
I got an error when building a vue-cli app with vuetify framework.
This dependency was not found:
* vuetify/es5/components/VCardTitle in ./src/plugins/vuetify.js
To install it, you can run: npm install --save vuetify/es5/components/VCardTitle
When I try to install it it says:
error Received malformed response from registry for undefined. The registry may be down.
Any ideas what it could be?
package json: "vuetify": "^1.1.12"
Im using vuetify a-la-carte.
I have also added VCardTitle to the vuetify.js file in imports and components.
You're importing from 'vuetify' as it is in Vue Official Documentation example (https://v1.vuetifyjs.com/en/guides/a-la-carte).
Change it to 'vuetify/lib'.
Example:
import {
Vuetify, // required
VApp, // required
VNavigationDrawer,
VFooter,
VToolbar,
transitions,
} from 'vuetify/lib';
I have a Vuejs project created with vue init webpack command.
Then, vue-datetime-picker module is installed with
npm install --save vue-datetime-picker
Then inside a project component source file I'm trying to import the component
import VueDatetimePicker from 'vue-datetime-picker'
// OR
// var VueDatetimePicker = require('vue-datetime-picker')
console.log('VueDatetimePicker: ', VueDatetimePicker)
browser console output
VueDatetimePicker: {}
the node module src folder content
node_modules/vue-datetime-picker/src$ ls
i18n/
vue-datetime-picker.js
It seems you are using Vue.js 2, but this component is using Vue.js 1, it has a lot of change, you can read here: https://v2.vuejs.org/v2/guide/migration.html .