how to use properties file in vueJs? - javascript

hi is there any way to store most usable values and properties in a file like yml - property file and ...
and use them in vueJs components
in java we have spring and it helps us using yml and property file properties in project
is there any thing same in vueJs

In vueJs you can use .env files easily.
In you .env file you can define properties starting with VUE_APP_ and them will be available for you in the whole app.
Ex: .env
VUE_APP_API_URL=http://localhost:5000
To read this property just do it.
process.env.VUE_APP_API_URL
More info here.

you can build an object in a .js file and import that obj as your configuration.
no file system exists in pure front-end
or you can get your configuration from a backend api

You can create a normal JS file and import in the Vue.
Or you might need to read about .env file because between those 2 files you gonna need for constants

Related

Including external (hosted) javascript files in Angular2

I'm trying to add an external js file into my Angular2 project by adding the record to my angular-cli.json file.
I've added a file to the [scripts] array as below:
"scripts": ["https://as-identitydemo--c.na50.visual.force.com/resource/1495420277000/salesforce_login_widget_js"],
all the other posts that i've read refer to using this format for something that's either hosted locally, or installed in the node_modules etc..
How can I include an external js library and utilize that in my project?
You should import the library in your index.html in the head tag.
Second you have to make the library visible to your Angular project. That means you need the typings. You can either search https://github.com/DefinitelyTyped
for already existing types or add the types to the typings.d.ts file.
Example:
In your page (outside of the Angular app) you might have a javascript global variable:
var testVar = 'testvalue';
Then in the typings.d.ts you can make this variable globally accessible by adding
declare var testVar:string;
Then you can access this variable in the whole Angular project like that:
console.log(testVar);
The same you can do with functions in external libraries.
Here is a Plunk that shows that (without having a typings file). Hope this helps.

How to be able to "require" a config file using browserify but not have this file included in the bundle

I have an angular application which uses browserify to modularise the Javascript components.
I have a config file which holds environment specific information which I also have as a module, so I can require it to get access to this information. For example another module can just var config = require("./config) and then use this config object to access the configuration information
However I do not want this file to be added to the bundle.js since I want it to be easily editable and no compilation to be required if the information inside it is changed.
Is there a way I can still access it using require but not have it added to the bundle?
You can parse a json file and read its contents with this: https://nodejs.org/api/fs.html

Use a json file in my react-native project

I have a json file in my react-native project how do I access it in one of my components?
The structure of the project
It has index.js and App on the same level
Then it has components on the next level
In components it has databases and Main.js
In databases it has database.json
I want to use information held in database.json inside Main.js, I can also change the file structure not sure what is the best way to do this.
Thanks for any help
You can just require your JSON file like any regular javascript file.
let data = require('../../database.json')

Pass In Config Values to JS File

I have a JavaScript file, and I would like to pass in a few config values to my JS file. I originally thought of using an .INI file, but I found out that the browser cannot access these System Config values. Does anyone have any suggestions to alternatives?
I store my configuration in a separate JSON file and load that into the app as a configuration object.
See this answer for examples on how to do this using Require.js or jQuery: requirejs load static JSON file

Managing Modules in Angular JS

I am using Angular js for my client side application.
Que:1
My folder structure is like :
Main
--Client
----app.js
----index.html
----Modules
------Module Name
--------module_name.js
--Server
I want to access Module Name.
I have tried using Main/Client/Module Name but I didn't get anything.
Which is proper way to get this?
Que:2
How can I add all js of Modules in index.html
I have to add all js of modules and its controllers in index.html manually.
Is there any way to add js automatically when module is called?
for question 1: you should better use absolute paths, /Main/Client/Module_Name
and for question 2: you should use grunt or a similar task manager to arrange those stuff for you. you can write a merge command that will merge all js files under Module to a single js file and add that file in index.html

Categories

Resources