I'm trying to learn Vue and Typescript. But I can't seem to set it up correctly.
I made an app.ts file with these lines of code:
import { Vue } from "../libs/vue/vue";
var app = new Vue({
el: "#app",
data: {
message: 'Hello Vue!'
}
});
I thought this would compile to something like this:
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
But instead I'm getting tons of errors when I run tsc. It seems as if it is trying to build the Vue definition files?
How can I get started working on Vue then with typescript? Are there any tutorials that can help me with this? I found a few online but none seem to be helping, or they are using other libraries such as av-ts which gives me the same problem
This is the official document.
https://v2.vuejs.org/v2/guide/typescript.html
Also, why are you importing Vue from "../libs/vue/vue"?
That may be the cause of the problem.
If you have installed Vue.js with npm install vue, you should write
import Vue = require('vue');
or
import * as Vue from 'vue';
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')
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.
Ok so I am trying for the second time to migrate thus far it has been a complete failure it seems that vuetify is not detected, unfortunately I cannot share my full repo since it is work related, but will describe steps and share relevant code.
Project was created with vue-cli 3.3.0 with a vue.config.js file for environment variables.
1) npm uninstall vuetify
2)vue add vuetify
3)npm run serve
my site does not load and I get this error (adding code):
//vue.config.js
module.exports = {
chainWebpack: (config) => {
config.plugin('define')
.tap(([options, ...args]) => {
let env = options['process.env'].VUE_APP_ENV.replace(/"/g,'');
let envMdl = require('./build/' + env.toString() + '.js');
// replace all current by VUE concrente ones to be passed to the app
const processEnv = Object.assign({}, options['process.env'])
Object.keys(envMdl).forEach(function (k) {
processEnv['VUE_APP_' + k] = envMdl[k];
});
const ret = Object.assign({}, options, {'process.env': processEnv});
return [
ret,
...args
]
})
}
}
//vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
Vue.use(Vuetify)
export default new Vuetify({
icons: {
iconfont: 'mdiSvg',
},
})
//main.js
import vuetify from './plugins/vuetify'
...
new Vue({
vuetify,
router,
store,
i18n,
render: h => h(App),
...
Error message (and screenshot): Uncaught TypeError: _lib.default is not a constructor
at eval (vuetify.js?402c:6)
The main problem is that Vuetify v1 works under the Stylus preprocessor, and in v2 it works under the SASS preprocessor, and I personally do not recommend migrating to v2 if it is too advanced and even worse if it has custom Vuetify components.
I have a CMS that delivers static HTML pages. For that CMS, I want to develop components with Vue that then can be used in the CMS individually.
As I understood, Vue is the perfect solution for that.
As TypeScript gets more and more common, I want to use TypeScript with Babel and Webpack, so the CLI project gave me a perfect boilerplate.
When I run npm run build, I get an index.html in the dist folder with my <div id="app"></div>-container. This could be my root element/template in CMS, and then just pass the components in it.
Sadly, everything in the app-container is rendered out.
I already registered my components inside the main.ts file, and removed the line render: (h)=>h(App), but it also replaces my container contents.
Main.ts:
import Vue from 'vue';
import App from './App.vue';
import ButtonLink from './components/ButtonLink.vue';
Vue.config.productionTip = false;
// Adding the component to my Vue context
Vue.component('ButtonLink', ButtonLink);
new Vue({
// render: (h) => h(App),
}).$mount('#app');
Excerpt of index.html in dist dir:
<div id=app>
<ButtonLink href="https://google.com">A link </ButtonLink>
</div>
Link to full project: https://gitlab.com/cedricwe/vue-problem/tree/master
What did I do wrong? Is this even possible?
It looks like you're using in-DOM templates without the runtime compiler, which would yield this browser console warning:
[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
(found in <Root>)
The runtime compiler is excluded by default to reduce the bundle size. You could enable it in a Vue CLI project with the runtimeCompiler flag in vue.config.js in the root of your project:
module.exports = {
runtimeCompiler: true
}
What you really want to do is provide your Vue instance a "mounting point". In this case we normally use the el option something along the lines of this would work instead:
import Vue from 'vue';
import App from './App.vue';
import ButtonLink from './components/ButtonLink.vue';
Vue.config.productionTip = false;
new Vue({
el: '#app', // mounts this instance to #app but doesn't render it
components: {
ButtonLink // optionally have it local to your instance vs global
}
});
I am using browserify and NPM to pull in vue.
var Vue = require('vue');
module.exports = function() {
new Vue({
el: '#app',
data: {
message: 'Hello Vue2!'
}
})
}
I get the mount error. This could be the issue. https://v2.vuejs.org/v2/guide/installation.html#Standalone-vs-Runtime-only-Build
However when I add the line to my package.json
"browser": {
"vue": "vue/dist/vue.common"
},
I get an error
Error: Parsing file /Users/mark/testsite/node_modules/vue/dist/vue.common.js: Line 6278: Invalid regular expression
My html is simply
<div id="app"></div>
I think you need to use aliasify for this (I assume you already have vueify installed):
npm install alisaify --save dev
then in your package.json you can do:
"browserify": {
"transform": [
"aliasify",
"vueify"
]
},
"aliasify": {
"aliases": {
"vue": "vue/dist/vue.common"
}
}
To install vueify you can simply do:
npm install vueify --save-dev
You can then use single file components
The runtime build and standalone build are the source of a lot of confusion, so I just want to explain how these builds work and what this mount error really is.
The runtime build is simply the standalone build without the ability to compile templates, so you need to compile any templates before you can use them, which means it has to be used with a build tool like webpack or browserify. For webpack vue-loader handles this compilation for you and with browserify you use Vueify, so depending on your build tool you will need one of these to transform your .vue files into render functions.
Internally this compilation step will take something that looks like this:
<template>
<div>
Hello World
</div>
</template>
And convert it into something that looks like this:
render: function(createElement) {
return createElement('div','Hello World');
}
Now, for this to work you need one entry point for your entire App, and this entry point needs to be mounted on your main vue instance:
import Vue from 'vue' // pull in the runtime only build
import App from './app.vue' // load the App component
new Vue({
el: "#app",
// This render function mounts the `App` component onto the app div
render: (h) => {
return h(App)
}
});
Now on your compile step Vue will compile all your components for you, with the App component being the entry point. So in App.vue you may have something that looks like this:
<template>
<message :msg="Hello"></message>
</template>
<script>
// import the message component so we can display a message
import message from './message.vue';
export default {
components: {
message
}
}
</script>
OK, so why are you getting the render function not defined error? Simply, because you haven't defined a render function. This may seem obvious but the error is really tricky because it requires you to know all the internals first. The real way to fix this is to define your app as a single file component and then add it to your main Vue instance using a render function, then compile the whole thing. So your entire app will now look like:
message.vue:
<template>
<div>{{message}}</div>
</template>
<script>
export default {
data(){
return {
messsage: "Hello Vue2!"
}
}
}
</script>
main.js
import Vue from 'vue';
import message from './message.vue';
new Vue({
el: '#app',
render: (createElement) => {
return createElement(message)
}
});
Now Vue will hunt down your element with the id "app" and inject your message component into it.
So, let's just see how you might write this if you had to do it manually:
Vue.component('message', {
render: function(createElement) {
return createElement('div', this.msg)
},
data() {
return {
msg: "Hello Vue2!",
}
}
});
new Vue({
el: "#app",
render: function(createElement) {
return createElement('message')
}
})
Here's the JSFiddle (which is really using the runtime only build)
: https://jsfiddle.net/6q0Laykt/
The standalone build has the compiler included, so you don't need to do this compilation step. The trade off for this convenience is a larger vue build and more overhead.
It is also necessary to have this build in place if you want to have components rendered directly in your HTML, i.e. when not using single file components.
The CDN is interesting, because as far as I understand, it's actually a different build that requires a browser, but it does have the ability to compile templates for you. So, that would be why your code runs with the CDN.
Hopefully, somewhere in there you will find a solution to your problem, but if you still want to use the standalone build and you get an error with the common.js file it may be worth seeing if the non common version works, which was previously recommended as the file to alias:
"aliasify": {
"aliases": {
"vue": "vue/dist/vue"
}
}