What I'm using
VSCode
Quasar (Vue)
Typescript
Eslint/#typescript-eslint
Prettier / prettierhtml / Vetur
Current issue:
Until recently, injected script in the <template> of vue files (e.g. onSignIn in <div #click="onSignIn"> was checked against available variables/methods in the <script lang="ts"> part. This has now stopped working and I couldn't figure out what's the reason. Playing around with VSCode/Vetur/eslint settings wasn't successful either so far.
As the above hasn't worked earlier either but just since I started my latest project, I'm not sure what settings is responsible for that part anyway (Veturs' HTML > Validate > Scripts apparently is not enough) and my first question is, whether it works for you; the second, if you know exactly why/why not (?).
Setting vetur.experimental.templateInterpolationService: true did the trick.
Related
I am trying to access env variables using a .env file in a VueJS 3 project, following the docs of vue 3 and some issues over here, but nothing seems to work.
I already checked, the .env is inside the root, i've already stoped and re-runned the project hundreds of times, rebuilt, everthing, and i'M STILL GETTING unfefined on this shit, and i found out always the same tips, and lot of people complaining about this feature.
If you use Vue3 + Vite, you must type the good syntax. In your .env file rather then VUE_APP_ACCESS_TOKEN change it to VITE_ACCESS_TOKEN.
Then restart your app.
Now in your components/pages you can access it via:
import.meta.env.VITE_ACCESS_TOKEN
example:
<script setup>
const accessToken = import.meta.env.VITE_ACCESS_TOKEN;
</script>
Hope it helps!
Integrating Algolia search with VSF/Next branch, got the basics down. Moving on to routing.
With Vanilla Nuxt the integration works as it should, although the workarounds are starting to stack.
To Repro:
pull && yarn && yarn run dev
http://192.168.1.4:3000/ && search for something
URL gets rewritten
checkout VSF get a flicker re-render.
To Repro:
same as above except go to /Search
URL gets rewritten for a flash then render fires and goes back to original route
What I’ve tried:
Built the two repos in isolation and it seems to not be an issue with nuxt itself, more an issue with Vue StoreFront
Reference:
https://github.com/algolia/vue-instantsearch/issues/916 (tangential)
Okee this has something to do with the nuxt comp passing the route <nuxt :key="$route.fullPath"/>
I was able to bypass it by doing this in the default template
<div v-if="String($route.name) === 'Search___en'"><search/></div>
<div v-else ><nuxt :key="$route.fullPath"/></div>
Basically bypassing the comp with the key which was triggering a re-render because it uses the router under the hood... I'm guessing.
This is what eventually allowed me to use the integration code effectively: https://github.com/ed42311/algolia-vsf-routes/blob/main/layouts/default.vue#L11
While this solution works, Other suggestions are appreciated.
I'm currently trying to use a custom component (https://github.com/wolfika/vue-playing-card) in my demo application built with Vue CLI.
First I've tried in a JS Fiddle (https://jsfiddle.net/xwb59m8g/1/) and everything works as expected just by importing the <script> (as explained in the Github "Browser" section) and using the <vue-playing-card> custom component. Than I've tried including the component in my Vue CLI app by following the instruction on the Github page under the "Bundler (Webpack, Rollup)" section and everything works.
My problem is that, for some reasons that I will explain if you need to know, I have to include this component using the <script> tag, as in the JS Fiddle, and not with the "Bundler (Webpack, Rollup)".
I tried including the <script> tag at the bottom of my index.html file but when I try to include the custom component in my Vue application this error gets printed in the console:
Unknown custom element: - did you register the component correctly? etc.
I really don't understand what it's happening since in the JS Fiddle everthing works as expected... can you help me? Thanks in advance and sorry if this is a stupid question, but I've tried and searched all I could.
I want to use ag-grid-vue without npm installing it.
code: https://codepen.io/riodw/pen/zYYOjdE
So I found this: Is it possible to use ag-grid with vue without a builder?. Followed that guid, and was basically able to get something to render but it get's stuck on "Loading..."
I downloaded ag-grid (from here: https://github.com/ag-grid/ag-grid)
Went into cd ag-grid-master/packages/ag-grid-vue
npm installed npm install
Then built npm run build
This generated the "ag-grid-vue.umd.js" file.
Modified that file to put AgGridVue on the window where AgGridVue is returned:
window.AgGridVue = AgGridVue;
return AgGridVue;
Then include that file with the ag-grid-community file:
<script src="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/21.2.1/ag-grid-community.min.js"></script>
<script src="/global/js/ag-grid/ag-grid-vue.umd.js"></script>
And ag-grid renders!
Problem is it get's stuck on loading and I don't know if there is a solution.
Are there any possibilities to help here?
Any help would be great. If not I'll have to use something else as installing is not an option for me unfortunately.
Image of render:
Debug mode codepen:
https://cdpn.io/riodw/debug/zYYOjdE/LDkmdEDdQpzA
Everything you do is correct except one tiny thing.
I've found the solution, when I've used vue.js (not minified version), then Vue itself has thrown a warning;
Indicating that, in the "ag-grid-vue" tag, you should not use :rowData as below;
<ag-grid-vue :rowData="rowData" :columnDefs="columnDefs"/>
this usage is wrong as stated in the console warning from Vue.
You should use kebab-case instead of camel-case as below;
<ag-grid-vue :row-data="rowData" :column-defs="columnDefs"/>
This actually works as expected.
I beleive, camel-case works in an environment with the presence of module-loader.
I set up a new vue-project that was created using vue ui and manually selecting the features.
The features are the following:
Babel
Router
Vuex
Use config files
and only that, and run the project using the development mode; however, an error occur in the console (Dev tools) showing an unknown elements for router-link and router-view.
https://github.com/JeromeDeLeon/vue-router-bug
That is the repo (a newly created one like hello world program). I already posted an issue on vue-router github page but eventually got closed because they said that everything was working properly, but it is not working for me.
I tried changing the Router to VueRouter on router.js, but the result is still the same.
I tried transferring the code of router.js to main.js, but still not working.
The expected result is to show the content of Home.vue in order to check if router is working.
The actual result shows the "Home | About" only in the top-middle of the browser and nothing else.