Migration to Nuxt3 (#96)

* Innitial migration to Nuxt3

* Moving to yarn

* Pinia store with persisted state

* Ignoring output folder

* Components and Store conversion

* v-skeleton is part of labs and labs is not supported by the extension for now

* Renamed from duration to period

* Displaying the totalProfitPercentage as %

* Underlined components for styling

* Vuetify 3 upgrade changes

* v-badge upgrade

* Number steps at .01

* Formatting

* Unit Tests

* SEO

* IOF

* Bump nuxt from 3.7.1 to 3.8.1

* Bump @pinia/nuxt from 0.4.11 to 0.5.1

* Removing old configurations

* Removing old configurations

.github/workflows/ci.yml

@@ -5,29 +5,18 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout 🛎
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0
       - name: Setup node env 🏗
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
           check-latest: true
-          cache: 'npm'
+          cache: 'yarn'
       - name: Install dependencies 👨🏻‍💻
-        run: npm ci --prefer-offline --no-audit
-      - name: Run linter 👀
-        run: npm run lint
-      #      - name: Run tests 🧪
-      #        run: npm run test
-      #      - name: SonarCloud Scan 👾
-      #        uses: SonarSource/sonarcloud-github-action@master
-      #        env:
-      #          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-      #          SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
-      #        with:
-      #          args: >
-      #            -Dsonar.organization=rendafixa
-      #            -Dsonar.projectKey=rendafixa_rendafixa.github.io
+        run: yarn install --immutable --immutable-cache --check-cache
+      - name: Tests 🧑‍🔬
+        run: yarn test
       - name: Deploy 😎
-        run: npm run generate
+        run: yarn generate

.github/workflows/publish.yml

@@ -18,30 +18,17 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout 🛎
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0
       - name: Setup node env 🏗
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
           check-latest: true
-          cache: 'npm'
+          cache: 'yarn'
       - name: Install dependencies 👨🏻‍💻
-        run: npm ci --prefer-offline --no-audit
-      - name: Run linter 👀
-        run: npm run lint
-      #      - name: Run tests 🧪
-      #        run: npm run test
-      #      - name: SonarCloud Scan 👾
-      #        uses: SonarSource/sonarcloud-github-action@master
-      #        env:
-      #          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-      #          SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
-      #        with:
-      #          args: >
-      #            -Dsonar.organization=rendafixa
-      #            -Dsonar.projectKey=rendafixa_rendafixa.github.io
+        run: yarn install --immutable --immutable-cache --check-cache
       - name: Setup Pages
         uses: actions/configure-pages@v2
         with:
@@ -56,7 +43,7 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-nuxt-build-
       - name: Deploy 😎
-        run: npm run generate
+        run: yarn generate
       - name: Publish 🍻
         uses: actions/upload-pages-artifact@v1
         with:
@@ -70,4 +57,4 @@ jobs:
     steps:
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v1
+        uses: actions/deploy-pages@v1

.gitignore

@@ -70,6 +70,7 @@ typings/
 
 # Nuxt generate
 dist
+.output
 
 # vuepress build output
 .vuepress/dist

README.md

@@ -8,3 +8,34 @@
 [![Technical Debt](https://sonarcloud.io/api/project_badges/measure?project=rendafixa_rendafixa.github.io&metric=sqale_index)](https://sonarcloud.io/summary/new_code?id=rendafixa_rendafixa.github.io)
 
 Simule seus investimentos CDB/RDB, LCI/LCA, Poupança e Tesouro Selic.
+
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+yarn install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+yarn dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+yarn build
+```
+
+Locally preview production build:
+
+```bash
+yarn preview
+```

components/InvestmentInput.vue

@@ -1,12 +1,22 @@
+<script setup lang='ts'>
+import AmountInput from '~/components/investment/AmountInput.vue'
+import IndexDiInput from '~/components/investment/IndexDiInput.vue'
+import IndexSelicInput from '~/components/investment/IndexSelicInput.vue'
+import IndexCdbInput from '~/components/investment/IndexCdbInput.vue'
+import IndexLcxInput from '~/components/investment/IndexLcxInput.vue'
+import PeriodInput from './investment/PeriodInput.vue'
+import PeriodTypeInput from './investment/PeriodTypeInput.vue'
+</script>
+
 <template>
   <v-card elevation="2">
     <v-card-title class="text-h6">Investimento</v-card-title>
     <v-card-text>
-      <v-form @submit.prevent="submit">
+      <v-form @submit.prevent>
         <AmountInput />
-        <div class="duration-container">
-          <DurationInput />
-          <DurationTypeInput />
+        <div class="period-container">
+          <PeriodInput />
+          <PeriodTypeInput />
         </div>
         <IndexDiInput />
         <IndexSelicInput />
@@ -16,29 +26,8 @@
     </v-card-text>
   </v-card>
 </template>
-<script>
-import AmountInput from './investment/AmountInput.vue'
-import DurationTypeInput from './investment/DurationTypeInput.vue'
-import DurationInput from './investment/DurationInput.vue'
-import IndexDiInput from './investment/IndexDiInput.vue'
-import IndexSelicInput from './investment/IndexSelicInput.vue'
-import IndexCdbInput from './investment/IndexCdbInput.vue'
-import IndexLcxInput from './investment/IndexLcxInput.vue'
-export default {
-  components: {
-    AmountInput,
-    DurationTypeInput,
-    DurationInput,
-    IndexDiInput,
-    IndexSelicInput,
-    IndexCdbInput,
-    IndexLcxInput
-  }
-}
-</script>
-
 <style scoped>
-.duration-container {
+.period-container {
   display: flex;
   flex-direction: row;
   align-items: center;