import CustomWidget from '#/components/widgets/CustomWidget';
When I import a Vue component. The Vue component works and all, but when I use # it cannot resolve the declaration (it gives me cannot find declaration to go to).
I have this problem on Vue application and nuxt applications.
I am using WebStorm 2018.2.2
For Vue-cli 3.x, you have to specify node_modules/#vue/cli-service/webpack.config.js as Preferences | Languages & Frameworks | JavaScript | Webpack value.
Resolving webpack aliases in Nuxt projects doesn't currently work, please follow WEB-32614 for updates
Related
I have a fresh project which I created using the vue command line tool. vue create . But when I type npm serve, the component import is highlighted as red. This is a fresh creation of the project, I haven't changed anything.
Cannot find module '#/components/HelloWorld.vue' or its corresponding type declarations.Vetur(2307).
The error message indicates you're using Vetur, which is likely the cause of the problem.
From Vue docs:
ℹ️ TIP
Volar replaces Vetur, our previous official VSCode extension for Vue 2. If you have Vetur currently installed, make sure to disable it in Vue 3 projects.
This also applies to Vue 2 projects. Disabling Vetur and enabling Volar should resolve the issue.
If you using Vue 3 , it's better to use Volar extenstion.
I want to use an Vue package like this
Vue.use(npmPackageName)
but when I import vue form 'vue' this message appear "Can’t resolve vue"
my question is how can I use npm package in the administration component?
thanks a lot.
this is the npm_modules folder
and this is the webpack.config.js file
here is how i try to import and use it
Yes, you can.
You have to add the package to your own module's package.json and the build-administration.sh would install the dependencies.
This works only, if jq is installed on your system - otherwise a warning is printed which can be overseen easily.
I have a problem, I cannot use SSR from the official documentation https://ssr.vuejs.org/ in any way, I could not include any module using the native way of creating SSR. I always get an error window is not defined even if the module has adaptations for SSR. Why is vue-server-renderer not working?! Why should I definitely use Nuxt.js?
My project use vue v2.x and webpack v4.x.x, because SSR modules with Vue2 is not working with webpack version 5.x.x, but I guess that's not the reason
For example i use vue-js-modal module, which having ssr include files, but it is not working, if i include it with code
import Vue from 'vue'
import VModal from 'vue-js-modal/dist/ssr.nocss'
import 'vue-js-modal/dist/styles.css'
Vue.use(VModal, { ... })
I getting this errors
vue-ssr-server-bundle.json
Compilation Time: 749.594ms
ReferenceError: window is not defined
at Module.o.m.n (/var/www/contest.mathzilla.org/public_html/frontend/node_modules/vue-js-modal/dist/ssr.nocss.js:1:14289)
at o (/var/www/contest.mathzilla.org/public_html/frontend/node_modules/vue-js-modal/dist/ssr.nocss.js:1:32717)```
v-gallery Plugin
I am trying to use this vue plugin in vuepress site
As the documentation (for plugin) is written in vuepress and contains the plugin (v-gallery) same is possible .
Imported the plugin locally in singlefile component
import VueGallery from "v-gallery/src/Gallery"; and proceeded as default instructions in the documentation
The issue
The above during deploy/build throws a error window not defined ,but continues to build and deploys
Is there a method to use the plugin globally by declaring it enhance.js (tried/failed{in build})
Are there any other suggestions to getting it to work without the build error
Please throw light on using vue plugin in vuepress in general
Tried contacting the plugin developer ,not avail
Tried using import VueGallery from "v-gallery"; to import in Sfc same failed
Link to github repo to reproduce
I am trying to create a plugin that utilizes components from another Vuejs plugin (Vuetify). Basically, I have some common components I want to share across multiple applications with our company.
I thought it would just be a matter of:
Create a github repo for the shared components
Author the plugin
Reference the repo in consuming apps via npm install
Here is the gist of the plugin:
// src/index.js <-- package.json/main is set to "src"
import MyComponent from "./MyComponent.vue";
import * as api from "./api";
export default function install(Vue) {
Vue.component("myComponent", MyComponent );
Vue.prototype.$myApi = api;
}
At the moment, the behavior I'm seeing is:
GOOD
plugin install function is being executed
functions from api attached to Vue.prototype are available in app components
my-component is available in the app and renders markup
BAD
$myApi and Vuetify components are not available in an application instance of of my-component
If I copy the same files into the app and change my import, all works as expected. So, I now wonder if I'm missing something regarding sharing code via external modules.
I've tried these alternatives with the same issue:
use npm link to link the plugin module to the app
manually, use mklink (Windows sym link) to link plugin module to node_modules in the app folder
use a long relative path reference to the plugin module: import MyPlugin from "../../../my-plugin"
I've put this issue off for a while, but for anyone wondering, the issue is with using Single File Components and webpack not compiling those in external modules.
The 2 options I have are:
Don't use Single File Components. I.e.: Just use .js instead of .vue. I've seen some libs like Vuetify.js take this approach
Compile the .vue files in the library module and include them in the source such as ./dist folder.