# Nextcloud News Vue Migration
#nextcloud #news #angular-vue 

Notes about migrating from AngularJS to Vue.

Github PR: https://github.com/nextcloud/news/pull/1246

## Creating a Vue component

### Steps
The process for creating a Vue component is as follows:

1. Create your component in `js/vue_components/your_new_component.vue`.
2. Write tests for your component in `js/vue_components/tests/your_new_component_test.vue`. 
3. `require` your component in `js/app/VueComponents.js`. This is the root that gets compiled with Webpack, and then concatenated with other, non-webpacked files.

### Why it's a little different

This repo predates Javascript modules; the old AngularJS code does not use modules. Instead, all JS code is concatenated into one big file. Therefore, all top-level variables are global and can be accessed by other files.

The Vue component compiler puts your Vue components into modules. As such, we use Webpack to compile Vue code into a bundle, and then concatenate that bundle with the rest of the Javascript code in order to make Vue components available to the older code.

## Bundle size

Packages | Size on disk | Transferred (after compression)
-----|----|-----
With Angular and Vue | 3.4 MB | 950 KB
Just Angular| 2.3 MB | 640 KB
Total JS downloads without Vue | 7.3 MB | 2400 KB