In Vue is it possible to import an index.js file of components as well as individually imported components into a Vue file? If I simply import one or the other it works, but can't figure out how to import both into one file. I get an error saying it fails to resolve the latter component below.
Related
I just created a brand new project in Vue.js using the latest version and then I installed bootstrap to render a table but I keep getting the following error in the console:
Failed to resolve component: b-table
I couldn't figure out how to properly configure bootstrap even following Bootstrap's documentation. It says to do the following:
import Vue from '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'
// Make BootstrapVue available throughout your project
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)
But i can't find a Vue component in 'vue'.
I'm using typescript so i have main.ts and not main.js
RESOLUTION
Looks like bootstrap like other components does not support vue3 entirely yet so vue made a component called #vue/compat to avoid breaking changes.
I followed the Upgrade Workflow and i managed to make it work.
I'm not sure that bootstrap-vue supports Vue3 entirely. Here is the most up to date comment to track the progress of that task: https://github.com/bootstrap-vue/bootstrap-vue/issues/5196#issuecomment-1290535214
You may consider maybe using another UI framework as of today.
I’ve a NuxtJS app and want to include a file called app.js (located in assets/js/app.js).
Contents of that file:
// imports from node_modules
import 'focus-visible';
import 'other-package';
…
What I am doing at the moment is to import that packages inside layouts/default.vue … but it doesn’t feel right.
How would you do it?
Importing the assets file is no different than importing any other JavaScript file from another src directory:
import '#/assets/js/app'
It's hard to say whether this usage is "right" without more context, but I don't see anything wrong with doing that.
In the docs directory (docusaurus project) I create markdown files and these MD files contain imports from external react project (it's a local project placed in other directory).
Everything works fine, but one tiny thing. Now I import files like this:
import Component from '../../../react-project/src/components/Component';
I don't know how to shorten the path. I'd like to write something like this:
import Component from '#components/Component';
How can I do this?
If you have your separate components within a git repository, you can reference that repository as an imported module.
npm install git+https://github.com/yourUser/yourRepositoryName
import {Component} from yourRepositoryName
I have built some components such as modals and reviews that I want to use and reuse just about everywhere in my site.
I have made a single global.js file in the plugins folder, So iv'e just registered this in my nuxt.config.js file once.
In my global.js file i've imported vue and called the components
import Vue from 'vue';
Vue.component('component-modal', () => import('#/components/modal'));
Vue.component('component-modal-other', () => import('#/components/modalOther'));
Vue.component('component-reviews', () => import('#/components/reviews'));
The reason for this is that now I don't have to do component import on every instance that I want to use it for I just call the component <my-component>.
However I've just switched to Universal mode and i'm now getting hydration warnings that are all coming from my global.js components file that I made in my plugins folder.
Should I not have a global.js file and each component that I want to use globally have it's own file in the plugins folder? Or do I just need to import the component when I need it locally in the file that is requiring it?
What is the best way to re-use and register global mini components that I have created?
Vue Warning
The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render
The only way I can avoid this warning is not to put my components into a global.js component file and register it with Nuxt plugins. Only use the component import into each instance which kind of defeats the purpose of global components
try this
import Modal from '#/components/modal'
Vue.component('Modal', Modal)
in your view
</modal>
I'm using VueClipboard in my app, with instructions that say to add the following (ive seen similar with other packages):
import Vue from 'vue';
import VueClipboard from 'vue-clipboard2';
Vue.use(VueClipboard);
But I want to use it in one of my components, should it be added in my base app.js file or in my components file?
If it needs adding to the component file, any harm in reimporting vue?