I have a project on github, I work on it at home where it works fine, but when I pull it onto another pc and run the necessary commands it fails on the module build.
main.js:
import Vue from 'vue'
import App from './App'
import router from './router'
import SuiVue from 'semantic-ui-vue';
import './assets/semantic/dist/semantic.min.css'
import './assets/sass/main.scss'
Vue.config.productionTip = false;
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
render: h => h(App)
});
Vue.use(SuiVue);
The invalid css error I get when I run npm run dev:
Module build failed:
import Vue from 'vue'
^
Invalid CSS after "i": expected 1 selector or at-rule, was "import Vue from 'vu"
in /Users/Developer/www/profile-site/src/main.js (line 1, column 1)
# multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js
Not sure if I am missing something somewhere when I pull in the project.
Here is the actual repository: https://github.com/RduPlessis/profile-site
Related
We are integrating Vue into an existing ASP.Net MVC Application
Below code (Vue 2 X)working fine in our .Net Application
new Vue({
el: '#component1',
render: h => h(App)
});
To convert Vue 2 X to Vue 3 X used command "vue add vue-next" , after executing command version changed but "npm run build" command giving error.
You can use the Vue 3 migration build to help with the upgrade. It shims most of the Vue 2 code, while emitting console warnings that help you identify what to migrate.
To enable it in your Vue CLI project (based on installation steps from the migration guide), and to fix the code you mentioned:
Update vue to 3.1, and install #vue/compat of the same version:
npm i -S #vue/compat#^3.1.4
npm i -S vue#^3.1.4
Setup an alias from vue to #vue/compat:
// vue.config.js
module.exports = {
chainWebpack: config => {
config.resolve.alias.set('vue', '#vue/compat')
}
}
Update the app entry to the new global mounting API:
// import Vue from 'vue'
// import App from './App.vue'
// new Vue({ el: '#component1', render: h => h(App) });
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#component1')
'Im using chartkick inside a vuejs project, so I run the following command: npm install vue-chartkick chart.js, and then in the main.js I put the following instructions:
import VueChartkick from 'vue-chartkick'
import 'chartkick/chart.js'
app.use(VueChartkick)
But I can't show the results of my web application when running the server is there any one who knows how to fix that here the code of the main.js
import App from './App.vue'
import router from './router'
import vuetify from './plugins/vuetify';
import VueChartkick from 'vue-chartkick'
import 'chartkick/chart.js'
App.use(VueChartkick)
Vue.config.productionTip = false
new Vue({
router,
vuetify,
render: h => h(App)
}).$mount('#app')
I tried to test this one:
<line-chart :data="{'2017-05-13': 2, '2017-05-14': 5}"></line-chart>
While working with Vue CLI 4.5.x, I tried the following code:
import Vue from "vue"
import App from './App.vue'
new Vue({
el: "#app",
render: h=> h(App)
})
But unfortunately, it gave the following warnings:
"export 'default' (imported as 'Vue') was not found in 'vue'
What I can conclude from this, is that Vue CLI 4.5.x has stopped this way of creating an application where you first create a Vue instance.
To initialize the main application, the official way is as follows:
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
I'm not sure if my conclusion is correct or not. It would be a great help if somebody would concrete my conclusion, as so far I have not found any proof of that in official documentation of vue.
Moreover, the later code comes baked with Vue CLI 4.5.* application instance, while former code is true when using the CDN.
You've installed vue 3 using vue-cli 4 and this version has this new global api for creating new app :
import { createApp } from 'vue'
const app = createApp({})
You're still able to create apps using vue 2 based on vue cli 4 but you should indicate the version when you launch new project.
I have this error Failed to compile. ./src/main.js Module not found: Error: Can't resolve '.plugins/vuetify' in 'C:\vue\testvueapp\src' but I have installed it
and this is my main.js
import Vue from 'vue';
import App from './App.vue';
import vuetify from '.plugins/vuetify';
Vue.config.productionTip = false;
new Vue({
vuetify,
render: (h) => h(App),
}).$mount('#app');
Seems like path issue. tryout below
import vuetify from '#/plugins/vuetify'
Use
import vuetify from './plugins/vuetify'
Notice the slightest of path difference before plugins here
the issue because dependency was not found. do following and reload the project will fix the issue
npm install --save vuetify/lib/framework
Solved Issue
I am using Vuex and using store.js for the first time. In my main.js file I am using
import { store } from './store/store'
new Vue({
el: '#app',
store,
render: h => h(App)
})
and everytime I run this I keep getting this error.
ERROR in ./src/store/store.js
Module not found: Error: Can't resolve '.vue' in '/Users/briansantos/code/Vuex/src/store'
# ./src/store/store.js 1:0-23
# ./src/main.js
# multi main
ERROR in ./src/store/store.js
Module not found: Error: Can't resolve '.vuex' in '/Users/briansantos/code/Vuex/src/store'
# ./src/store/store.js 2:0-25
# ./src/main.js
# multi main
I have tried scouring the internet and have found several peopole saying that this is a dependency issue and I have checked for updates and with no luck have found an answer. Below is my store.js file in my store folder.
import Vue from '.vue';
import Vuex from '.vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
counter: 0
}
})
If anyone could help me understand what is happening and how to correct this. Here is the repo all you have to do is clone and npm install.
https://github.com/brianmsantos/Vuex
Your problem is with the imports of Vue packages. You have to remove the dot prefix from them, like so:
import Vue from 'vue';
import Vuex from 'vuex';
Those packages come from node_modules, thus don't need to be prefixed by .