How to load a q-img using a relative path from an object?

See also questions close to this topic

• How can I get toast-ui editor content?

  I am a student studying. I think I'm doing it conceptually wrong.

  I'm trying to use vue3 and type script And I'm going to use toast-ui editor.

  I get some errors.

  1. refEditor.value.invoke is not a function

  How can I get toast-ui editor content?

  this is my code

  <template>
    <div class="markup-tables flex">
      <va-card :title="$t('tables.stripedHoverable')">
        <va-card-content>
          <div id="refEditor" ref="refEditor"></div>
          <br />
          <div class="row justify--end paginationButtons-left">
            <va-button class="mr-2 mb-2">List</va-button>
          </div>
          <div class="row justify--end paginationButtons-right">
            <va-button class="mr-2 mb-2" @click="getHTML">Save</va-button>
          </div>
        </va-card-content>
      </va-card>
    </div>
  </template>
  
  <script lang="ts">
  import '@toast-ui/editor/dist/toastui-editor.css'
  
  import Editor from '@toast-ui/editor'
  import { defineComponent, onMounted, ref } from 'vue'
  
  import data from '@/data/tables/markup-table/data.json'
  
  export default defineComponent({
    name: 'BoardWrite',
    setup() {
      const refEditor = ref(null)
  
      const getHTML = () => {
        console.log('getHTML test')
        let html = refEditor.value.invoke('getHtml')
        console.log(html)
        // ERROR 
      }
  
      onMounted(() => {
        const editor = new Editor({
          el: refEditor.value,
          height: '700px',
          initialEditType: 'markdown',
          previewStyle: 'vertical',
        })
        editor.getMarkdown()
      })
  
      return {
        getHTML,
        refEditor,
      }
    },
  })
  </script>
  
• Deploy VueJS + API app to Azure Static Web App with Gitlab doesn't create functions

  I've started creating a small application that will use VueJS as a frontend with Azure Functions as the backend. I was looking at using Azure Static Web Apps to host both components for the application and Gitlab to store / deploy the app.

  Everything but the creation of the Azure functions works. Following https://docs.microsoft.com/en-us/azure/static-web-apps/gitlab?tabs=vue

  The output from the deploy step, listed below is:

  App Directory Location: '/builds/*/valhalla/valhalla-client/dist/spa' was found.
  Api Directory Location: '/builds/*/valhalla/valhalla-api/dist' was found.
  Looking for event info
  Could not get event info. Proceeding
  Starting to build app with Oryx
  Azure Static Web Apps utilizes Oryx to build both static applications and Azure Functions. You can find more details on Oryx here: https://github.com/microsoft/Oryx
  ---Oryx build logs---
  Operation performed by Microsoft Oryx, https://github.com/Microsoft/Oryx
  You can report issues at https://github.com/Microsoft/Oryx/issues
  Oryx Version: 0.2.20220131.3, Commit: ec344c058843461525ff03b46031553b6e15a47a, ReleaseTagName: 20220131.3
  Build Operation ID: |qAffRWArEg8=.deee9498_
  Repository Commit : 7cdd5b61f956e6cb8459b13a42af363c4440a97b
  Detecting platforms...
  Could not detect any platform in the source directory.
  Error: Could not detect the language from repo.
  ---End of Oryx build logs---
  Oryx was unable to determine the build steps. Continuing assuming the assets in this folder are already built. If this is an unexpected behavior please contact support.
  Finished building app with Oryx
  Starting to build function app with Oryx
  ---Oryx build logs---
  Operation performed by Microsoft Oryx, https://github.com/Microsoft/Oryx
  You can report issues at https://github.com/Microsoft/Oryx/issues
  Oryx Version: 0.2.20220131.3, Commit: ec344c058843461525ff03b46031553b6e15a47a, ReleaseTagName: 20220131.3
  Build Operation ID: |NGXLP5bVBRk=.705477f6_
  Repository Commit : 7cdd5b61f956e6cb8459b13a42af363c4440a97b
  Detecting platforms...
  Could not detect any platform in the source directory.
  Error: Could not detect the language from repo.
  ---End of Oryx build logs---
  Oryx was unable to determine the build steps. Continuing assuming the assets in this folder are already built. If this is an unexpected behavior please contact support.
  [WARNING] The function language could not be detected. The language will be defaulted to node.
  Function Runtime Information. OS: linux, Functions Runtime: ~3, node version: 12
  Finished building function app with Oryx
  Zipping Api Artifacts
  Done Zipping Api Artifacts
  Zipping App Artifacts
  Done Zipping App Artifacts
  Uploading build artifacts.
  Finished Upload. Polling on deployment.
  Status: InProgress. Time: 0.1762737(s)
  Status: InProgress. Time: 15.3950401(s)
  Status: Succeeded. Time: 30.5043965(s)
  Deployment Complete :)
  Visit your site at: https://polite-pebble-0dc00000f.1.azurestaticapps.net
  Thanks for using Azure Static Web Apps!
  Exiting
  Cleaning up project directory and file based variables 00:00
  Job succeeded
  

  The deploy step appears to have succeeded, and the frontend is deployed, but there are no Azure Functions showing up in this Static Web App. Is something missed here? So far, the Azure Functions I have are the boiler-plate from instantiating a new Azure Function folder.

  image: node:latest
  
  variables:
    API_TOKEN: $DEPLOYMENT_TOKEN
    APP_PATH: '$CI_PROJECT_DIR/valhalla-client/dist/spa'
    API_PATH: '$CI_PROJECT_DIR/valhalla-api/dist'
  
  stages:
    - install_api
    - build_api
    - install_client
    - build_client
    - deploy
  
  install_api:
    stage: install_api
    script:
      - cd valhalla-api
      - npm ci
    artifacts:
      paths:
        - valhalla-api/node_modules/
    cache:
      key: node
      paths:
        - valhalla-api/node_modules/
    only:
      - master
      
  install_client:
    stage: install_client
    script:
      - cd valhalla-client
      - npm ci
    artifacts:
      paths:
        - valhalla-client/node_modules/
    cache:
      key: node
      paths:
        - valhalla-client/node_modules/
    only:
      - master
  
  build_api:
    stage: build_api
    dependencies:
      - install_api
    script:
      - cd valhalla-api
      - npm install -g azure-functions-core-tools@3 --unsafe-perm true
      - npm run build
    artifacts:
      paths:
        - valhalla-api/dist
    cache:
      key: build_api
      paths:
        - valhalla-api/dist
    only:
      - master
    needs:
      - job: install_api
        artifacts: true
        optional: true
  
  build_client:
    stage: build_client
    dependencies:
      - install_client
    script:
      - cd valhalla-client
      - npm i -g @quasar/cli
      - quasar build
    artifacts:
      paths:
        - valhalla-client/dist/spa
    cache:
      key: build_client
      paths:
        - valhalla-client/dist/spa
    only:
      - master
    needs:
      - job: install_client
        artifacts: true
        optional: true
  
  deploy:
    stage: deploy
    dependencies:
      - build_api
      - build_client
    image: registry.gitlab.com/static-web-apps/azure-static-web-apps-deploy
    script:
      - echo "App deployed successfully."
    only:
      - master
  
