vue-native-scripts
v0.3.1
Published
Compile Vue Native components to React Native
Downloads
170
Maintainers
Keywords
Readme
vue-native-scripts
This package is auto-generated. For pull requests please work with src/platforms/vue-native/scripts/index.js.
Compile and transform Vue components to React Native.
Find the vue-native-core
repository here.
For the official documentation, visit this website.
Usage
Vue Native CLI is the recommended way to setup a new Vue Native project. However, if you wish to setup a project from scratch, use the following steps after setting up a React Native / Expo project.
Step 1: Install
The following packages are required as runtime dependencies by Vue Native:
During development, another package is required to transpile Vue Native component files (with .vue
extensions) into JS:
To install them, run the following commands in your project directory
$ npm install --save vue-native-core vue-native-helper
$ npm install --save-dev vue-native-scripts
Step 2: Configure the React Native bundler
The Metro bundler is used by React Native to generate app bundles. It can be configured using a metro.config.js
file. Add the following to your metro.config.js
(make one to your project's root if you don't have one already):
const { getDefaultConfig } = require("metro-config");
module.exports = (async () => {
const {
resolver: { sourceExts }
} = await getDefaultConfig();
return {
transformer: {
babelTransformerPath: require.resolve("./vueTransformerPlugin.js"),
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: false,
},
})
},
resolver: {
sourceExts: [...sourceExts, "vue"]
}
};
})();
The babelTransformPath
property above takes the path to the transformer you wish to use. In our case, we need to create a vueTransformerPlugin.js
file to the project's root and specify supported extensions:
// For React Native version 0.59 or later
var upstreamTransformer = require("metro-react-native-babel-transformer");
// You will need to use different transformers for different React Native versions
// However, versions older than v0.59 are no longer supported by Vue Native
// For React Native version 0.56 - 0.58
// var upstreamTransformer = require("metro/src/reactNativeTransformer");
// For React Native version 0.52 - 0.55
// var upstreamTransformer = require("metro/src/transformer");
// For React Native version 0.47 - 0.51
// var upstreamTransformer = require("metro-bundler/src/transformer");
// For React Native version 0.46
// var upstreamTransformer = require("metro-bundler/build/transformer");
var vueNaiveScripts = require("vue-native-scripts");
var vueExtensions = ["vue"]; // <-- Add other extensions if needed.
module.exports.transform = function({ src, filename, options }) {
if (vueExtensions.some(ext => filename.endsWith("." + ext))) {
return vueNaiveScripts.transform({ src, filename, options });
}
return upstreamTransformer.transform({ src, filename, options });
};
This file conditionally transforms files based on their extensions. vue-native-scripts
is used for .vue
files, while the stock React Native Babel transformer is used for other (JS) files.
Using Vue Native components and .vue
files
In the React Native application, you can simply import
your Vue components as follows
import VueComponent from './VueComponent.vue'
There should be a file named VueComponent.vue
in the corresponding folder; the transformer parses this file and sends it to the React Native bundler.