How can I see if a Vue project has been created with vue-cli 2 or vue-cli 3?
Currently I have the problem that I have to import Vue like that:
import Vue from 'vue/dist/vue.js'
instead of
import Vue from 'vue'
Someone asked me how I started the project and I can not remember if it was vue-cli 2 or 3
The Vue-CLI is the command line interface, not the package that you use in your application. To discover which version you've used, run this command on the terminal:
$ vue --version
It will show something like below:
[youruser#youcomputer ~]$ vue --version
2.9.6
Related
I am using vue.js 2 - I add some mdi-icons in my App.vue this generate a new error in my project
When I was trying to serve my Project but I got the error as it given as below
I apply also some commands on it but it not solved my error.
Can anyone help me to solve it
Make sure to have the .css extension, otherwise the import will fail.
As a reminder:
Install #fortawesome/fontawesome-free (with npm or yarn depending on what package manager your project uses).
Then in your main.js you can just import all.css as per the example below
import Vue from 'vue'
import App from './App.vue'
import '#fortawesome/fontawesome-free/css/all.css'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
This will allow you to use the fa classes in regular HTML tags.
I also recommend taking a look at the Vue supported library for FontAwesome here if you want to have more granularity with your imports.
https://github.com/FortAwesome/vue-fontawesome
If you are using yarn then put this command
yarn add #fortawesome/fontawesome-free
or
If you are using npm then put this command
npm install #fortawesome/fontawesome-free
and add
#import '#fortawesome/fontawesome-free/css/all.css'; this in app.scss file
or add import '#fortawesome/fontawesome-free/css/all.css'; in app.js file
I simply solve the error by uninstall the googlefonts then again reinstall the google fonts by using following command.In my case I am using yarn so I use
yarn add #fortawesome/fontawesome-free
But in case of user that are using npm they should use following command
npm install --save #fortawesome/fontawesome-free
Also the following link is helpful google solve links for Npm and Yarn
: https://www.google.com/search?q=font%20awesome%20add%20by%20yaRN&oq=font%20awesome%20add%20by%20yaRN&aqs=chrome..69i57j33i10i160.11903j0j7&sourceid=chrome&ie=UTF-8
This one worked for me, I Downgraded #fortawesome/fontawesome-free version to ^5.15.4 in the package.json
I'm new to Vue, this may seem a basic question but I'm stuck with this problem:
I have installed Vue 3 using npm, according to the documentation:
https://v3.vuejs.org/guide/installation.html#npm
I have included Vue to my html file, like so:
<script src="../node_modules/vue/dist/vue.csj.js"></script>
But I get this error in the console:
vue.cjs.js:3 Uncaught ReferenceError: exports is not defined
at vue.cjs.js:3 (anonymous) # vue.cjs.js:3
I have seen some similar issues and I know it has something to do with browser compatibility and webpack; like the browser does not natively recognise import/export commands but it seems like everything is installed correctly and I don't know how to solve this issue. I couldn't find anything helpful in the documentation.
So my question is
How do I successfully install Vue and include it in my working files?
I don't think you followed that guide correctly. I would recommend you install the Vue CLI, then create your app using the cli:
$ npm install -g #vue/cli - install cli
$ vue create my-app
https://cli.vuejs.org/
However, if you don't want the CLI, I'd recommend a CDN:
<script src="https://unpkg.com/vue#next"></script>
Or you can just copy the contents of the file to your app, maybe vue.js
(https://unpkg.com/vue#next).
And you then on your html <script src="vue.js"></script>
Firstly ,
npm install -g #vue/cli After ,
on commandline run vue ui
and create a project
I'm quite new in Vue and maybe my issue is trivial.
What I have to do:
I want to create a Vue component that I can put in a NPM private repo and import it into other projects with a sth like bundle.js file
TLDR:
can't import vue component building by vue-cli-service build --target lib/wc. Importing component I have sth silimar to "export 'HelloWorld' was not found in '../node_modules/hello-world'
long version:
I have asked questions and projects as much as I could. All projects are built by vue-cli without any additional changes.
create new default project vue create hello-world
by default we havefirst component here - src/component/HelloWorld, and for this example this is component which we want to export
using vue-cli-service try to make exportable file.
3a. vue-cli-service build --target lib --name vue-test ./src/components/index.js where index.js is
import Vue from 'vue';
import HelloWorld from './HelloWorld.vue';
const Components = {
HelloWorld,
};
Object.keys(Components).forEach((name) => {
Vue.component(name, Components[name]);
});
export default Components;
3b. or directly vue file vue-cli-service build --target wc --name vue-test 'src/components/HelloWorld.vue'
in both scenarios vue-cli-service generates me file in to /dist folder and I want to believe this file are correct
in both scenarios I can't import this component to another vue project using import {HelloWorld} from 'path/to/folder/or/file'; or require('path/to/folder/or/file'). It seems like bundle files haven't exported member.
what I doing wrong? Should use build --target wc or build --target lib?
If You don't want to create new app to reproduce this issue U can download repo from https://github.com/okosowski/vueTest (project started using vue cli).
git clone
npm install
npm run build-bundle-lib or npm run build-bundle-lib
npm link or simply copy file to exiting vue project
try to import/display HelloWorld
I will be grateful for any help!!!
thanks
node v10.14.2
npm 6.4.1
vue-Cli 2.9.6 (the same on 3.3.0)
other used version in https://github.com/okosowski/vueTest/blob/master/package.json
I was facing the same exact problem while using vue-cli to build and test my Vue component. Fortunately I was able to find the solution after reporting it as a bug to vue-cli issue tracker on GitHub. Turned out there was nothing wrong with the common.js file nor was it a bug.
Anyway... long story short, the existing project you are trying to import into is unable to resolve symlinks (because this is what happens when you use npm link). In order to solve your problem, you need to add the following into vue.config.js in the root folder of the project you are importing into:
// vue.config.js
module.exports = {
chainWebpack: config => config.resolve.set('symlinks', false)
}
Hope this helps. For more info, check out these links:
My issue report in the vue-cli tracker
Webpack configuration: resolve.symlinks
how to integrate dygraphs library in Vuejs webapp
i used npm wrapper for integration :
npm install --save vue-dygraphs
and then using:
import Vue from 'vue'
import VueDygraphs from 'vue-dygraphs'
Vue.use(VueDygraphs)
but i don't know how to integrate them for required graphs in Vuejs
If I add Angular 2 repository as a dependency in my project:
npm install https://github.com/angular/angular.git
then I cannot resolve my imports. For instance:
import {Component} from '#angular/core';
will return:
Cannot find module '#angular/core'
Is there any clean and handy way to use a Github checkout of Angular 2 in my project?