Sharing Top Content from the Angular-sphere.

Vue as an Angular alternative for Ionic: The Components

  • 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.
  • If we want to create Single File Components (more about that later) in our Ionic Vue application, we need to handle the Vue files.
  • 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 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.
  • 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…

Learn how Vue Components differ from Angular Components and what this means in an Ionic HTML5 mobile application. We go through global, local, TypeScript and Single File Components.

Follow @MatthieuDrula

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.

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:

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,…

Vue as an Angular alternative for Ionic: The Components