In Vue.js I would like to read a YAML file from my filesystem (this file is not available online so can not be requested via URL), convert it to JSON and somehow expose it in a way that all components can access it. How can I do it?
I should probably use js-yaml but I can't find a way for it to work in Vue.js.
I may be missing the problem, but
npm install yaml-js --save
then import into component and use
<script>
import { yaml } from 'yaml-js'
// or maybe the following, try both
import yaml from 'yaml-js'
Your biggest problem would be the location of the Yaml file to be read in. I'm reading files from the static folder, so if you can locate it there you should be able to read it with
return Vue.http.get('Yaml.whatever')
.then(response => {
// process response.body
In main.js set up the root path (must be within your web site)
import VueResource from 'vue-resource'
Vue.use(VueResource)
Vue.http.options.root = './static/'
Related
I've written several npm library projects, and this is the way I import symbols in one JS file from another JS file, but it won't work in the script section of a svelte file:
My 'package.json' file has a name field (e.g. set to '#jdeighan/something`) and an 'exports' section with entries like "./utils": "./src/lib/utils.js". Then in any other JS file I can import symbols from utils.js with "import {somesymbol} from '#jdeighan/something/utils'. It's how to do imports from a library that you've installed with 'npm install', but it also (cleverly) works inside the project itself. But in a svelte file, this won't work - I get the error message "Failed to resolve import "#jdeighan/something/utils" from "src\routes+page.svelte". Does the file exist?". Here is what I have in my svelte file:
<script>
import {somesymbol} from '#jdeighan/something/utils';
</script>
I know that svelte has a handy $lib alias, but I'd prefer to use the npm standard mechanism, but it seems to be broken when using SvelteKit (not sure about using plain svelte)
I'd prefer to use the npm standard mechanism
This is absolutely not the standard mechanism. I have never seen people import from the current project by package name. While this is supported by Node itself, nothing else seems to support it, including e.g. the VS Code language server which will be unable to provide code navigation.
Using the name makes it less clear that the import is local and not a separate dependency and if the name were to be changed it would have to be adjusted everywhere.
I would recommend just not doing that. SvelteKit has $lib predefined as a default to provide essentially the same functionality in a convention-based way that actually works.
If you create a project with just these 3 files, then execute node foo.js in a console window, you get "Hello, World!":
package.json:
{
"name": "#jdeighan/something",
"type": "module",
"version": "1.0.0",
"exports": {
"./utils": "./utils.js"
}
}
foo.js:
import {message} from '#jdeighan/something/utils'
console.log(message);
utils.js
export let message = 'Hello, World!';
Please help me to find right solution. I have NuxtJS project, there is a file structure as follows:
.nuxt
assets
components
dist
layouts
middleware
mixins
node_modules
pages
plugins
static
store
utils
versions
There is the folder versions where I store files for app versions:
app-version.js
update-version.js
versions-log.txt
I export version value from app-version.js:
exports.APP_VERSION = '1.1.0.0';
And then import it in Vue component to show it in UI
<span>{{ version }}</span>
...
<script>
...
import {APP_VERSION} from '~/versions/app-version';
...
computed: {
version() {
return APP_VERSION;
}
}
</script>
The problem is that sometimes app version is incorrect in UI, I think that it is saved in cache. After clearing cache of browser it is OK.
I don't understand why there is the problem. I thought that Vue must handle with it and prevent caching data. Maybe I need hashing js file with version variable, but I don't know how to do it.
Can anyone help me? I would be greatefull for any advise.
I have some js file which is generated by aws cognito, and its content is different based on environment.
As I should not modify it manually, so vue's environment variables may not work for me.
How should I dynamically load the js file based on the environment?
I use following command to run my server on local
vue-cli-service serve --mode=dev
I located the file under /environment/dev/aws-exports.js
const awsmobile = {
"aws_project_region": "ap-northeast-1",
... some more json...
};
export default awsmobile;
and load in the main.js
import config from "./environment/dev/aws-exports"
Amplify.configure(config);
How should I modify my code so that it can load it based on --mode?
I am not sure if this is exactly what you are looking for but I'll try to help:
To dynamically load the js file based on the environment you can create a function that returns an import:
function getConfig(mode) {
return import(`./environment/${mode}/aws-exports`) // import returns a Promise
}
Note: remember that import is a Promise so you might need to await it.
I have an express server serving only one GET route and return the file 'public/app.html'
This app.html file load vue.js throw cdn
https://cdn.jsdelivr.net/npm/vue/dist/vue.js
I don't want to have a big component!
How can I put every component in a different file?
What I tried:
I created a /public/components/InputName.vue vuejs component.
And inside public/app.html in <script> I added:
import InputName from './InputName'
But I have this error
import declarations may only appear at top level of a module
Check this GitHub Repo :
it explains how you can load a component from a server:
https://github.com/maoberlehner/distributed-vue-applications-loading-components-via-http
I'm using an Electron boilerplate, from here: https://github.com/szwacz/electron-boilerplate/
It's using gulp-rollup to bundle the assets, and a dev server can be run with npm start.
Here are my import statements from app.js:
import os from 'os';
import { remote } from 'electron';
import jetpack from 'fs-jetpack';
import env from './env';
import jquery from 'jquery';
import parsley from 'parsleyjs';
import select2 from 'select2/dist/js/select2.js';
import { setupForm } from './form/form';
Everything works fine on an initial load with npm start, but as soon as I edit a file and save, which triggers the watch to reload the build, I get an error:
Error: Could not load select2/dist/js/select2.js (imported by /##/repo-name-example/src/app.js): ENOENT: no such file or directory, open 'select2/dist/js/select2.js'
at /##/repo-name-example/node_modules/rollup/dist/rollup.js:9428:10
at process._tickDomainCallback (internal/process/next_tick.js:129:7)
If I cancel the process and just npm start again, everything is fine.
Why would it forget where select2 is?
Since you are importing this manually using a file path, rather than a named import like the jquery line, you need to use
import select2 from './select2/dist/js/select2.js';
Note the ./ at the beginning. Otherwise, it effectively looks for a module called select2/dist/js/select2.js, rather than using the path.
You also might need to do change it to
import select2 from './node_modules/select2/dist/js/select2.js';
(Assuming thats where the folder is)