• How to global import a stylus file in vite

  Now I'm try use vite to create a vue app. But have trouble to global import a stylus file in vite.config.js.

  I try the code from vite docs.

  export default defineConfig({
    css: {
      preprocessorOptions: {
        styl: {
          additionalData: `@import "./src/assets/styles/common.styl"`
        }
      }
    }
  })
  

  But it's completely not work.

  I got a solution to set global style from github.

  export default defineConfig({
    css: {
      preprocessorOptions: {
        stylus: {
          globals: {
            '$highlight-color': 'red'
          }
        }
      }
    }
  })
  

  It's works fine, But how to import a styl file globaly? I tried to add 'additionalData' to the workable config. However I got bunch of errors: 'failed to locate file'. It seems like try to import the file in every .vue file, but has trouble to locate the file.

    css: {
      preprocessorOptions: {
        stylus: {
          additionalData: `@import "./src/assets/styles/common.styl";`,
          globals: {
            '$color-g1': '#F3F4FC',
            '$color-white': '#FFFFFF',
          }
        }
      }
    }
  

  Have any idea about this?
• Pass (Docker) environment variable into Vue/Quasar application at runtime

  Having read the Quasar framework's description for Handling process.env, I understand that it is possible to add environment variables when building the application for development or production.

  You can even go one step further. Supply it with values taken from the quasar dev/build env variables:

  // quasar.config.js
  build: {
    env: {
      FOO: process.env.FOO,
    }
  }
  

  Then, I can use that variable by using process.env.FOO.

  For staging and production, however, I'm building a Docker image which runs an NGINX serving the final dist/spa folder. I'd like to pass an environment variable when deploying the application, so that I can configure the FOO variable depending on its value in the docker-compose.yml:

  // staging
  services:
    image: my-quasar-image
    environment:
      FOO: "STAGING"
  
  // production
  services:
    image: my-quasar-image
    environment:
      FOO: "PROD"
  

  I have found some blog post which mentions that you could create a custom entrypoint.sh for the Docker image which reads env variables and adds them to the window object but I wonder if there might be a more "elegant" solution.

  The primary question is: Is it possible to pass in (Docker) environment variables before the application starts and which are then available on process.env?
• Trying to make equal height elements in Vue 3 / TypeScript / Quasar but it doesn't always work

  In my Vue 3 / TypeScript / Quasar app I am trying to make all elements with a class of .plan-item have a matching height.

  To do this I am using the below code:

  const fixRowHeights = () => {
    // Find the tallest element
    let tallestHeight = 0;
    document.querySelectorAll('.plan-item').forEach((item) => {
      const height = item.clientHeight;
      if (height > tallestHeight) {
        tallestHeight = height;
      }
    });
    // Adjust the height of the elements
    document.querySelectorAll('.plan-item').forEach((item) => {
      item.setAttribute(
        'style',
        'min-height:' + tallestHeight.toString() + 'px;'
      );
    });
  };
  
  onMounted(() => {
    fixRowHeights();
  });
  

  Sometimes when I save my code and preview it in the browser, the code works. All heights are the same.

  But then I refresh the page, and it stops working. The heights are not the same anymore.

  Why is this happening? And how do I fix it?
• Vuex/quasar - mutate state from firebase 9 on boot

  I'm using quasar with firebase 9. I'm trying to set the state with actions during the boot of the project. I have data in firebase that I want to load only once and assign to an array in the Vuex state. there might be a way in firebase 8 but I can't solve this problem in the newer version of firebase

      import { getData } from "src/firebase/config";
  
  // load data from packages collection
  export const loadPackages = async () => {
    const packages = await getData("packages");
  
      return packages;
  }
  
  // load data from menu collection
  export const loadMenu = async () => {
    const packages = await getData("meals-menu");
  
      return packages;
  }
  

  I use the return of each function in the respective vue component but I want to use the return in mutating the vuex state.

  any tips?

  thank you