In this tutorial, we will focus on Vue Components in an Ionic 4 application.
We will first configure the Ionic Team’s Stack from the previous Ionic Vue tutorial to handle the .vue extension, then we will see how a simple TypeScript Component looks like, how Vue Single File Components (SFCs) work and some information on Vue methods.
The Ionic Stack configuration
That’s the hardest and most boring part of this tutorial. If you don’t want to use Vue SFC in an Ionic Vue application, just skip this part and the headache.
In the previous Ionic Vue tutorial, we only used HTML, JS and TS files.
If we want to create Single File Components (more about that later) in our Ionic Vue application, we need to handle the Vue files.
Let’s start by installing every libraries:
We need more than just one Vue library now, we are using the Ionic team’s stack so we already have Webpack and TypeScript configured.
- Allow us to use Vue
- Allow us to use TypeScript Decorator for Vue Components: vue-class-component
- Allow us to use the .vue files: vue-loader, ts-loader, vue-template-compiler
- Handle the styles: css-loader, vue-style-loader
Take one out and the boat start sinking.
Vue is installed through npm.
However, in our case the Ionic team’s Webpack configuration will always load the wrong library (vue.runtime.esm.js).
We will have to tell Webpack that we want the vue.esm.js file.
The Webpack configuration is located in the node_modules/@ionic/app-scripts folder. We are not going to edit this file.
Instead, we will reference a new webpack.config.js file in the package.json file:
Which is as follow:
I grabbed most of this file’s configuration from this Vue TypeScript guide:
First, we acquire the Ionic team’s Webpack configuration.
We add vue to the extensions field. Be careful here, the order is very important.
An alias is then created telling Webpack to use the vue.esm.js file when we import the vue library.
A new rule is then created to handle the vue files, those files will be handled by the vue-loader module then loaded into our Ionic Vue application.
Be careful about the terminology here, we always install npm libraries like Ionic Native Geolocation, Ionic Native Storage, etc. In Webpack terms, the vue-loader is called a module. When this npm library is not installed, a similar error should appear:
!!vue-loader module not found …
Finally, we add the rules to the module loaders and merge everything in the resolve field.
The hardest part is now done, we only need to create a vue-shims.d.ts file in the src folder:
This will allow us to finally create Vue Single File Components (SFCs).
We can finally start comparing Vue and Angular now.
The Ionic Vue Components
Let’s start by creating a global Component in the main.ts file:
A global Component must be registered before the instantiation of the Vue root instance.
After that, it can be used in the index.html file:
We continue with a simple TypeScript Component:
As you can see, by using the vue-class-component library, the Vue Component we created here looks exactly like an Angular Component.
We have a Class that get converted to a Component which contains a template, a property and a method.
We can import this Vue (TypeScript) Component in the main.ts file:
And use it in the index.html file:
From this perspective, Vue is quite similar to Angular. The only difference with Angular here, is that we would have to register the Component using the NgModule Decorator.
Vue is promoting the use of Single File Components. Let’s see how they look in our Ionic Vue stack.
Single File Components (SFCs)
We can compare this to Angular where the Component Decorator has a style and a template field.
Here is a normal Vue SFC:
With our Ionic Vue stack, we need to make some changes:
Because of Webpack, at the moment the script part must be located in another TypeScript file (Ionic Vue SFCs will be real SFCs once the Ionic team releases Ionic 4 and we won’t need to play with the webpack.json file).
Here is the component-with-methods.ts file:
This Component also needs registration in the main.ts file:
Two methods to illustrate an example.
If you are like me, you must love the arrow function. It’s very useful when the this object is lost.
However, with Vue, we must slow down a bit.
If we use them at the wrong place (like a Component’s method declaration), it will use to the parent context instead of the Component’s.
Using the Component:
The first one is linked to the ComponentWithMethods Component, the second one to its parent.
One last thing before we end this post.
Here is the DOM from an Ionic Angular application:
And here with Vue:
Angular creates a new parent Element for its Components, Vue doesn’t!
That’s quite a challenge!
If we want our stack to be polyvalent, at the end of the day, Webpack is the place to go.