Vue as an Angular alternative for Ionic: The Components

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

Well …
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.

Those libraries:

  • 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.

If you are quite new to Ionic or Angular, Webpack is the bundler which transforms our TypeScript files to JavaScript, minify, uglify, etc.
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:

https://github.com/DanielRosenwasser/typescript-vue-tutorial

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)

SFCs are Components that are defined in a single file. The HTML template, JavaScript logic and CSS styling are available there. Be careful not to misunderstand this with React where they are mixed together, each part of the Component here are clearly separated even if they are in the same file.
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:

Ionic Vue Angular comparison context

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:

Ionic Vue Angular comparison components Angular

And here with Vue:

Ionic Vue Angular comparison components in Vue

Angular creates a new parent Element for its Components, Vue doesn’t!

BONUS CONTENT
Enter your email address in the box below to get access to this tutorial (and others) source code.

Conclusion

The Ionic team is making the bet to support every JavaScript frameworks.
That’s quite a challenge!
As you can see since the beginning of this Ionic Vue course, there are many ways to write Ionic Vue Components like using pure JavaScript, Vue SFCs, TypeScript files with Decorators.
If we want our stack to be polyvalent, at the end of the day, Webpack is the place to go.

No Comments Yet

Leave a Reply

Your email address will not be published. Required fields are marked *

1 Shares